Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
16th July 2013

Build a responsive WordPress theme with Reverie 4

Discover how to put together a responsive WordPress blog theme with the Reverie 4 HTML5 framework

Build a responsive WordPress theme with Reverie 4

WordPress is one of the most versatile and user-friendly web platforms currently available. From the budding blogger to the business looking for a web presence, WordPress and its many associated plug-ins and themes can offer even the most inexperienced web designer easy entry into website creation.

However, for those looking to move beyond installing a pre-built theme, there are a number of excellent, and free, blank templates available that can be easily edited to create something more personal. With the rise of responsive web design, a lot of these templates offer out-of-the-box responsive layouts, including WordPress’s own Twenty Twelve default theme.
Among the best of these blank templates is Reverie, based on Zurb’s superlative Foundation framework. Reverie 4 is the most recent release of the fluid theme, and it includes significant changes to both the structure and syntax, embracing the mobile-first ethic for the first time. Reverie makes building your very own responsive theme simplicity itself.
This tutorial assumes the user has some basic knowledge of WordPress installation and HTML editing. Also, while Reverie 4 is built for ideal use with SASS, we will keep the focus of this project on Vanilla CSS. So, let’s make a responsive, colourful, movie blog!

DOWNLOAD TUTORIAL FILES

Install WordPress

Once you have installed your WordPress site, and you have decided on the basic structure, such as the blog title, pages, and menu items, it will display using the default theme, Twenty Twelve. Not a bad template, but we want to use the superior Reverie 4.

Install Reverie

In the site’s dashboard area, proceed to the left-hand menu. Click on Appearance> Themes> Install Themes. Select Upload and using the Choose File window, locate your Reverie zip file. Hit Install Now and once that has completed, click on Activate. Now refresh your site and you will see the Reverie template take over.

Check the responsiveness

Reduce your screen size and see that the elements are already responding. Sidebar elements stack themselves below the main content, forming a single column. Pay particular note to the menu which, under a screen width of 768 pixels (Reverie 4 has only this one cut-off point), converts to a drop-down. The basics are now in place.

Reverie file structure

Reverie 4’s structure differs from earlier releases, which followed the standard WordPress structure. Now the style.css located in the theme’s root is largely redundant, replaced by a stylesheet of the same name in the CSS folder. Also, whereas large portions of necessary styles were in foundation.css, most of this has now been moved to that same stylesheet.

Setting your background

You have a choice of setting your background in either the CSS (see below), or with the basic customisation function which WordPress offers. From the Dashboard, click on Appearance> Themes and Customize, next to the theme thumbnail. From the left-hand menu select Background Image and upload your image, or select Colors. Then Save & Publish.

001 body {
002 background: url(../img/bg.jpg) fixed;
003 }

Understanding Reverie’s recent changes

Those familiar with earlier editions of Zurb’s framework will notice a change in syntax for classes. Rather than declaring

s as one number of columns, eg class=”twelve columns”, Reverie 4 declares each

in small and large column sizes, eg class=”small-12 large-7 columns”. This allows more control in the markup between device sizes and a more efficient build.

001 < div class=”row”>
002 < div class=”small-2 large-4 columns”>…
003 < div class=”small-4 large-4 columns”>…
004 < div class=”small-6 large-4 columns”>…
005 < /div> 

Your blog logo

It’s very simple to swap out the standard blog title for a more personal logo image for your blog. Using the new syntax, open up the header.php file (wp-content/themes/reverie-master/header.php) and locate the title declaration on line 77. Remove the h1 tag and replace it with a call to your logo image that you want to use. Remember, you want the logo to sit at the left-hand side at full-width, but fill the screen at mobile.

Extra styling

You will want to add in your personal CSS styles as you go along. The easiest way to do this is to add any fresh styles to style.css (wp-content/themes/reverie-master/css/style.css). Scroll to the bottom and create a comment, ‘my styles’. Place all your new styles under here so you can easily keep track of your changes. Then give your new logo some room to breathe.

001 /* my styles*/
002 #logo {
003 margin:15px 0; 
004 }


The header area

To change your header background, locate line 4554 of style.css. Remove header.row from the row cluster and place it alone in your new section with an opaque black value. Remove the underline in the header by deleting the < hr /> tag beneath the logo in header.php.

001 header.row {
002 background-color: rgba (0, 0, 0, 0.9);
003 } 

Navigation bar

The navigation bar needs to be highlighted. There are several areas where changes to the background colour must be made to encompass the blog title, < ul> elements and the search bar (for full-width). Change the background colour on lines 2736, 2859, 2953, 3008 and 3071 from the dark-grey to the red of the logo.

001 .top-bar {
002 overflow: hidden;
003 height: 45px;
004 line-height: 45px;
005 position: relative;
006 background: #9a0510;
007 } 

Custom home page

To exert more control over how your front page looks, you need to create a custom home page. Locate the file page.php in the theme folder. Copy it and rename the copy home.php. WordPress will automatically look for this file name when loading the site. Now time for some editing. And how about a few posts to show the results?

Installing Orbit Slider

Reverie comes with the responsive Orbit Slider scripts pre-packed. You will need the Orbit Slider plug-in to complete the circuit. Once you have this installed and activated, open home.php and add a slider < div> containing the orbit shortcode, just below the main content < div>. You can set the slides in Orbit’s option page (from the Dashboard left menu).

001 < div class=”small-12 large-8 columns”
002 role=”main”> 
003 < div id=”slider”>
004 < ?php echo do_shortcode(‘[orbit- slider]’) ?>
005 < /div>

Orbit Slider options

The Orbit Slider comes with many options, which can be accessed from the Dashboard menu under Slides. From here you can set the transition speed, style, captions and navigation elements. Slides can be added individually or by category. Upload a few slides and test it. The default width for the slides is 540px, but they will fit the < div> in which they sit.

Creating post boxes

The latest posts listed on the homepage look better boxed and with a thumbnail. On home.php, close the entire loop in a ‘post_box’ < div>, which we will style later. In the ‘entry-content’ < div>, replace ‘the_content’ with ‘the_excerpt’. This will display a snippet of each post. Then add a thumbnail for each post at the start of the ‘post_box’ < div>.

Post box styling

Give the post box a black background, with a red border, 10px padding and a 10px bottom margin. Change the font for the entry-title h1 to, say, Amatic from Google Fonts, and change the colour. Also reduce the size of the meta and snippet text and make it white. Arrange the thumbnail to sit left-side. Now it’s taking shape.

Tidy up

You will need to add in a margin to create some space between the content and the header. In header.php, give the main content section an id ‘site-content’ and then a padding-top of 15px. Additionally, a matching border for the slider itself would tie it all up very nicely indeed. Use the code below to complete these steps and add a border to your CSS, along with an extra media query so that the thumbnail occupies the full-width at mobile landscape.

001 Header.php
002 
003 < section id=”site-content” class=”container row” role=”document”>
004 CSS
005 #site-content {
006 padding-top:20px; 
007 }
008 #slider {
009 border:2px solid #9a0510;
010 margin-bottom:10px;
011 }
012 @media only screen and (max-width: 380px) { 013 .thumbnail {
014 width:100%;
015 float:none;
016 margin-right:0;
017 }
018 .thumbnail img {
019 margin:0; 
020 }

The sidebar

Everything so far has been put in a box so why not the sidebar? Open sidebar.php in the theme root folder. The sidebar is an aside with an id, open to some styling. Give it a black background, with a 0.8 opacity, a border, 10px padding-top, and colour the text. Now it fits in.

001 #sidebar {
002 background-color: rgba(0, 0, 0, 0.8);
003 padding-top:10px;
004 border: 2px solid #9a0510;
005 }
006 #sidebar p,ul,h1,h2,h3,h4,h5,h6 {
007 color:#fff;
008 }
009 #sidebar a {
010 color:#ffb016; 
011 }

The footer

Open footer.php in the theme root folder. Any changes made here first require the footer tag to be assigned an id. You may also wish to remove the Reverie credit here. The footer is widget-ready, or alternatively you can add your content directly in the HTML. If you would rather not have the menu items, they can also be removed or restyled.

Adding footer content

Widgets and custom menus are an effective way to add content to your footer, but the Reverie syntax allows you great control over hard-coded content. Create three footer areas, each small-12 large-4 columns wide, for an email, logo, and social icons. The social icon div can also contain four small-3 large-3 columns for each icon.

Social header

Having placed the social icons into the footer, it might look cool to place them in the spare area on the right-hand side of the header. This time, however, we have five columns to play with rather than the four in the footer, since the logo occupies seven. The icons will automatically appear slightly larger, but will remain the same for mobile.

Post pages

Now click on one of your blog posts and have a good look about to see what needs refining in those inner pages. Actually it doesn’t look bad at all. Just a few areas need tidying up. The post title needs a colour change, but you can take care of that with a colour addition to the ‘entry-title’ tag we worked on earlier.

001 .entry-title { 
002 font-family: ‘Amatic SC’, cursive;
003 font-weight: 700;
004 margin-top: 0em;
005 margin-bottom: 0.2em;
006 text-rendering: optimizeLegibility;
007 line-height: 1.4;
008 font-size: 2.5em;
009 color:#9a0510;
010 }

Test your blog

It’s always very important to take the time to check a responsive site at all device widths before sending it out into the wide world. Use responsinator.com or another, similar device simulator to see how it looks at all widths. Don’t be afraid to add in further, more specific, media queries if needs be. Chances are you won’t. Reverie probably has it covered.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.