Theme Your Blog with Bones
Bones is an awesome HTML5 responsive blank template for WordPress blogs. It makes excellent use of LESSCSS, 320-and-up, and the power of WordPress. Well organized with plenty of starter files for you to tweak, Bones makes it a breeze to theme your blog and get the results you always dreamed of. This will be more of an overview of the features and how to get going.
Getting Started
Of course, to start you’ll need to download the Bones theme and pop it into your editor setup. I used SublimeText and XAMPP to host my blog locally. Once you are all set up, you’ll notice that, aside from the common wordpress files in the folder, there is a library folder. Here is where all your LESS, CSS, JS, images, and custom bones-specific function files are. Spend a few minutes to wander the files so you get a sense of where they exist.
The first thing you’ll want to do is define your custom post types, if you need any. This is done in the library/custom-post-type.php file. It’s already got a preliminary setup for a template post type. You can clear this file out if you don’t need it or customize the functions and settings to get the type of post you want. It’s best to make use of as many built-in WordPress capabilities as possible. That way whenever you want to make a change to your theme, you can do it through the Admin panels from anywhere rather than having to be on your development machine to modify HTML/PHP.
Template Files
Bones starts you off with the core page layouts for viewing archives, author, pages, search, and single posts. It also has a template for page-custom, single-custom_type, and taxonomy-custom_cat. These files are meant to help guide you through making theme styles for custom posts as well as custom page themes. If you want to have a special page template for use in your New Page dialogs on the Admin, add a file named page-my_template_name.php and at the top add:
| |
This will show up in your Template field when adding a new page.
You can also edit the footer, header, sidebar, and comments layouts. These are also based on the core WordPress functionality so you can edit them to meet your design standards. The 404 page is also exposed for you to customize as well!
All these files are ready to be customized to your liking. You can add or remove files just like any other WordPress theme to get the ideal result.
The CSS
You have the option to pursue your styles from a raw CSS approach or using LESS or SASS. If you have no experience with either LESS or SASS I would say use them anyways since you can code normal CSS anyways. At least you’ll have the option to use one of the tons of awesome features they provide you. I chose to use LESS, so I’ll be explaining the approach from that direction, but it’s the same for both CSS and SASS as well.
Initially you’ll want to check out the mixins files for SASS and LESS. Here you will find some core variables, cross-browser fixes, and common mixin functions that will make your dev a lot easier. You can modify this file however you want just try to use as many of these features as possible since it’ll be a heckuvalot easier to edit later on.
First up is the base file. Here you define the most basic styles for your theme. This structure follows a mobile-first method, which means that mobile devices only need to load this base file. It’s extremely organized so if you are going to modify the style for something, just search for it. There is probably already a rule!
Second is the normalize file. This contains reset rules to make sure all browsers are showing _nearly_ the same thing at the most basic style. This has a lot of cross-browser fixes and you really only need to edit this if something doesn’t seem to be included as a reset already. There is also a secondary IE style file that matches more with the next style in the list, but also can contain IE specific fixes if you’d like.
Finally is the set of responsive styles. This starts with style and moves by screensize based on media queries. Style contains the core media queries to decide which styles to apply as well as for the base print media type. The queries include 481up, 768up, 1030up, and 1240up. Each of these files represents a common format for a common screen size, such as tablet, larger monitor, and super large monitor.
With the mobile-first design, your core styles such as color and core layout should all exist in base. The remaining files should override and add new rules to help re-orient your content so that you make the best use of the available screen size. You can also add your own media queries if you feel like these aren’t substantial enough.
Note
When using LESS or SASS be sure to compile your files somehow. You can use a third-party compiler, one built into your editor, or a WordPress/JS plugin that will compile on the fly. Check your CSS pre-processor of choice’s site for options.
The Functions
At the heart of every WordPress theme there is a functions.php file. Bones fills the functions file with some default code including some image sizes, sidebars, comments layout, and search form. It also includes the library/bones.php, plugins, and custom-post-type files.
The bones.php file has a much more in-depth set of functionality. It has head cleanup, js and css enqueuing, excerpt_more, theme support arguments, a custom related-posts function, and pagination. It’s a bit overwhelming to look at, but it does follow a very straightforward and organized format making it very easy to work with if you need to.
Conclusion
This is a crash-course in finding and editing the files you need in order to create your own custom Bones theme. Of course you’ll need to have a bunch of WordPress-specific knowledge, but Bones certainly makes it a whole lot easier to get started. It has great HTML5 support, 320-and-up responsive efficiency, and a really well organized file structure.
