Build a Responsive WordPress Theme Tutorial

A responsive design means a layout that responds well to different screen sizes. Such as iPad, tablets, Smart Phones and Desktop. This tutorial explains what it takes to make your existing Wordpress theme responsive in a few simple steps.

What you should already know:
1. How to build a wordpress theme
2. CSS knowledge

 

In this tutorial we are going to make a child theme and use CSS media queries to make it work properly in multiple screen sizes.

1. In the wordpress ‘themes’ folder, Create a new folder and name it ‘multiplescreen’.

2. Create a CSS file and save it as ‘style.css’ in the ‘multiplescreen’ folder.
A ‘style.css’ is the only required file for a child theme. Add the following code to the newy created ‘style.css’  file.
Importent: Let’s assume your existing theme is called ‘mynormalWPtheme’. Replace the ‘mynormalWPtheme‘ with your themes name.

 

/*
Theme Name: mynormalWPtheme Child
Theme URI: http://www.yourdomain.com/
Description: Child theme for the mynormalWPtheme
Author: Your Name
Author URI: http://www.yourdomain.com
Template: mynormalWPtheme
Version:0.1.0
*/

As with any WordPress theme, the information header must be at the top of the CSS file. The only difference is that, in a child theme the Template: line is required, so that WordPress knows which theme is the parent of this child theme.

Now we have to call our parent WordPress stylesheet styles in to the child theme. Add the following code to do so. @import url.. calls the parent theme’s CSS to the child theme’s CSS.

@import url(“../twentyten/style.css”);

To see if the child theme is working, lets change the H1 titles of the child theme to orange. replace the above code with following:

@import url(“../twentyten/style.css”);
h1
{
color: #ffb400;
}

Importent: Make sure no styles appear above @import url.. That prevent your child stylesheet from importing the parent styles.

Log in to the WordpPress admin, Activate mynormalWPtheme Child in the Appearence –> Themes. Now check your wordpress site in a browser. You should see a exact copy of your parent theme with orange h1 titles.

Now we need to define what are the media screen sizes we will be designing for. I have categorized them to 3.

1. SmartPhones- less than 320px
2. Tablets – 321px to 768px
3. Descktop – 769px and above

@media screen and (max-width:320px)
{
h1 {
color: #ffb400;
}
}
@media screen and (min-width:321px) and (max-width:768px)
{
h1 {
color:#0096ff;
}
}
@media screen and (min-width:769px)
{
h1 {
color: #693573;
}
}

Save the CSS file. To test these media queries, simply open your site in a browser and drag and resize the window. You will see the h1 color change when browser window size change.
You can also test it through Dreamweaver CS5 multiscreen option (Multiscreen Preview button in the Document toolbar).
Next, you can add media specific styles to override specific parent templates styles. As an example, the top navigation which is horizontal in desktop, could be made to be vertical in the smartphones. Remember to remove the h1 styles we added for testing purposes.

This is how this web site looks on multiple media screens.

Related Posts

35 Responses to Build a Responsive WordPress Theme Tutorial
  • Graeme

    Great, and easy to understand! But I’m doing something wrong because my stylesheet isn’t pulling over. Does this work in a localhost environment? The graphic elements that are relatively linked are pulling through (as is the header slideshow) but no style elements are pulling over. The H1 tag did change to orange but my site is just a mess of left-justified, un-styled elements. I tried to link relatively but that didn’t work either. I’m not sure why it isn’t recognizing my original (and only) stylesheet.

    • thanuadmin

      Does the CSS pull though without the child theme code added?
      If so check syntaxes and spellings..

  • Faisy

    Thanks for such a nice and easy tutorial. I’m going to make my site company responsive.

  • Michael

    I followed the step by step process on creating a responsive wordpress theme but it’s not working. Please advise. Thanks

    • thanuadmin

      Can you send me your link if your site is online? I’ll take a look.

  • sakshi

    This article is excellent.your tutorial is very easy to apply on default theme.Can you post more. I would like to subscribe to your feeds.Anyway thanks a lot for this tutorial.

  • Elizabeth

    This is one of the best and simplest explanations of responsive design I’ve seen. I’ve read a lot of articles on the subject and this really cuts through to the core. Excellent – thanks for sharing!

  • Ron

    This is just what I need for my very first wp theme. Thanks

  • Arafin Shaon

    Really nice buddy now i got it tnx 4 this…

    • Thanushka

      Your welcome!

  • Tommy

    I tested this method and while the code / css colors changed to show me it was working I could not get my phone to stop trying to load the tablet version. I also tried to view this very site and it loaded the full size.

    Is there another method to detect mobile devices and switch accordingly?

    Tommy

    • Thanushka

      Do you know the screen size of your phone? The reason for loading the tablet version is that the screen size of your phone must be bigger than 320.
      I have set the full site to load on ipad / tablets for this site, which is why you get the full version.

  • Liam

    This works fine, thanks for sharing!

    One problem i have found tho! I have a jQuery slider and when resizing the window the li > isnt resizing the CSS “height:” only the “width:”

  • Dan

    there is software that facilie creating wordpress themes?

    • Thanushka

      There could be. They may even be OK for a personal blog or a ‘not so serious’ personal site. But those cookie cutter software cannot create custom themes that one can actually use in a real life business :)

  • ql3_x

    The media query doesn’t work in Firefox 11 but does in Chrome… any suggestions?

    • Thanushka

      Some media queries do not work on FF, it’s a browser specific issue. But I have FF 11 installed and the the queries I have used work fine on it. Keep on checking since FF have a rapid release cycle. They are catching up fast on the issues..
      I do not give much importance to FF on mobile (I use media queries to target mobile devices), since mobile web browsing is dominated by Chrome and Safari.

  • Stephen Broadbent

    In answer to the poster above, you need this in the header to enable the iPhone (and others) to display the site as intended, i.e. responsively:

    Great article!

  • Caroline Elisa

    Aah, got it. Need to have in the header.

    • Lezus

      Hi, I seem to be having the same problem. How did you fix this? What did you add to the header?

  • Caroline Elisa

    Hi Thanushka,

    This is working for me fine when I resize the browser window, but when I visit my site on an iPhone it displays the page as it would for 769px and above.

    Am I missing something?

    Thanks,
    Caroline

  • haitze

    Hi, explanation is very clear, but the problem I face, is that the stylesheet is called by the bloginfo function. href=”. When I directly reference to eg ../tweaker4/style.css, iso via the function, I lack a lot of style elements. Any idea how to deal with this?

    thanks in advance,

    Haitze Weistra
    the Netherlands

    • Thanushka

      Even you link a stylesheet on wordpress through a relative path, you have to make sure to include the correct relative path.
      Even if the stylesheet and functions file/ template file is on the same directory, you still have to link it like this:
      ex: wp-content/themes/yourtheme/style.css

      Since you get some styles, check if your styles are in a sigle file or multiple stylesheet files.

  • siddhesh

    any other way to call the css file as i heard that using @import is not good for the loading time ….

    • Thanushka

      For CSS pages:
      @import best usage is as a means of overriding existing styles logically in an existing framework or application. We use it to avoid repeating each and every style 3 or more times for every media query we write on a CSS style sheet. @import is the best practice if you are building a child theme, as in my above tutorial

      For html/ php pages:
      @import does have loading issues with IE 6 (history), ie 7(history) and ie8 (almost history) on html or php etc pages, compared with ‘linking’ the css file. It’s better to ‘link‘ (link href=””…)’ your css file on your html or php pages, rather than using @import.

  • Sadie Mak

    Thank you so much for this excellent tutorial. I have been looking for a clear, simply explanation of how to design and use responsive themes for several days and this is the best one I have found. In just a few short steps, you have expertly explained the parameters to add and why they should be added. You saved me a ton of time and confusion.

    Thanks again!
    Sadie Mak

  • Jen D.

    Awesome possum! You just gained yourself a fan!

  • T. Adam

    That’s a great initial tutorial i think. I am searching for a detail responsive layout design tutorial. But your tutorial also look great. Would you like to write a ultimate tutorial on this subject?

    Thanks again.

    • Thanushka

      I’m planing to write one but it looks like my days are getting shorter and shorter… I’m thinking of starting a series of tutorials (on responsive WordPress theme design), so I can do it in little chunks.

  • David Radovanovic

    Surely it can’t be this easy to create a responsive theme? How about embedded media, i.e. images, slideshows, etc.?

    • Thanushka

      Actually it is. There’s no big secrets in to it. This tutorial only has the key things you need to make your WP theme responsive.
      There’s another tutorial that explains how to make the images in wordpress responsive.
      Slideshows and other media content are unique to every site. I’m doing the same myself at the time and I’ll be writhing about some common ones in the future and also a detailed article to build a responsive site from scratch to end.

      • Andrew B

        Does that mean I need to style the website three times, or can I get away with styling it once, and modifying only the pieces that need modifying for the different sizes?

        • Thanushka

          Styling it once, and modifying only the pieces that need modifying for the different sizes.

  • Jeanette Burreson

    Pretty nice post. I just stumbled upon your blog and wished to mention that I have really loved surfing around your blog posts. I’ll be subscribing for your feed and I am hoping you write again soon!

  • Malcolm Hoye

    This was novel. I wish I could read every post, but i have to go back to work now… But I’ll return.

Leave a comment

Your email address will not be published.

POST COMMENT


+ three = 10