By
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 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=“”>×</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 }
