Reverie: A Foundation Based WordPress Starter Theme

Reverie is a popular WordPress starter theme, one that featured in my previous article ‘Getting Started with Foundation and WordPress‘.

Reverie is mainly based on ZURB’s Foundation framework, with a few added perks. You don’t have to go through the hassle of trying to mesh the Foundation framework with WordPress on your own. This is a great way to get up and running, if you want to dive straight into development.

When you work with an existing theme, even if it’s a framework and you’re going to customize it, it’s important to understand how to go about it, so that you streamline the process. Not taking the time to understand the framework or starter theme you’re using can end up costing you more time than if you just built everything from scratch.

Your First Major Decision

Whenever you customize any base or starter theme, you want to evaluate the need for a child theme. If you’re going to keep the theme updated, you’ll definitely want to go the route of using a child theme. The main reason for this is that when you update the main theme, you are likely to lose all of the changes you’ve made. This can easily be a disaster if you’re building the site for a client.

On the other hand, if you don’t want clients updating the theme by themselves and destroying all of your hard work, you can disable updates with a simple code snippet. This will make theme updates unavailable from the backend for that user. Updates to themes and plugins can end up breaking the whole site, so you can disable them by adding the following to the functions.php file.

function remove_core_updates() {
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');

After Your First Install

You can see from the screenshot that when you first install the Reverie theme, it comes with the Customize feature, which enables you to preview basic changes from the front end, such as background color, background image, and widgets. A lot of popular themes are customizing this area in detailed ways, down to font colors, font families and much more.

Setting up a Child Theme for Reverie

How a child theme works is that the files are kept in a separate folder, so when you update the main theme, the files in the separate folder aren’t touched. This means that all of your hard worked and custom designs aren’t erased every time you update the main theme.

Setting up a child theme for Reverie is done the same as any other theme, for the most part. In the themes directory, you need to create a folder that says reverie-child. Inside it, you need to place a style.css file and a functions.php file. This is typical for any child theme. If you want to add your own custom functionality, and you want to add your own custom styles, these files are necessary.

In the stylesheet in your child theme, all you need to do is follow the basic setup for a child theme CSS file.

/*
Theme Name: Reverie Child Theme
Description: Child theme for Reverie 
Author: James George
Template: reverie
*/
 
@import url("../reverie/style.css");
 
/* Start child theme customization below *

Now, you’re all set to add your custom functions and styles to your new Reverie child theme.

This is typically what Reverie looks like right after installing it. If we want to customize the look, we’ll need to add custom CSS to the style.css file in our child theme folder.

The best way to do this is to open up the main-index.php file and the single-page.php file and look at the structure. It’s important to note any special classes you’ll want to pay attention to. For the most part, everything should be pretty straight forward.

The other method (and my method of choice) is to use the Firebug Inspector for Firefox and the Inspect tool in Chrome. It doesn’t matter which one you choose, they both do close to the same thing. My personal preference is Firefox’s Firebug. I can inspect an element, and it will tell me the div ID and any classes with attributes that are styling a particular element.

This is also a great way to see how things are built when you hover over an item in the breakdown at the top of Firebug’s window, it will highlight that element. You can see how divs are nested, which can help you narrow down any problems you’re trying to solve.

In the image above, you can see the area of code you are looking at is highlighted in a light blue. If there is a purple area, that represents any padding present. Yellow represents any margin values applied. This is a great way to fine tune any spacing issues and diagnose why your design isn’t structure how you want it to be.

In the example above, if I want to style the author name, changing its color, I can hover over it with my mouse, right-click, and select inspect element. Then, in the code below, you can see the div and class name, which is actually a span class of byline author.

Since the author name is a link, I can do add an a to the end, selecting the active element:

.byline.author a{color: #F90;}

This changes the author link to orange. It’s simple, but these are the fundamentals of styling your theme. Also, it’s much easier that staring with a page of PHP, div’s and classes – and trying to sort it all out in your head.

In the next article in the series, we’ll look at adding functionality to the Reverie theme. There’s a lot of flexibility here, and the sky is the limit. Understanding the overall structure of the Reverie theme and how to manipulate its look will help you to understand how to build upon it successfully.