64x64 icon dark hosting
Deploy New Relic now and get $135 off your Tuts+ subscription.

Making a Theme With Bones: Finishing Off


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

We're going to follow straight on from the previous tutorial in this series. So let's jump into it:

Step 13: Setting Heading and Body Copy Fonts

We will use two fonts from the Google Font library: Arvo and PT Sans. Put this code in the functions.php file. This code will pull in the CSS code which contains the font-face properties.

Let's set Arvo for headings (base.less) and PT Sans for body copy. We can set the font with font-family. We also define serif and sans-serif which means we will get a default font if the custom font can't be loaded.

Step 14: H1, footer, header

The font size will be 4em. We have to modify the footer.php to add content and the base.less file for styles. Set the background (with background), bottom border (with border-bottom) and padding (top 10px, 0px for left and right, and 15px for bottom). For the header a noise gradient resized by 10 times will be good, saved as a file (kotkoda_header_bg.gif) and it has to be in the bones/library/images folder. The CSS code goes into the base.less file. The graphics will be repeated horizontally (repeat-x) and start in the top left (0 0).

This is how it looks after modifying the footer.

After footer modifications

This is how it looks after adding the graphics.

After footer modifications

Step 15: Favicon and Page Title

We can set a new 16x16 favicon in the header.php file. In the href part we set the path of the icon, get_template_directory_uri will give us the template's main directory URL. For the page title, replace the original code with this one and set the description in the admin interface. This PHP code will echo the blog's description field.

It will look like this after adding the icon.

After adding the favicon

Step 16: Page Menu

The main navigation for pages will get a minimal style as well. With display set to inline the look will be horizontal and the left border will be white (border-left).

The new look of the main menu.

After setting main menu

Step 17: Comment Styles

Comments will get a simpler look. The styles named odd and even should be empty (or commented out) and the li element gets a border-left. The right date text link will be white as well, let's color it to @white. The reply button will get a new style too. We have to set the color, the background color and the opacities (these are deleted).

The new look.

After comment modification

Step 18: Comment Box and Button

We don't need the border (border: 0) and the background should be @white (base.less). There are a lot of fancy styles we don't need (transition, rounded, gradient) so we have to change borders and backgrounds, and delete roundness and transition. This goes into our mixins.less file.

The look after styling.

After comment box and button modification

Step 19: Info Box

Let's change the info box background to light yellow, which is @alert-yellow (in mixins.less). We don't need a border, so set it to zero.

Step 20: Theme Admin Screenshot

The last step is to delete the default screenshot and replace with the Kotkoda one we made.

Final theme screenshot for admin


Here is how the theme looks finished in 600 pixels wide. In the next tutorials we will clean the theme from unnecessary parts then prepare it for submission to ThemeForest.

After comment box and button modification