Advertisement
Theme Development

Developing WordPress Themes Using Responsive Frameworks

by

Responsive design is slowly but surely becoming an expected standard for web developers. This tutorial will show you how to add a responsive framework to your next WordPress theme.


What Is Responsive Design?

It used to be you only had to worry about website consistency across multiple browsers, but now we have to look at the bigger picture – consistency across multiple devices. The computer used to be our only gateway to the Internet, but now we jump online from our phones, TVs, tablets and who knows what else will come down the pipe. Having your website appropriately render and perform on any device should be a top priority this year.

Responsive design is all about making things fluid and adjusting according to screen size. Although WordPress doesn't always play nice with responsive design methods, there are ways it can be achieved. How responsive you decide to make your website is really about how much time you want to spend doing it.


Responsive Frameworks

There are several responsive frameworks out there to choose from. You might want to spend some time investigating each one to determine which has the included features your project might require. If you aren't sure where to start, here are a few to consider:

Bootstrap

Bootstrap from Twitter is built on a responsive 12 column grid. It has included fixed- and fluid-width layouts based on that system. It also comes with support for optional JavaScript plug-ins such as an image carousel, Typeahead, togglable tabs, and many more.

Less Framework

Less Framework is based on 4 layouts and 3 sets of typographic presets. Less Framework uses a default layout as a starting point and then uses CSS3 media queries to code 'child layouts'.

Foundation

Foundation is a grid system based on 12-columns that do not have a fixed width; they can vary based on the resolution of the screen or size of the window. Foundation comes pre-packaged with buttons and built in form styles, alerts, and more.

YAML

YAML is a multi-column layout based on a grid system with percentage widths. It comes with several built in features and supports several jQuery plugins such as Accessible Tabs and SyncHeight.

This list of frameworks is hardly complete, but for the sake of this tutorial, I'm going to show you how to incorporate Foundation into your next WordPress theme.


Step 1 Downloading and Applying the Framework

To get started, go download Foundation and add the files to your css and js folders in your theme's directory. The easiest way to add the required files to your theme would be to use wp_enqueue_script and wp_enqueue_style.

For this tutorial I'm going to show you what you place in your functions.php file to make Foundation work right off the bat, but for more details on adding files this way, check out the tutorial on how to include JavaScript and CSS in your theme.

To add the needed JavaScript for Foundation to work properly in your theme, you need to create a function that calls the wp_enqueue_script to serve them up.

function responsive_scripts_basic()
{
	//register scripts for our theme
	wp_register_script('foundation-mod', get_template_directory_uri() . '/js/modernizr.foundation.js', array( 'jquery' ), true );
	wp_register_script('foundation-main', get_template_directory_uri() . '/js/foundation.js', true );
	wp_register_script('foundation-app', get_template_directory_uri() . '/js/app.js', true );
	wp_enqueue_script( 'foundation-mod' );
	wp_enqueue_script( 'foundation-main' );
	wp_enqueue_script( 'foundation-app' );
}
add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic', 5 );

Next, add the Foundation stylesheets to make the grid flexible. Paste this function after the one you just created.

function responsive_styles()
{
	//register styles for our theme
	wp_register_style( 'foundation-style', get_template_directory_uri() . '/css/foundation.css', array(), 'all' );
	wp_register_style( 'foundation-appstyle', get_template_directory_uri() . '/css/app.css', array(), 'all');
	wp_enqueue_style( 'foundation-style' );
	wp_enqueue_style( 'foundation-appstyle' );
}
add_action( 'wp_enqueue_scripts', 'responsive_styles' );

Once saved, go back and check your source code to make sure your files were added correctly. It should look something like this:

<link rel='stylesheet' id='foundation-style-css'  href='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/foundation.css?ver=all' type='text/css' media='all' />
<link rel='stylesheet' id='foundation-appstyle-css'  href='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/app.css?ver=all' type='text/css' media='all' />
<script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/modernizr.foundation.js?ver=1'></script>
<script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/foundation.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/app.js?ver=3.3.1'></script>

Step 2 Add IE Only Conditions

Everyone loves to go that extra mile to make things work in Internet Explorer right? To make sure your Foundation framework stays responsive in Internet Explorer, you need to add a few conditional statements. These should go in your header.php file before the closing head tag.

<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->

<!--IE Fix for HTML5 Tags-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->>

Step 3 Working With the Framework

Now that your theme has Foundation setup, to make use of all its responsive features you need to design using the Foundation grid system. Like other responsive frameworks, it's a system made up of 12 columns. Other included features are pre-set button styles, tabs, tables and much more. Check out the Foundation documentation to view all bells and whistles and instructions on how to work with the grid.


Going With a Pre-Packaged Theme

There are plenty of free and premium WordPress themes available that make use of responsive design. If you would rather start with something out of the box, you can try out these themes:

WordPress Bootstrap, By 320Press

WordPress Bootstrap is a theme developed on Twitter's Bootstrap v.2.0.1. It's fully responsive with four different page templates to choose from, shortcodes, and multiple sidebar options. Once installed, you can check out bootswatch.com to download different color versions of the theme.

iTheme2

Based on the Themify framework, iTheme2 uses media queries to target different displays, comes with a customizable feature slider, a social media widget, two different theme skins and you can have up to four footer widgets.

Responsive Twenty Ten

The Responsive Twenty Ten theme supports flexible images, margins, and mobile images. It was created as a child theme for the included Twenty Ten theme.

Good Minimal (Premium)

Good Minimal is a clean, minimalist responsive layout that adapts to a multitude of displays and devices. Good Minimal comes with two different styles, supports unlimited custom sidebars, shortcodes, multiple drop down menus, and several other features.

Modulo (Premium)

Modulo is a responsive, fluid layout, supporting google fonts, shortcodes, multiple sliders, portfolio page templates and color customization. Modulo also comes with 5 custom widgets, including one for recent posts with thumbnail support.


Conclusion

Responsive design is continuing to grow in popularity and knowing how to utilize it within your future theme construction will be crucial for success. Whether you are adding a framework to your theme or using a pre-built theme supporting responsive design, your clients are going to expect multiple device support as a basic service.

Are themes you create responsive? Do you use a responsive framework we haven't mentioned? Tell us all about it in the comments below!

Related Posts
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Web Design
    HTML & CSS
    Build a Dynamic Grid with Salvattore and Bootstrap in 10 MinutesSalvatorre thumb
    Today, we will use Salvattore in combination with Twitter Bootstrap 3 to make a responsively awesome flowing grid structure.Read More…
  • Code
    Theme Development
    How to Pass PHP Data and Strings to JavaScript in WordPressPhp js 400
    It's good practice to put all your data in static strings in your PHP files. If you need to use some data in JavaScript later on, it's also good practice to put your data as data-* attributes in your HTML. But in some certain scenarios, you have no choice but to pass strings directly to your JavaScript code. If you are including a JavaScript library, and you've found yourself initializing a JavaScript object inside your header.php then assigning data to its properties, then this article is for you. This article will teach you on how to properly pass PHP data and static strings to your JavaScript library.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…
  • Code
    Cheat Sheets
    The Complete Guide to Proper JavaScript Usage With WordPressJavascript 400
    I remember thinking "What the heck do we need JavaScript for, when we have Flash?" when I was fourteen. Although I still remember how I enjoyed coding stuff with ActionScript 2.0 back then, I saw how much one can achieve with JavaScript and fell in love with it. I'm not an expert on JavaScript (yet) but I can say I'm over and done with Flash for a long time. When it comes to WordPress, the biggest blogging platform and content management system worldwide, JavaScript is - of course - very useful for many things: content sliders, lightbox galleries, slick shopping carts, UI elements like tabs or accordions... you name it. But how exactly should we use JavaScript with WordPress? Returning or echoing a bunch of HTML script elements is one way to do it - and it's wrong. In this tutorial, we're going to see how to enqueue JavaScript files inside our pages and how to pass translatable data to the JavaScript code.Read More…