Bones Starter Theme: Shiver Me Timbers!

In another post, we mentioned the Underscores starter theme, but let’s take a look at Bones. Bones is a starter theme created by Eddie Machado at Themble. Having worked with Bones, I can say, in full confidence, that it is a great starter theme. Why? Let’s take a look at some of features and check out the directory structure. As always, it’s a good idea to use Bones, when developing, as a child theme.

Features

Bones is a great tool for the following reasons:

Documentation

Bones, as a starter theme, is very well documented, in fact, you can learn a lot just by reading some of the comments. The documentation is detailed and, at times include links to other articles or websites. The style.css file is a good example:

Sass

Bones has Sass installed and ready to go.

Mobile-First

Bones is a mobile-first theme starter, meaning that it was designed for mobile in mind; the theme starter also includes responsive fallbacks.

Clean

Bones cleans up the WordPress head and other unnecessary functions which, in turn, speeds up your theme.

The Tour

Let’s download Bones and take a peek at what’s inside.

Wow! Might seem like a a lot to take in at first, but it’s really quite simple and orgainzed. You have your 404.php, archive and footer, header, index template files. As you can see, there are two main folders: library and post-formats. Let’s take a peek at what’s inside the library folder:

The Library

The library folder contains the theme’s assets, such as the css, images, javascript, sass and translation files. The admin.php file contains functions related to the WordPress admin area. while the bones.php file runs the theme’s main feature when the theme is first activated. The custom-post-type.php file is a file that walks you through the process of creating a custom post type. Let’s look at

 CSS

You might have noticed that Bones has two CSS files, but don’t let this confuse you!

 Images

Icons and images for the theme.

JS

Bones includes the modernizr jquery plugin as well as its own scripts.js file. You can use modernizr to test for future HTML and CSS browser support.

SCSS

The Sass folder in all of its glory. I will not be able to cover Sass in this article, but learning and using Sass will improve your workflow substantially. Eddie Machado, the Bones creator, states that it’s not as complicated as it looks and he’s right.

SCSS

The translation folder includes your standard PO and MO files.

Post Formats

Post formats is a feature that allows you to customize the presentation of a post in your theme. If you don’t need post formats, then you can just take the code within format.php and paste it into the single.php file.

That’s it! If you would like to learn more about Bones, you should check out this Tuts+ tutorial that goes over the basics. Sadly, the Tuts- tutorial is a bit old as it covers LESS (which is no longer supported in Bones). Also, if I were you, I would install Grunt or Gulp for watch and other features. In the meantime, if you have any questions, feel free to leave a comment below.

  • f
  • t
  • p
  • h
  • l
  • n