News

Build a responsive WordPress theme

As the most advanced responsive framework available, Zurb’s Foundation is ideal for your latest WordPress project

Build-a-responsive-WordPress-theme

Build a responsive WordPress theme

Following the previous tutorial on how to build a custom template using Zurb’s Foundation framework (from issue 223), we’ll be taking this lightweight, advance responsive framework with a mobile-first approach to the popular CMS/blogging platform WordPress.

Previously to incorporate Zurb’s Foundation framework into WordPress you had to manually link the necessary JavaScript and CSS using the WordPress functions ‘wp_enqueue_script’ and w’p_enqueue_style’. But now, thanks to Zurb and the popularity of WordPress, Zurb has provided a starter-theme called FoundationPress, which you can download directly from its GitHub page to start building your own WordPress theme with the Foundation framework.

The purpose of this ultimate starter theme is to act as a springboard; it comes packed with useful re-useable components, a 12-column responsive grid, JavaScript functions and much more. This starter theme contains all the necessary design elements, including the JavaScript and CSS libraries.

Still, FoundationPress is not an all-in-one WordPress theme with plugins, shortcodes, custom options or custom templates – it is only to be used as a starting point. Luckily it has done most of the hard work for us including setting up widgets, navigations, displaying blog posts and general clean-up of WordPress.

DOWNLOAD TUTORIAL FILES

Download FoundationPress

To begin, make sure you have the latest version of WordPress installed and set up. Head over to the FoundationPress starter theme GitHub page: github.com/olefredrik/foundationpress and download this theme. Once you’ve downloaded it, extract it and upload it to your theme’s directory in WordPress and activate it.

Custom stylesheet

Start by opening up the ‘header.php’ file in your text editor. You’ll want to add in your own custom stylesheet so that when it comes to upgrading FoundationPress it won’t override any custom work. You may use Sass with Foundation, but to allow beginners to follow along this tutorial, we’ll be using pure CSS.

001    <link rel=“stylesheet” href=”<?php echo get
_template_directory_uri(); ?>/style.css” />

Customise the menu

WordPress already features a built-in Appearance Menus Screen, enabling users to create custom navigation. FoundationPress takes this a step further by allowing us to create multiple navigations on either side on the nav bar. When you create a new menu in WordPress, you have the option to enable your navigations for mobile devices.

Customise the header

FoundationPress has already pre-written a lot of the WordPress basic theming. We’re going to dive in and modify it. To give this theme a visual punch we’re going to add in a header with the website name, including a gradient background. Open up the ‘header.php’ and paste in the following HTML code.

001    <header class=“main-head”>
002        <div class=”row”>
003            <div class=”large-12 columns”>
004                <h1 class=”title”><?php bloginfo
( ‘name’ ); ?></h1>
005            </div>
006        </div>
007    </header>

Style the header

With our header implemented we’ll now need to style it. Open up ‘style.css’ in the FoundationPress starter theme, start by giving the main header a gradient background, using CSS3 gradient. Position the main h1 above the header. Let’s make all characters upper-case and give it a text shadow to stand out from the light backdrop.

001    .main-head {
002        margin-bottom: 2em;
003        padding: 1.2em;
004        background: #00b3d3; 
005        background: -moz-radial-gradient(center,
ellipse cover,  #00b3d3 0%, #007295 
100%); 
006        background: -webkit-gradient(radial, 
center center, 0px, center center, 100%,
color-stop(0%,#00b3d3), color-stop
(100%,#007295)); 
007        background: -webkit-radial-gradient
(center, ellipse cover,  #00b3d3 0%,
#007295 100%);
008    }
009    .main-head h1 {
010        text-align: center;
011        font-weight: 900;
012        text-transform: uppercase;
013    letter-spacing: 10px;
014        text-shadow: 1px 1px 2px rgba
(50, 50, 50, 0.59);
015        font-size: 2.5rem;
016        color: #fff;
017    }

Add a search

Currently in our widgets list, the search form is located in the sidebar. In WordPress Widgets we can disable the search widget. Now inside our ‘head.php’ at the very bottom, paste in the following function, which will print out the search form. We’re going to place our search form just below the header of our website.

001    <?php get_search_form(); ?>

Customise search

With the get search form function added in our ‘header.php’ we can now structure this search form by editing the ‘searchform.php’. Directly below the form tag we have applied a row <div> and changed the default grid layout to use the large grid system as well as setting some custom classes to be referenced in our CSS.

001    <div class=“row”>
002        <?php do_action(‘foundationPress_
searchform_top’); ?>
003        <div class=“large-8 columns searchbox”>
004            <input type=“text” value=“” name=“s” 
id=“s” placeholder=”<?php esc_attr_e
(‘Search’, ‘FoundationPress’); ?>”>
005        </div>
006        <?php do_action(‘foundationPress_
searchform_before_search_button’); ?>
007        <div class=“large-4 columns 
searchbutton”>
008            <input type=“submit” id=“searchsubmit”
value=“<?php esc_attr_e(‘Search’, 
‘FoundationPress’); ?>” class=”prefix 
button”>
009        </div>

Modify index.php

The ‘index.php’ is the main template in WordPress theming hierarchy. We’re going to modify it and remove some of the grid components and place them in ‘content.php’ instead. Remove the <div> row and grid classes just below the ‘get_header’ function and replace it with the code below. Finally, migrate the <?php get_sidebar(); ?> just above the ‘get_footer’ function.

001    <?php get_header(); ?>
002    <div class=”row” data-equalizer>

Blog post

With the homepage structure completed, we’ll want to structure each blog post in a grid column of four rows; this will lay out three blog posts organised next to each other on a large monitor. Using the grid system will force our layout to be responsive. Remove the original code all the way down to the <footer> tag in ‘content.php’.

001    <div class=”large-4 columns” role=”main”>    002        <article id=”post-<?php the_ID(); ?>” 
<?php post_class(‘panel’); ?> data-
equalizer-watch>
003            <header>
004                <h2><a href=”<?php the_permalink(); 
?>”><?php the_title(); ?></a></h2>
005            </header>
006            <div class=”entry-content”>
007                <figure><a href=”<?php the_permalink
(); ?>”><?php if ( has_post_
thumbnail() ) {the_post_thumbnail
(‘large’); } ?></a></figure> 
008                <?php the_excerpt(); ?>
009                <p>Posted on <?php the_time(‘F jS, Y
’); ?> in <?php the_category(‘, ‘);
?></p>
010                <p class=”byline author”>Written by 
<?php the_author_posts_link(); ?>
</p>
011                <a href=”<?php the_permalink(); ?>” 
class=”button”>Read more</a>
012            </div>

Style the blog

With our blog post structure set up in a grid column in a set of threes, we’ll now implement some simple styling to this homepage. Back in our ‘style.css’, we’ll add some box shadow so the panels don’t look so flat. We don’t need to style the panels themselves as these styles are already set up inside Foundation.

001    .panel {
002        box-shadow: 0 1px 5px #D5DEE5;
003    }
004    figure {
005        margin: 0;
006    }
007    .entry-content figure img {
008        margin: 10px 0;
009    }
010    @media only screen and 
(min-width: 40.063em) {
011        h2 {
012            font-size: 1.8rem;
013        }  
014    }

Style search form

With our blog posts neatly organised in a row of threes, our search field and search button are not quite aligned with the rest of the design. Let’s fix this by adding some padding. With a mobile-first approach, Foundation takes care of the responsive nature – it’s unnecessary to add styles for mobile or tablet devices.

001    .searchbox, .searchbutton  {
002        padding: 0 15px;
003    }
004    

Move the sidebar

Rather than having our sidebar situated on the right-hand column, we will position it directly below all the blog posts and just above the footer. Inside the ‘sidebar.php’ we’re going to use Foundation’s Equalizer component, which will set equal height to all the widget panels. We simply place the data-equalizer attribute to the parent container here.

001    <div class=”bottom-sidebar”>
002        <aside id=”sidebar” class=”row” data-
equalizer>
003            <?php do_action(‘foundationPress_
before_sidebar’); ?>
004            <?php dynamic_sidebar(“sidebar-
widgets”); ?>
005            <?php do_action(‘foundationPress_
after_sidebar’); ?>
006        </aside>
007    </div>
008    

Widgets

Now to actually lay out our widgets, we will need to open up the ‘widget-areas.php’ located in the library directory. Inside the first array on line 8, remove what is currently there and replace it with the below, which uses the large-4 grid and a ‘data-equalizer-watch’ attribute that the Equalizer component requires to set equal heights to each panel.

001    ‘before_widget’ => ‘<article id=”%1$s” 
class=”widget %2$s large-4 columns”><div 
class=”panel” data-equalizer-watch>’,

Style the sidebar

Within WordPress in the Widgets panel, we only require three widgets so remove any of the other existing ones. When you check the homepage you will notice our widget panels all have equal heights to the tallest panel. To finish up with our sidebar beneath our blog posts, we will give this section its own background colour and some padding.

001    .bottom-sidebar {
002        padding-top: 10px;
003        background-color: #cecece;
004    }

Set up shortcodes

Because there is a vast amount of components available in Foundation, we convert some of them into shortcodes so that we can reuse these components whenever we’re in the editor. Creating shortcodes requires two steps: create a primary handler method and hook up the handler into WordPress. Inside the ‘functions.php’ we need to set up our primary function.

001    function foundation_add_alerts
( $atts, $content = null ) {
002        extract( shortcode_atts( array( 
003            ‘type’  => ‘’,    
004            ‘shape’ => ‘’,  
005            ‘close’ => ‘true’, 
006            ‘class’ => ‘’
007         ), $atts ) );

Shortcode array

In the previous code snippet we noted that our function receives the parameters of type, shape and close. We’re going to use this to display alert boxes using one of Foundation’s components. The type attribute will display success, warnings or informative information using this shortcode. Let’s set up an array that will capture these attributes.

001    $class_array[] = ( $shape ) ? $shape : ‘’;
002    $class_array[] = ( $type ) ? $type : ‘’;
003    $class_array[] = ( $class ) ? $class : ‘’;
004    $class_array = array_filter( $class_array );
005    $classes = implode( ‘ ‘, $class_array );

Shortcode markup

When this shortcode is executed we want to make sure that it’s using the correct formatted markup and CSS classes. We need to use a wrapping class alert-box. This is very important because we want to make sure that Foundation calls the Alert JavaScript plugin for us. This particular plugin is in fact handled in the ‘foundation.alert.js’.

001    $output  = ‘<div class=“alert-box ‘ . $
classes . ‘”>’;
002        $output .= do_shortcode( $content );
003        $output .= ( ‘false’ != $close ) ? ‘<a 
class=“close” href=“”>&times;</a>’ : ‘’;
004        $output .= ‘</div>’;
005        return $output;
006    }

Hook into WordPress

Before finishing off our shortcode we’re going to ensure that it has all been registered correctly, otherwise WordPress won’t know what to do with it.  To do this we use the ‘register_shortcodes’ function and the ‘add_shortcode’ method. The first parameter defines the shortcode in the editor while the second points to the function that we created previously.

001    function register_shortcodes() {
002        add_shortcode(‘alert’, ‘foundation_add_
alerts’);
003    }
004    add_action(‘init’, ‘register_shortcodes’);

Shortcodes to use

We can now use the following shortcodes in the editor to display alert boxes, which is a native component from the Foundation framework. All we have to do is pass in which type of alert box type we want displayed by selecting the attributes: success, secondary or alert. We can even choose what type of shape to use and whether we want a close off function.

001    [alert type=”success” shape=”radius” 
close=”true”]This is a success message
[/alert]
002    [alert type=”secondary)” shape=”radius” 
close=”true”]This is a standard message
[/alert]
003    [alert type=”alert” shape=”round” close=
”false”]This is an alert message[/alert]

Alert boxes

Without any CSS styling or JavaScript and just using the shortcodes we have set up, we can implement alert boxes wherever we like in our WordPress site. By simply using shortcodes we can easily convert many of the rich components from Foundation to be used easily throughout our site.

Footer

To finish up we’re just going to add in a footer navigation by using the WordPress WP list pages. Open up the ‘footer.php’ and just below the closing </section> tag, remove everything including the <footer> tag. Replace it with the following code, which will display a list of all pages on our site.

001    <footer class=”main-footer”>
002        <div class=”row”
003            <ul>
004                <?php wp_list_pages(); ?> 
005            </ul>
006            <?php do_action(‘foundationPress_
before_footer’); ?>
007            <?php dynamic_sidebar(“footer-
widgets”); ?>
008            <?php do_action(‘foundationPress_
after_footer’); ?>
009        </div>
010    </footer>

Style the footer

Finally, we’re just adding the final touches by styling up our footer. Through this tutorial we’ve taken the starter theme FoundationPress and quickly customised it as our own theme using a variety of Foundation’s components and functionality. Using FoundationPress allowed us to focus on the front-end development and less on the actual backend efforts.

001    .main-footer {
002        padding: 10px 0;
003        background-color: #9c9c9c;
004    }
005    .pagenav ul {
006        margin: 10px 0 0 0;
007    }
008    .main-footer li {
009        float:left;
010        margin-right: 10px;
011        list-style: none;
012    }

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×