Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Creating Mobile-Optimized Websites Using WordPress

“Mobile Web design.” Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.

If you own or have designed a WordPress website for the desktop and are considering going mobile, the process can be fairly daunting. You probably know of responsive design1 and might have heard of the mobile-first approach developed by Luke Wroblewski2, which entails planning the content and design for mobile devices first and then desktops second, rather than the other way round.

Further Reading on SmashingMag:

But if your WordPress website has a desktop theme in which everything is set in pixels, then the thought of adopting a responsive design might have you running for the hills.

It doesn’t have to be that way.

Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Plugins: The Quick Way To Make Your Content Mobile-Friendly Link

Designing for content is increasingly becoming more common than squeezing content into a pixel-perfect design, as documented here on Smashing Magazine7.

If your website is more about content than design (say you run a blog that is content-heavy and designed for reading), then you won’t be too fussed about what your website looks like on mobile devices. You just want people to be able to read it without having to zoom in, move the viewport around or generally tie themselves up in knots until they decide to leave.

If this is the case, then a simple plugin might do the trick. Below are some plugins to consider.

WPtouch Link

WPtouch8, which comes in free and premium versions, strips out your existing theme and displays your content and not much else, but the result is user-friendly, robust and easy to read.

WPtouch is widely used on websites, including Stephen Fry’s blog9 and Social Media Examiner10. You can see below how the plugin renders those two websites. The premium version has options to modify the colors and some styles, including a bespoke menu at the bottom of the screen, as seen on Social Media Examiner.

Social Media Examiner - desktop site11
Social Media Examiner desktop design

The Social Media Examiner mobile site - minimal styling12
Social Media Examiner mobile design, using WPtouch

WordPress Mobile Pack Link

The WordPress Mobile Pack2913 has some color options and can be used as a mobile switcher if you want a completely different theme for mobile devices. It also has a mobile interface for editing posts, although this has been superseded to some extent by the WordPress apps for iOS14 and Android15.

WordPress mobile pack gives a mobile interface with one or two colours and simple posts listing.16
WordPress Mobile Pack screenshots

BuddyPress Mobile Link

If your website runs BuddyPress, then you’ll need a plugin to ensure that none of its functionality is lost on mobile devices. BuddyPress Mobile has theming options, and you can edit the style sheet to make the mobile design your own.

BuddyPress mobile displays member information such as profile picture and updates.17
BuddyPress Mobile

Mobile Themes: The Next Level Up Link

If you want a consistent design across desktop and mobile, but you don’t yet have a theme or you want to develop one, then a mobile theme might be the answer.

More and more mobile themes have sprung up over the last year. In particular, Twenty Eleven18, WordPress’ default theme since version 3.0, is responsive enough for many websites.

The twenty eleven desktop version includes a full width header image and standard sidebar to the right.19
Twenty Eleven on the desktop

The mobile version of twenty eleven displays a narrower header image and moves the sidebar below the main content.20
Twenty Eleven on mobile

Below are some other themes that include a mobile or responsive style sheet.

Carrington Link

The Carrington21 family of themes can be used as parent themes. You can edit the CSS and functions to suit your needs, and it has a mobile version.

The desktop version of Carrington includes two sidebars to the right and some use of colour and graphics.22
Carrington on desktop

On mobile, Carrington has only one font, moves sidebars below the content and uses default colours for links.23
Carrington on mobile

Scherzo Link

Scherzo is clean and minimalist and would be great to use as a parent theme. It uses a mobile-first responsive design.

Scherzo on the desktop has a white background and dark grey text with blue headings, and a sidebar to the right.24
Scherzo on desktop

Scherzo on mobile uses the same font styles as the desktop version with a white background and moves the sidebar below the main content. It has less white space than the desktop version.25
Scherzo on mobile

Jigoshop Link

E-commerce websites are trickier to make mobile-friendly, but Jigoshop26 can help. It’s a full e-commerce plugin and theme, with a responsive layout that can be tweaked to suit your design.

Jigoshop on the desktop uses a white background with dark grey text, green details, product images in a grid and a sidebar to the right.27
Jigoshop on desktop

Jigoshop on mobile uses the same colours and font styling as the desktop version with a simplified menu banner, a narrower grid for product images and the sidebar below the main content.28
Jigoshop on mobile

A Different Theme For Mobile Devices Link

In the days before responsive design gained traction, websites commonly had two versions: desktop and mobile. The mobile version might have been on an m. subdomain or have a .mobi extension. Some websites out there still do this, mainly huge news websites that serve different content depending on the device.

Fewer WordPress administrators are choosing to do this now, but if you do want to go down this route, then serving two versions of your website from the same database is possible, by using a mobile switcher.

Here are two plugins that make this possible:

  • WordPress Mobile Pack2913
    This tool, already mentioned above as a theme that makes your website mobile-friendly, can also be used as a mobile switcher, detecting mobile devices and using a separate theme of your choice.
  • WPtap Mobile Detector30
    This targets mobile devices and enables the theme of your choice.

Using one of these plugins enables you to develop a completely separate theme for mobile devices, with its own layout, navigation and content structure.

Or, Finally, Make Your Current Theme Responsive Link

If you don’t want to throw out your existing theme, then the best way to give mobile users an experience that is at least visually similar to the desktop version is to build responsiveness into your theme.

A responsive theme contains media queries in the theme’s style sheet to define CSS that applies only to devices of a specified maximum or minimum width. A truly responsive theme has a fluid layout that adapts to mobile devices and larger screens to some extent already, but with some extra styling to make the layout optimal for mobile devices.

1. Defining the Media Queries Link

To get started, you will need to define media queries in the style sheet. Most of the styles already in your style sheet apply to desktop and mobile, so you only need to add CSS that is different for mobile devices. This will go at the end of your theme’s style sheet.

Start by defining the screen width you are developing for. There are two main approaches to this:

  1. Start with the narrowest screen width you are targeting (which will usually be mobile phones in portrait orientation); add all of the CSS needed for this screen width; and then add successive media queries for wider screens. This is known as the mobile-first approach, and it has the benefit of making websites faster on mobile devices because only the CSS needed for those devices is loaded.
  2. Start with the widest screen width (usually desktop monitors) and work down, adding CSS that applies to each screen width in turn. While this might slow down loading on mobile devices, it has the advantage of working in IE 8 and below, which doesn’t understand media queries. At the moment, most websites are developed this way because they involve making an existing desktop design responsive, so this is the approach we’ll cover here.

A media query consists of three main parts:

  1. The @media rule;
  2. The media type (the most common being print and screen — we’ll use screen);
  3. The maximum width of the screen you are targeting.

You could have a media query to target mobile phones (and other small devices such as the iPod Touch) in portrait orientation that have a width of 320 pixels:

@media screen and (max-width: 320px) {


The CSS to be applied to that screen width and any screen narrower than it would be written between the braces.

An alternative to the @media rule would be to create a linked style sheet with the CSS for each screen width. But I don’t do that because it adds another server request with the potential to slow the website down; and managing all of the styles becomes harder if they’re in more than one place.

Here are other media queries for commonly targeted screen sizes:

  • (max-width: 480px)
    Works for mobile devices in either portrait or landscape mode, because they are 480 pixels wide in landscape orientation but are still narrower than this maximum width in portrait.
  • (max-width: 780px)
    Works for iPads and other large tablets in portrait mode and any screens narrower than them.
  • (max-width: 1024px)
    Works for iPads in both orientations, as well as for small desktop browsers.

You can run one media query after another so that each change you make applies to the screen size you’re querying, plus any widths queried further down in the style sheet. In this case, you would work with wider screens first. For example:

@media screen and (max-width: 480px) {


If you are ignoring tablets, you would include this media query first and add any CSS for mobile phones in both portrait and landscape modes (for example, any changes to graphics or text size). You would then follow it with this:

@media screen and (max-width: 320px) {


Here, we’re adding any styles that apply only to phones in portrait mode (such as layout changes). You don’t need to repeat the CSS that applies to both landscape and portrait modes because this will still apply. In the same way, you don’t need to repeat any styles that will stay the same for desktop views because they will cascade down from the earlier parts of the style sheet.

2. Making the Layout Responsive Link

Phew! So, now we’ve defined media queries, and we’re ready to roll with some mobile-friendly CSS. Below are the main things you will need to work on for a standard WordPress website. Let’s assume your website’s markup is similar to that of the Twenty Eleven theme (i.e. htmlbodyheader (or div #header) → #main#content#primary#secondaryfooter (or div #footer). You might need to substitute your own elements and IDs for the ones in the examples below.

Overall width of website
You’ll need to change this so that it displays correctly. Add the following code between the braces of your first media query:

body {
width: 100%;
float: none;

This ensures that the website’s body fills the width of the device and removes any floats. At this point, you might also want to change the background image if there is one (more on that shortly).

You will now have the following code at the bottom of your style sheet:

@media screen and (max-width: 480px) {
   body {
   width: 100%;
   float: none;

Width of content and sidebar
In portrait mode in particular, there isn’t room for a sidebar to the right of the main content. Add the following code to the media query relating to devices with a maximum width of 320 pixels:

#content, #primary, #secondary {
width: 100%;
float: none;
margin: 10px 0;

Footer content, especially widgets
If your footer has widget areas or other elements with floats applied, you will need to override them for mobile devices in portrait mode.

If you want the footer widgets to be full width in both landscape and portrait modes, then simply add footer.widget-area to the CSS for the sidebars and content.

However, you might want the widget areas to be laid out side by side in landscape mode, depending on how many you have. In that case, you’ll need to do the following:

  1. Work out the percentages for the widths, padding and margins (some box-model maths for you!);
  2. Add the relevant code to your media query for devices with a maximum width of 480 pixels;
  3. Add a separate query for devices with a maximum width of 320 pixels after the one you’re working on, with the following code:
footer .widget-area {
width: 100%;
float: none;
margin: 10px 0;

You might also need to adjust the text alignment and borders and padding, depending on your existing theme. Margins should be set to 0 on the left and right; suit them to your theme at the top and bottom, but generally they should be smaller than in the desktop version.

Image sizes
The images in your design might still break the layout or break out of their containing elements, making your website shrink when viewed on a mobile device. There is an easy fix for this:

body img {
max-width: 100%;

This will ensure that images are never wider than their containing element. You might need to tweak the CSS if images sized further up in the style sheet have greater specificity.

However, this solution isn’t ideal. The images might look smaller, but mobile devices will still have to download their full sizes, which will slow down response times and possibly lose visitors, as well as annoy users on expensive data plans (more of them are out there than you might think). There a number of solutions to this, some of which you will find in this roundup of articles on responsive images31. You may recall the mobile-first approach mentioned earlier; one benefit of this approach is that it serves different-sized image files to devices based on screen width.

Text size
So, our layout is working, and everything displays nicely. But now that the website is narrower, the text might appear huge. We’ll need to adjust the text’s size with the following code:

body {
font-size: 60%;
line-height: 1.4em;

This sets the font size as a percentage of the size set for it further up in the style sheet.

4. Changing the Navigation Menus and Creating an App-Like Interface Link

Sometimes mobile users will want to access specific content; for example, visitors to a store’s website will want to find the store’s location easily, and visitors to an e-commerce website will want to shop with a minimum of clicks (or taps). Sometimes you might want to adjust the navigation to make the website look more like an app.

Here are some methods you can follow to do this:

  • Use CSS to turn menu items that are visible on the desktop into drop-down menus, using code similar to what you would use to create a second-level drop-down menu on a desktop website.
  • Use conditional PHP or a plugin such as Mobble32 to display a different menu depending on the device, as seen on the website that I developed for Centenary Lounge33:
    The centenary lounge desktop site includes a large logo and full width slideshow, using shades of brown for text and the background.34
    Centenary Lounge desktop website
    The Centenary Lounge mobile site includes the same colours and design but replaces the slideshow with a smaller image, and the full width navigation menu with a shorter menu focusing on pages that visitors from mobiles are more likely to need.35
    Centenary Lounge mobile website
  • Use CSS to display menu items as a vertical list of buttons to give the website an app-like look, such as on Cafe Blend:
    The Cafe Blend desktop site has a vertical navigation menu to the left of the main content, all contained within a balck box.36
    Cafe Blend desktop website
    The Cafe Blend mobile site has a full-width navigation menu with each menu item in a horizontal box resembling a button, with the content below the menu.37
    Cafe Blend mobile website
  • Use a plugin such as Dropdown Menus38 to display menu items as a drop-down walker, freeing up screen real estate.
  • Use background images combined with media queries and floats, to create a grid of visual buttons for your navigation, giving the home page an app-like feel.
  • Use fixed positioning to fix the navigation to the bottom of the screen, minimizing the need for scrolling, as seen earlier on Social Media Examiner.

The possibilities are limited only by your imagination and creativity!

5. A Problem! Link

You’ve added the media queries above, but your smartphone still displays the desktop version. Don’t worry! This is because many smartphones use a virtual viewport that is equal to the width of a small desktop, which prevents desktop-designed websites from breaking when rendered in the browser. This can be easily fixed by placing the following code in the head of each page. Because yours is a WordPress website, you need to add it only once, to the header.php theme file:

<meta name="viewport" content="width=device-width">

What this does is tell the phone to treat the size of the screen as its actual size, not the virtual size… if that makes sense.

Summary Link

Here’s what we’ve looked at in this article:

  • Four different ways to make a WordPress website mobile-friendly: with a plugin, with a prebuilt responsive theme, with a separate mobile theme, and by making the existing theme responsive;
  • Media queries for responsive design and how they target different device widths;
  • Some common styles to make a WordPress website responsive in its layout, images and text.

As you can see, no one option is necessarily the best; it will depend on the website, on the budget and on the time and capability of those involved. Over time, most mobile-friendly WordPress websites will have responsiveness built into them, instead of using a separate theme, mobile website or plugin.

Hopefully this article has given you a starting point to make your WordPress website mobile-friendly. This is just the beginning of the possibilities. To further develop your mobile website, you might want to consider a mobile content strategy; a mobile-first design; APIs and native device functionality to create an even more app-like experience; and more.



Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38

↑ Back to top Tweet itShare on Facebook

Rachel is a freelance web designer and writer specialising in mobile and responsive WordPress development. She's the author of 'Mobile WordPress Development', a comprehensive guide to making yourWordPress site mobile-friendly, published by Packt, and also author of 'WordPress Pushing the Limits', published by Wiley.

  1. 1

    Josh Philip

    May 24, 2012 7:15 am

    Just want to share this free responsive theme as a great example of mobile optimized theme, it works absolutely great on mobile devices.

  2. 2

    There are a lot of great tools and resources on the web for making your WordPress site responsive.

    *shameless plug
    We recently spent some time building a WordPress theme that uses the Twitter Bootstrap toolit. Its called StrapPress and looks really good on all devices. Check it out

  3. 3

    Tyler Lesperance

    May 24, 2012 8:32 am

    I made it a project this week to make my blog responsive and mobile-friendly. This weekend I’m going to take some of these tips for my media queries to make something that works well. Great article.

    • 4

      Rachel McCollin

      May 28, 2012 5:43 am

      Hi Tyler,

      Thanks for the feedback. Good luck with that – I hope it goes well and that the article helps!


  4. 5

    Super useful article.

    I found this on another site and seemed to be the only fix for me for iphone4:

    /* iPhone 4 ———– */
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */

    Works great.

    • 6

      I’m missing the W3Cache plugin for WordPress in the list mentioned above. It has a nifty feature allowing you to detect mobile groups based on user-agents, whilst providing you the ability to change these lists to your heart’s content (e.g: I removed the iPad). Once detected as a ‘mobile’ user it allows you to pick a theme to display.

      I created a child theme based on the current (parent) theme, allowing me to selectively alter the WordPress files I needed to change, without messing with the other files. (e.g remove advertisement blocks, excessive javascript in the footer/header etc.) Of course there’s a separate style.css used in this child theme to promote the mobile usability. Basically any file you create in the child theme overwrites the parent theme’s file, the rest gets inherited :)

      So you get the benefit of mobile detection, mobile child theme and caching; which is an important aspect of (mobile) bandwidth control, all of this in one package.

  5. 7

    A great article. Very useful for today’s demands. Previously to understanding the role of media queries I was using JavaScript to serve up different style sheets conditionally using code something like:

    var screenwidth = screen.width;
    if (screenwidth < 1280) {
    document.write('<link rel="stylesheet" type="text/css" href="” media=”screen” />’);
    document.write(‘<link rel="stylesheet" type="text/css" href="/small-style.css” />’);
    else {
    document.write(‘<link rel="stylesheet" type="text/css" href="” media=”all” />’);

    Eliminating this and using the media query wasn’t working however on my Samsung Android phone, until I added:
    to the header. I noticed that for the example you gave still uses “smart quotes” instead of dumb quotes, so you might want to correct that in the article.

    • 8

      Rachel McCollin

      May 28, 2012 5:46 am

      Hi Gray,

      Thanks for your feedback. I”m not sure if that’s one for me or the copy editors but it’s a good spot so I’ll check it out!


  6. 9

    Garrett Miller

    May 24, 2012 7:33 pm

    I just got out of the military last year, and have decided to make a career change and delve into the world of web development and design. Smashing Mag and articles like this are a true blessing. Thanks for insight!

  7. 10

    Benjamin Christine

    May 25, 2012 12:17 am

    I would recommend Roots Theme! Very cool and easy to use. Its based on the Twitter Bootstrap and the HTML5 Boilerplate.

    check it out here:

  8. 11

    Gioacchino Poletto

    May 25, 2012 1:36 am

    Good article, please consider other sizes or devices.
    For this reason, media queries for me are the best solution, some examples:
    /* 959px and Below Screen Sizes */
    @media only screen and (max-width: 959px) { }

    /* From 959px down to the Ipad(768px) vertical Screen Size */
    @media only screen and (min-width: 768px) and (max-width:959px) { }

    /* Screensizes Below the Ipad (less than 768px) */
    @media only screen and (max-width: 767px) { }

    /* Screensizes Below the Ipad(768px) down to the Iphone Landscape(480px) */
    @media only screen and (min-width: 480px) and (max-width:767px) { }

    /* Screensizes Below the Iphone Landscape(480px) */
    @media only screen and (min-width: 320px) and (max-width:478px) { }

    @media only screen and (max-width:319px) { }

  9. 12

    Can this work for static sites too?

    • 13

      Adrian Robertson

      May 27, 2012 4:36 pm

      Yes Claire, the media queries mentioned in this article will also work for static sites

      It’s only the plugins mentioned and mobile optimized theme examples that make this article WP-centric

    • 14

      Rachel McCollin

      May 28, 2012 5:47 am

      Hi Claire,

      Yes, the media queries aren’t WordPress-specific at all and can work for a static site with a similar layout. It’s basically a case of taking floated blocks of content and placing them below each other on the page so as not to squeeze too many things in side by side. This is just CSS so would work on any kind of site.

      Hope that helps.


  10. 15

    Really nice article!

  11. 16

    Lucas Stark

    May 28, 2012 6:08 pm

    If you mention Jigoshop for ecommerce you should also include information about WooCommerce and their great responsive mobile ecommerce themes

  12. 17

    Eric Nguyen

    May 28, 2012 11:42 pm

    Responsive design, as hip as it may sound, has to die!

    People should either leave websites as they are (please don’t overly underestimate mobile rendering of websites nowadays!) and start building proper mobile theme/ interface (WordPress or non-WordPress) or mobile app. I’m one-man force in a media company and I can assure you it’s not that’s hard to go mobile the proper way :)

  13. 18

    Even Thesis theme got Responsive…that says it all. Its time to get responsive. Check if you want to see an example of Thesis responsive theme.

  14. 19

    making the existing theme responsive is a good way….

  15. 20

    Deepanshu Sharma

    May 31, 2012 7:53 am

    Thanks! just gave my theme some fluid layout. (although it had fluidity before).
    Great help!

  16. 21

    Hi there

    I love this article. Is it possible if you could point us to a list of WordPress theme that have RWD? Both paid and free theme?

    The more the merrier! Thanks in advance.


  17. 22

    Clay Graham

    June 13, 2012 9:00 pm

    Welocally Places Mobile is a mobile theme/plugin that actually uses location to display which posts show up first. Its like a foursquare for your wordpress site. It uses HTML5 and jQuery mobile to make it easy for users to get a summary of the post and then easily find the place with driving directions and hooks for calling the location. It looks just like an iPhone app, it even has flips and swipe transitions like an iPhone app. It includes 15 different color variations for the UI.

    Full Disclosure. We created this plugin and hope you will try it out. Dont want to be spammy, really just trying to help. If this offends we apologize. net 10 down votes and we will remove this post.


  18. 23

    Really nice article! :)

  19. 24

    I am using the Mobile Website Builder for WordPress by DudaMobile. It’s very easy to use and really effective. It made my site mobile friendly in just 3 steps. All I had to do was just download & install the plugin and press the “Create your mobile site now” button. It took me to the dudamobile website, where I can customize the Mobile site according to my need. And it’s a very easy WYSIWYG editor. Then I published my site and Bingo !!! I had a mobile site just like that. Guys you can check out the plugin yourself here :

  20. 25

    Thx for the nice article, i learned allot.
    Keep up the good work.

  21. 26

    Phil Wollerman

    December 2, 2012 3:02 pm


    I really love Smashing Mag, and really love your article. I have just completed the second of three responsive sites for clients, and used twenty eleven for all of them. Works great, I’m a little concerned about the speed as it crunches the logos, but they are not graphics intensive so am not too concerned about that.

    I have a big problem I’m not able to resolve: I added the Fast Secure Contact Form plugin, which is pretty comprehensive and well secured, and worked fine until I tried to find a way to make the phone numbers on the pages “clickable” (i.e. tap to call, like the native apps do. I found a really good plugin called Call Now Button, which puts a green button with a phone symbol in the bottom left of your site’s page, and calls through when touched. Perfect, but on the pages with the contact form(s) it pushed the layout to the left.

    I notice it uses a table to implement, as well as form functions, so there’s some sort of clash going on, but it’s getting beyond my ability.

    You seem to know a fair it about responsive themes in WP, I hope you may be able to shed some light on this for me?

  22. 27

    Ana DeShields

    January 26, 2013 9:35 pm

    As I have been researching this topic for an hour or so, your post along with a few others,, are the ones that seemed to stand out.

    Your code you provided to compliment the specific content and detail made it unique. Rather than being vague or repetitive (as many other sites) you added other important concerns a developer has.
    Thanks much!
    Ana DeShields

  23. 28

    Rachel, shame on you! You have forgotten to mention the best one for 2013 J
    I have develop it because all the other one I have tried had lacks here and there…
    I hope you will complete your nice article by including mine.

  24. 29

    Noah Davidson

    April 12, 2013 12:28 am

    First thing I did when I made my website was to make sure it fits in any gadget, I mean it would adjust to any screen which I learned from this clip on youtube ( and I didn;t know it could be optimized until I read this article. This is such a big help! Thank you so much!

  25. 30

    Premium plugin

    June 9, 2013 12:51 am

    Wonderful points altogether, you just received a emblem new reader. What may you suggest about your submit that you just made a few days in the past? Any sure?

  26. 31

    Nice and well explained. I like when it’s clear … bisou

  27. 32

    Thanks a lot !! the (@media) really gave me NICE information !!



↑ Back to top