• Tutorials\
  • Theme Development

Making a Theme With Bones: Getting Started

Tutorial Details
  • Program: WordPress
  • Version: 3.0+
  • Difficulty: Medium
  • Estimated Completion Time: 20 minutes

Final Product What You'll Be Creating

This entry is part 1 of 3 in the series Making a Theme With Bones

Making a Theme With Bones
  • Making a Theme With Bones: Getting Started
  • Making a Theme With Bones: Finishing Off
  • Making a Theme With Bones: Cleaning Up

We are using a starter theme to build a new responsive site.

Why Bones?

Bones is a completely free starter theme (not a framework) built with the latest best practices. It serves as an excellent base to build a WordPress theme. This is an incomplete feature list about Bones:

  • built upon the HTML5 boilerplate
  • mobile first approach
  • responsive design
  • comes with LESS and SASS
  • fallback for older browsers
  • cleaner header section
  • great documentation

Step 1: Download Bones

You can download the starter theme from the Themble site.

Step 2: Themes Directory

Unpack the ZIP file into wp-content/themes and rename its directory to bones.

Step 3: Theme Settings

Set the theme in the WP admin interface to Bones (at Appearance / Themes).

Step 4: The Page

This is how the website looks with the basic Bones theme. The resolution is 1440×900 pixels.

Step 5: Theme Basic Data

This is the place of theme name, description, author, version and so on. The style.css file is in the theme directory. Basically the themes based on Bones don’t use any real styles here, but just the data for showing the info in the admin interface.

Theme Name: Kotkoda
Theme URI: wp.tutsplus.com
Description: This site was built using the Bones Development Theme.
Author: Adam Burucs
Author URI: burucs.com
Version: 1.0
Tags: flexble-width, translation-ready, microformats, rtl-language-support

License: GPL2
License URI: www.gnu.org/licenses/gpl-2.0.html

Step 6: Download a LESS or Sass Compiler

This tool is needed to compile and minify the styles of Bones into a production CSS file. I chose WinLESS because I’m working on Windows 7.

Step 7: Exploring the Bones (LESS) Styles

In the bones/library/less directory you can find all files to customize the theme. These are the styles we need:

  • 1030up.less – desktop stylesheet
  • 1240up.less – mega sized monitor stylesheet
  • 2x.less – styles for Retina screens
  • 481up.less – 481px+ styles
  • 768up.less – tablet and small desktop stylesheet
  • base.less – the base for mobile devices
  • ie.less – here we call all styles for IE, but without the media queries
  • login.less – we can modify the login page of WordPress
  • mixins.less – this is where we use LESS mixins and constants
  • normalize.less – general reset for default styles
  • style.less – main styles, uses all other files

Step 8: Main Background and Text Color

We are using orange background and mid-grey (@kotkoda-grey) text color in base.less. (Use color to set the font’s color and the background property to set the background color.)

body {
	font-family: Georgia, serif;
	color: @kotkoda-grey;
	background: #ED7626; /* main background color */

And this goes into mixins.less. You can define a color variable in LESS with the following: @kotkoda-grey is the color variable name and after the colon is the color code (#19171A). Every variable name starts with the @ sign.

@kotkoda-grey:		#19171A;

Step 9: Link, Heading and Post Meta Color

For links the color will be @white, but @alert-yellow will be used for hover and focus styles. Use the color property to set the value. Every heading and heading with links will be @kotkoda-grey. We need a bit darker grey for this, the original value was #999. With the color rule we can set it to #444 (which is equal to #444444).


a, a:visited {
	color: @white;

	/* on hover */
	&:hover, &:focus {
		color: @alert-yellow;


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	font-family: sans-serif;
	text-rendering: optimizelegibility;
	font-weight: 500;

	if you're going to use webfonts, be sure to check your weights



	/* removing text decoration from all headline links */
	a {
		text-decoration: none;
		color: @kotkoda-grey;


/* post meta */
		.meta {
			color: #444;

Step 10: Our Page After These Modifications

This is how it looks in 600 pixels wide.

Halfway There

We come to the end of the first part of this tutorial series.

Other parts in this series:Making a Theme With Bones: Finishing Off
Tags: BonesTheme Development
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • al

    well, the use of LESS/SASS really complicates the process of setting up a theme for me, I know nothing about either one of them.

    I have a basic question, after I d/l winless.msi, what do I do with it? how do I use it? I am totally lost

    not a good start to the tutorial


    • alexball.tv Alex

      Hey Al -

      Definitely spend a little bit of time reading about and learning about LESS and Sass prior to using them in action.

      There are great write ups on both all across the web (if you haven’t used either before, I’d just do straight to learning Sass).

      It’ll definitely add a whole layer of power to your development.


    • Brian

      Al, I can appreciate your sentiment, but it’s worth it. It took me about a week of playing with SASS before I felt comfortable with the workflow / environment.

      The author should consider having a little aside about CSS preprocessing. I found this video at CSS-Tricks helpful in setting the groundwork for me. css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/

      I recommend SASS, and it was semi-easy to set-up on the MacOS. Just a few ruby install commands in the terminal. Something you should be comfortable with if you’re playing with WordPress templating! Also, for SASS install/setup instructions, do some google searches for “Installing SASS on the MacOS”.

      I highly recommend using Codekit as well. There’s a free trial for you to give it a shot, and a license is $25 (worth it!)

      Good Luck

      • sanjaykhemlani.com sanjay

        Maybe the author would consider a little ‘how-to’ for SASS and LESS, because not everyone are using it. I just started learning from it last week and still crawling / learning day by day. Al is just one of them.

        • kustomdesigner.com mike


          Sass and compass are pretty easy to learn, I admit they are intimidating at first but when you learn them you realize you can never go back to coding the way you used to. They have some really useful tools like compass’s @border-radius(15px); this will cover all browsers that support css3.

          I personally use windows and they have a tool for like $13 called fire.app and it works great, for Mac Ive heard awesome things about codekit. I would definitely learn Sass though…as we speak thewebsite is being redone and they are really going to put it out there I believe before the year is out. I wouldn’t be surprised at all if by next summer most jobs required you to know it. Good luck, man.

          Also I’d like to add, I was looking for a framework to use about 6 months ago and my final decision was down to either Skeleton framework or Bones and I ended up choosing Skeleton due to its options page, I like it but its not as simple and clear cut as I would like it to be but none of them usually are. I think from here out I will probably develop my own framework for me to use if I plan on doing any kind of long term WordPress work.

    • webenvelopment.com Ben Racicot

      Ok after an entire day on the Bones setup and totally configuring to compile Sass it works. Great. But everything I know about pre-compiling CSS doesn’t seem to apply to Bones.

      Maybe I’m a total noob but how do files such as _468up.scss and _768up.scss play into the compiled working CSS files? You don’t compile them to CSS so what gives?

      I’m sorry but it looks like Al is correct as the Bones theme is epic in usefulness but it’s Less and Sass are like… VERY ADVANCED. Please have mercy on us and explain how to use the Bones Less and Sass (in workflow or something)

      Thanks guys

  • wndfrm.com Kyle U

    Hey Al,

    I’m a longtime Bones user, and I too was little taken aback when version 1.2 was released which introduced the integration/reliance on LESS/SASS

    I’d like to share with you some words from Eddie Machado, the creator of Bones, from 1.2′s stylesheet on this shift:

    “.. take a few minutes and think about how much better a developer you can become by just TRYING out new technologies. It may be tough at
    first but it WILL make you a better developer. TRUST ME ON THIS. Give it a week, maybe two, and you will never go back.”

    (emphasis his).

    Here is a quick intro read for you that Eddie also provides – coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/


  • Andrai

    In the Bones documentation, there are instructions on overriding Less if you want to go back to the standard css file.

  • introworks.net Jeremy

    I’ve been using Bones for theme dev for awhile now and it just keeps getting better.

    @Al, It was one of the recent updates to Bones that started using LESS/SASS and before that I had never used them either so it was a step to get started, but after getting into it I spend less (no pun intended) time working with styles. Also it’s incredibly handy when it comes to building a responsive site and organizing the media queries.

    As for your winless.msi app question, my guess is that it works the same as the LESS app for the mac in that it listens for updates to the .less files, and then compiles them to .css for rendering in the browser. You can edit .less files in any code editor, and then after you save the file the app will take care of the rest—you just have to set it up first to watch the directory where the .less files are stored.

    You can learn more about LESS here (haven’t tried SASS yet sorry) lesscss.org/ (you don’t have to download the .js file, it’s for compiling the .less at runtime, but the app takes care of that ahead of time so there’s no extra lag on the live site.)

    Best of luck!

  • www.nomad-one.com nomadone

    So stoked this tut is finally getting going as I’ve been looking forward to it. Al I know how you feel, I’m not so into all the CSS preprocessors myself and have only used them very sparingly, still feel extremely clumsy at it, but I think diving into the deep end is the best way to learn.

    There’s a bit of an intro on nettuts here – net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

    Would be great to get a comprehensive series on one of the tuts sites covering preprocessors, intros, tools, tips etc

  • www.customicondesign.com Custom Icon Design

    This is my first time to notice the SASS/LESS, I think it’s may be interesting. all css files names *.less. why dont use .css? but I will become a student in the Less lessons. Thanks for sharing this and I am sure I will start the lesson.

  • www.whatsthebigidea.com David Radovanovic

    After attempting to install Bones, I got stuck on LESS. Like al (above) it is a bit more complicated for folks that have never worked with it before. Overall a great start though. Thanks.

  • Pingback: Making a WordPress Theme With Bones | Wordpress Family

  • www.scott-sherwood.com Scott Sherwood

    Thanks for this cant wait for the follow ups, great introduction to bones. Like the other comments I am new to LESS but I am diving straight in its really the only way to go. However, if you want to take it at a more leisurely pace why not compile the LESS files and make sure you don’t minify them and then you ca mess around with the raw css itself as you would normally? Remember to save copies ares recompiling your less files will overwrite your changes but at least you can ease yourself in. Not the most efficient way but just a thought for those trying to get started.

    Note: The current version of Bones requires you to add
    // import mixins
    @import “mixins.less”;

    at the top of the base.less file to resolve a compilation error, just incase anyone else new to LESS wastes a little time wondering why that doesn’t compile.


    • www.kelleherwebdesign.com/ Dharma Kelleher

      Thanks, Scott. I’m a noob when it comes to pre-processors, so when I came across that compiler error, I was left scratching my head. My gut told me it wasn’t connecting to the mixins.less file. And apparently, I was right.

      Also, don’t forget to include the underscore in the name of the file.

    • www.entrepreneur30.nl Youri

      Hey Scott thanks for this reply, I’m wondering wether simply adding this line doesn’t result in problems during the compilation, for example including the same css twice?

  • Tomy

    On step 4, I think the width should not 1440 but 1140.

  • php-sri-lanka.blogspot.com Upeksha Wisidagama

    Nice Tutorial. Learned new things. Waiting for the second part of this series. Thanks Adam!

  • giosensation.com Emanuele

    I have just finished building my first WordPress theme from scratch based on Bones (referenced on my name up here, if you would want to give a sneak peak). You should also mention that it comes packed with custom post types and its code if jam-packed with very useful comments to keep beginners on track.

    I used Sass/Compass for compiling the css and after that little while they really are a game-changer. I based my whole website (with a ton of shadows and text-shadows for 3d text effects, since it’s mostly based on icon-fonts for graphics) on 4 or 5 colors and if I wanted to change the color palette I could do that in just a few seconds because all other colors are generated mathematically with percentages. Nested structure makes the code readable while compressing makes the actual css super fast to load. Compass mixins are just great and allow you to code complex css3 things very easily and quickly (and tweaking is a breeze), adding all the vendor prefixes only when compiling. The only downside is that I can no more take advantage of the instant preview with Espresso, which is kind of boring.

    Getting back to Bones, I am very interested in the second part of the tutorial, since I made a complete mess of the mobile-first approach and would like to know the best practices with this approach on Bones.
    Thanks for the tutorial.


  • iriverworkshop.com Maron

    If you guys find hard to compile SASS/Compass or you don’t have the knowledge in Ruby, try Scout – mhs.github.com/scout-app/

  • www.coderish.com/ Coderish

    I asked for a tutorial and here it is with the speed of lightning, wow! It’s a basic one, but still it gives some pointers on where to start. I’m concerned about a few things however:

    1. Don’t know about you guys, but we build our themes from PSD -> HTML/CSS -> WordPress. Now if I were to use Bones with LESS, what would be the best practice to code the psd into html/css and then convert the premade html/css into wordpress theme? As I understand bones is based on boilerplate, so should the designer code the psd into html/css using boilerplate?

    2. If we are supposed to edit the less files Bones provides to create our new theme, what would happend when bones updates? Our customizations will be gone?

  • Pingback: Making a Theme With Bones: Finishing Off | Wptuts+

  • Pingback: Making a Theme With Bones: Finishing Off | Wordpress Webdesigner

  • Pingback: My Stream | Making a Theme With Bones: Finishing Off | My Stream

  • Pingback: Making a Theme With Bones: Finishing Off |Trax Asia™

  • Steven

    Glad to see a tutorial dedicated to building a site with Bones. I have built about 6 sites with it and it is absolutely getting better with every update!

  • Pingback: Wordpress Leaks » Making a Theme With Bones: Finishing Off

  • Pingback: Making a Theme With Bones: Cleaning Up | Wptuts+

  • Pingback: Making a Theme With Bones: Cleaning Up | Wordpress Webdesigne

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.