We all know that WordPress is a great platform for content generation. Silencio makes structuring your content types even easier. This starter theme was specifically built for iterative project development. By rapidly prototyping in the browser, any content requirement can easily be solved.
Set up your project locally and on production.
Our Grunt config compiles LESS to CSS, then inserts browser vendor prefixes using Autoprefixer for local development. For production deploys, all resources get concatenated and minified into a build folder.
We’ve incorporated the CMB2 library for easily adding custom meta-boxes to projects. The framework is very extensible.
There are four templates bundled with Silencio: Typography, UI Kit, Metaboxes, and Full Width. Using the Typography and Full Width templates, the designer and developer can style all available type and bootstrap outputs in the browser. They can be removed from the project once design is complete. The Metabox template is a resource for the developer to demonstrate how data from custom CMB2 Metaboxes can be displayed. The Full Width Template can be used for content pages that do not include a sidebar.
Included are Children Pages and Category Posts widgets. They give you more options than the standard WordPress counterparts. Category Posts let you choose which categories you’d like to display entries from. Children Pages displays all child pages of the current parent. If there are no children, nothing is displayed.
Using WordPress’ Customizer, you can easily add social profiles and address information to the footer. This can be expanded further in the theme options file found in the functions folder.
Silencio’s foundation was built from Underscores and Bootstrap. We also include Font Awesome for icons. The template markup follows PSR2 standards, rather than WordPress conventions.
The functions file contains all our best practices, refactoring reusable pieces into their own components, included in the Res folder.
Functionality refactored into pluggable components:
- Template Tags
- Shortcodes (including bootstrap grid elements)
- Custom Widgets
- Excerpts
- TinyMCE
- Custom Post Types
- Custom Taxonomies
- Jetpack Controls
Other Functionality
- Sidebar/Widget Areas per template
- Custom Client User Role
- Debugging Variables Helper
Silencio’s stylesheet is meant to be hacked. It includes files for layout and typography, as well as a variables file that calls mix-ins and other reusable patterns from Bootstrap. Grunt handles packaging it all together into a global css file.
- Akismet: blocks spam comments
- Authors Widget: adds customizable author info.
- Edit Flow: see above.
- Gravity Forms: additional functionality can be installed beyond just forms.
- Google Analytics for WordPress: Add the GA tracking code here, once site is live.
- Hyper Cache - static caching plugin
- Jetpack: adds several features, go here for the full list - http://jetpack.me
- Widget CSS Classes: Add a custom style for each individual widget.
- WordPress SEO: Should be configured at site launch.
Built by VIA Studio.
Silencio is pretty easy to get up and running. There are a few tools you’ll need to set up if you want to make use of LESS and Silencio’s easy build scripts. If you’re not into that, you can skip this bit and work directly on the included CSS and JS files.
- Node.js Install this first.
- Grunt is used for automating common front-end tasks like compiling LESS to CSS and building a single minified JS and CSS file for production.
- Copy Silencio into WordPress’
wp-content/themes/folder like you would any other theme. - From the command line, run
npm install. This will install everything Grunt needs to compile LESS, CSS, and JS.
You only need to install Node & Grunt on the machine you’re using for development, so don’t worry if your hosting doesn’t support it or let you install things.
Once you’re done with all of that, you’re ready to start hacking!
There are two tasks included with Silencio.
grunt watchmonitorsres/lessfor changes, compiles, and copies the results tores/.tmp/css. Autoprefixer then does it's magic and outputs results tores/css.gruntwill build your theme for release. This includes compiling LESS to CSS, minifying CSS intores/build/global.min.css, and minifying JS intores/build/global.min.js.
Any JS files that you want to include in your global.min.js can be added to the uglify.build.src array. Similarly, add CSS files to cssmin.build.src to include them in global.min.css. LESS files will automatically be included in Silencio's watch task, unless they're in less/lib. This folder is for LESS utilities that don't correspond to a CSS file.
less/lib/variables.less contains an assortment of mixins to make theme development faster, and is a handy place to store variables available in all stylesheets.
Given an image path and a width & height, sets a background image on an element and creates a media query for a 2x version of that asset. Make sure your 2x asset is named the same and has @2x at the end of the filename, and you’re good to go.
Apply different 1x & 2x assets depending on device width.
theme-options.php includes a basic set of location-related theme options. You can copy any of the $options[] = ... blocks to add your own. Just make sure you change your options ID to something different and it'll show up in the Appearance > Customize screen when Silencio is enabled.
metaboxes.php includes an example of a custom meta box created using the CMB2 metabox helper. Include this file in functions.php and uncomment the example metabox to see it in action. You can use this to add just about any kind of custom data to a post, page, or custom post type with an easier UI than what's provided by the built-in custom fields editor and without pulling in another plugin.
Display navigation to next/previous set of posts when applicable.
Displays numeric pagination using Bootstrap’s pagination styles.
Display navigation to next/previous post when applicable.
Template for comments and pingbacks. Used as a callback by wp_list_comments() for displaying the comments.
Prints HTML with meta information for the current post-date/time and author.
Returns true if a blog has more than 1 category.
Flush out the transients used in silencio_categorized_blog.
Silencio bundles shortcodes that allow your users to take advantage of Bootstrap’s 12 column grid. Make use of this grid in posts like so.
[row]
[span6]
Content!
[/span6]
[span6]
More content!
[/span6]
[/row]
Replace span6 with span1 - span12, and make sure you don’t put more than 12 units in one row.
Silencio includes two custom widgets. /res/functions/widgets.php is also a great place to register any custom widgets of your own.
Lists posts in the same category as the post you’re currently viewing.
Lists pages that are direct descendants of the current page. This widget will not display if the current page has no children.
Silencio provides some minimal customizes WordPress’ default excerpt settings. You can build upon these to suit your project.
Change the integer this returns to set your site’s excerpt length.
Formats the “Continue Reading" link for excerpts.
Replaces the default "…" excerpt with a more attractive "Continue Reading >>" link.
Silencio provides a handy dropdown for the aformentioned grid styles. You can add your own TinyMCE plugins & buttons using the silencio_register_tinymce_plugin and silencio_add_tinymce_button functions, respectively.
Silencio includes a "Slider" example custom post type. It isn't included by default, but can be enabled by uncommenting the post-types.php include in functions.php. You can customize and copy this to create any custom post type.
taxonomies.php includes a similar example for a custom taxonomy.
Silencio is compatible with Jetpack's infinite scroll plugin, and also disables auto-activation of new Jetpack modules by default. This prevents unexpected issues from new Jetpack functionality being enabled after a plugin update.