Making a WordPress Theme With Bones

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.

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.)

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).

Step 10: Our Page After These Modifications

This is how it looks in 600 pixels wide.