Theme building is at the heart of WordPress. It’s the technique you use to build bespoke websites for yourself or your clients and it’s a vital skill for anyone wanting to design and develop with WordPress.

More and more WordPress themes now are responsive – they use CSS media queries to adapt to different screen widths, adjusting the layout and making design and interface changes to make any site created using the theme easier to read and interact with on a range of devices and screen sizes.

In this tutorial I’m going to show you how to build a Mobile First WordPress theme, which starts with the styling for the smallest screens and works upwards.

What You’ll Need for This Tutorial

In this tutorial I’m going to take a WordPress theme with minimal styling and then style it to make it mobile first. The eventual design will be very simple – the idea is to cover the building blocks of the content and layout and you can add your own design goodies afterwards if you want.

To follow the steps in this tutorial you’ll need the following:

• A text or code editor. If you don’t already have one, both TextWrangler and Kompozer are free.
• If you’re developing locally, MAMP, WAMP or XAMPP so that you can run PHP and MySQL and work locally using WordPress.
• If you’re developing remotely, an FTP client such as FileZilla.
• A local WordPress installation (or a remote one you’re happy to use for testing)

I’m assuming that you’re already familiar with installing and working with WordPress. I’ll work on a remote WordPress installation
and provide links as I go along.

Unless you have your own theme you’re working on, you’ll also need the starting code for the tutorial. You can see my theme at http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ and download the code for the theme at various stages of its development from xxx [to be added based on nettuts+ downloads system].

Before We Start: What’s Mobile First?

Mobile First is a term which was first coined by Luke Wroblewski. It refers to the
strategy of turning the way we design websites and themes on its head. Instead of starting with a desktop design and then adjusting it for mobile devices, we work in the other direction – we start by designing and coding for mobile devices and then add what’s needed for larger screens. This has a few advantages:

• It’s faster – content or styling which isn’t needed on small screens isn’t sent to them. This can be faster than just hiding or overriding it.
• It changes the way we plan content – by focusing on small screens, we focus on what’s really important rather than on what we’re including because w have the space. Designing in this way can have a drastic impact on the eventual desktop design.

1. Our Starting Theme

The starting theme has minimal styling applied to it, and no layout styling at all yet – that will be added as we work through the tutorial.

The elements which the theme includes are shown below:

At present, the theme looks like this on a smartphone (i.e. at 320 x 480px screen size):

As I haven’t applied any widths yet, the site should resize to smaller screens – but it doesn’t because the smartphone is displaying it as if it were 960px wide. The first thing to do is tell smartphones to display the site at the actual width of the screen.

2. Setting the Screen Width

To tell smartphones to behave nicely with regard to screen width, I add a line into the  section inheader.php, as follows:

This instructs smartphones to display the page at the device’s screen width rather than create a virtual 960px wide viewport which is the default behaviour.

Now the theme looks like this on a small screen:

If you’ve created responsive stylesheets before but not Mobile First ones, this will be a bit of a revelation. Remember all that extra styling you added to your media queries for small screens? You’ll need very little of it, as a page with minimal layout styling already looks better on mobile than it does on the desktop, as you can see from this screenshot, taken at 1024px wide:

But I still need to add some layout styling for small screens, which is the next step.