Creating Responsive WordPress Themes

If you are up to date on the latest techniques in WordPress theme development, you are surely aware of the need for more and more mobile friendly themes. In this tutorial for WordPress theme developers, I will describe some basic techniques to get you on your way to developing your own responsive WordPress theme that will look great in any device.

Layout is Key

The first step to creating a responsive theme for WordPress is to sketch out your design in at least three different screen sizes. Typically these would be for a desktop computer, an iPod or tablet and an iPhone, other phone or handheld device. You can do this the old fashioned way using just a pen and paper or use a graphics program or sketching tool such as paper for the iPod. Use whatever you feel most comfortable with.

Sketch Your Design

Here are some simple examples that show how you might sketch out a design for all three screen sizes. I used Gimp, a freely available graphics design software package available on the internet at no charge.

responsive theme layout

Notice in the above image, the footer is always at the bottom, but the sidebar is on the side for the larger of the three screens and just above the footer in line with the content for the smaller two screens. This can be done a couple of different ways which I will explain below.

Allowing the Sidebar to Move to Bottom for Smaller Screens

As promised, I will explain how to allow the sidebar to float to the left for large screens and go under the content and often above the footer for smaller screens. The technique most commonly used for this is adding media queries to the bottom of your theme’s style.css file. Here is a quick example of a media query you could add to the bottom of style.css to make the sidebar not float to the left at certain screen sizes:

/* No need to float sidebar on screens for iPod and smaller */
@media (max-width: 960px) {
	#pgwrap .sidebar {
		float: none;
		margin-left: 0;
		width: auto;
	}
}

Now at what size you wish to do this will depend on the layout of course. The basic principal is that above the media query just shown, you would have something like this for the .sidebar class:

#pgwrap .sidebar{
Float: right;
Margin-left: 33px
Width: auto;
}

So what the media query does is effectively cancel the float and make it go in line with the content on the left in the image example above. This is just a crude example by the way. You can take it further with more styles in the media query and the .sidebar class of course. You can go even further with the concept by adding another media query further down on the style sheet for even smaller screens such as for the iPhone and other phones. Here is an example media for phones:

@media (max-width: 320px) {
#pgwrap .sidebar {
padding: 0;
}
}

The above code would take out padding for smaller mobile devices only. That is just one example. You could do things such as make fonts different sizes to improve readability or change colors or backgrounds according to where on the page the styles show up on that particular device size. There are all sorts of possibilities. These are things you should take into consideration when developing your theme layout as early as sketching it out.

Think of Mobile Devices from the Start

When planning a mobile theme, think about mobile devices from the start. Keep the two key sizes in mind of 960px for iPods and 320px for phones. You can provide larger screen size exceptions for larger desktop screens as well. I have found this necessary in the past when making websites for Artists and Photographers who like to view their work on very large scale screens.

Summary

This is a starting level tutorial for theme developers and explains some basic concepts for mobile theme development and responsive theme techniques. Just remember to think of the mobile devices being used today when you start your theme’s layout. Sketch your theme out on paper or with a tool for such designs. Don’t forget to keep it clean and allow for the resizing of images and other containers on the website you are developing. The more flexible your layout is, the better it will look across all devices.

This article was authored by:

Ian Lincicome is a web developer and freelance writer with over 20 years experience in web development and writing. He specializes in Web Development, Custom WordPress Development, Programming, Online Application Development, Fiction Writing and Technical Writing. He enjoys sharing his knowledge with others on WPHub.com.

Ian Lin has authored 43 posts.Visit Website

Showing 3 Comments

  • This is a nice and simple tutorial for anyone who wants to learn about responsive design, but I am sure you can incorporate more things in this tutorial. For example, you discussed the maximum number of pixels, but there also can be a minimum of pixels and even a combination of both.

    Also, it might be nice to mention that IE8 does not support media queries so there would be the need to duplicate the css file and the duplicated copy can be named something like ie8.css. Then in this file, remove all media queries and there may be the need to modify some values.

    Once again, nice tutorial.

    REPLY
  • Hi, could I translate this article and put it on my website? I’m Italian, and I’m studying HTML, CSS, Javascript and so on. I really like web design and this “problem” of responsiveness. I would oubviously put a link to this page and credits to you.

    Thanks,
    Lidia

    REPLY
  • Michael Scott (Admin)

    Lidia,

    Yes feel free to translate it and give us credit with a link back to us:)

    - Michael

    REPLY

Add Your Voice: