How to get a WordPress theme to look good on small screens

Do you detest it when you come across a WordPress theme you appreciate, but realise it looks awful on a smartphone or tablet? Here’s how to fix it…

Mobile devices are eating away at the visitor logs for websites all over the internet. Sure, most sites will look good enough on your smartphone, but it’s a nuisance to have to pinch and zoom to actually read something, right? This means mobile iterations of internet sites are more important than ever, and obviously this is clearlysomething you don’t want to miss out on. So when we do web design, moblie adaptation is a necessity these days

There are many ways to make your website mobile available. If we look at WordPress, you’ll see there are various plug-ins serving mobile-friendly versions of your site. Not everyone wishes to use a plug-in though.

In this article we use media queries to make the Twenty Ten theme responsive. That is to say, if the customer is seeing via a little screen we’ll make the theme adapt. Since we don’t want to ruin the Twenty Ten template itself with our edits, we’ll create a child theme to keep additions independent. Let’s get started!
1. Make a child theme

First of all we need to develop our child theme. As implied, child themes rely on parent themes which means that Anything that doesn’t appear in the child will be loaded from the parent. A child theme sits in its own folder in wp-content/themes/ and is activated just like any other theme. First, create a folder called ‘twentyten-responsive’ and, within a file called ‘style.css’, insert the following code:

 001 /*  
 002 Theme Name: Twenty Ten Responsive
 003 Theme URI:    ten-responsive/
 004 Description: A child theme that makes     Twenty Ten responsive.
 005 Author: Thord Daniel Hedengren
 006 Author URI:
 007 Template: twentyten
 008 */
 010 @import url(‘../twentyten/style.css’);

2. Activate the child theme

Use a development install of WordPress that has the Twenty Ten theme, which is shipped with WordPress by default but can also be downloaded. Upload the twentyten-responsive folder to wp-content/themes/ and activate the Twenty Ten Responsive theme from within WordPress. You’ll notice that the site looks just like Twenty Ten, since at this point we haven’t done anything but import Twenty Ten’s stylesheet.

3. Now it’s time to develop the  header.php too

Just before we can do any fun stuff with media queries in style.css we first need to add a little bit of code to header.php. Touching Twenty Ten itself is a big no-no, so duplicate the header.php file from the wp-content/themes/twentyten/ folder and place it in the twentyten-responsive folder. In the meta section of our own header.php, around line 14, add the following line which will let us play with the viewport:

001 <meta name=”viewport” content=”initial-scale = 1,user-scalable=no,maximum-scale=1.0″/>

4. Decide on the media queries

In this guide we’re not going for a fully fluid version of Twenty Ten but rather adapting the layout for various set widths. The default site width is 980px, which most current displays will be able to handle. We’ll have a media query for 320px width and up, and then we’ll add some added rules for 480px and up. The next step is 640px, and then we’ll go over the 980px width rules as well (ie the default width).

5. Set up the media queries

With our plan determined, let’s start to write the media queries. This is done in the child theme we set up in step 1 since all edits should be kept free from the parent theme. Open style.css from the twentyten-responsive folder and add the following queries. Do read the commenting inside of the code for a quick insight as to what each media query is meant to do.

001 /* ===============
004 /* 320 px and up */
005 @media only screen and (min-width: 320px)
007     /* This goes for everything 320 pixels     and up */
011 /* Up to 480 px */
012 @media only screen and (max-width: 480px)
014     /* Up to 480 pixels */
018 /* From 481 px and upwards */
019 @media only screen and (min-width: 481px)
021     /* For screens 481 pixels and wider */
025 /* From 640 px */
026 @media only screen and (min-width: 640px)
028     /* Special styling from 640 pixels and     up */
032 /* 980 px and up */
033 @media only screen and (min-width: 980px)
035     /* Where we set everything straight again */

6. choose what to cover.

The key to getting the variations for more compact screens to both look excellent and work properly is to make sure you cover unnecessary elements, and find new locations for vital ones. In this example we’ll hide the header on top up until the desktop version, and we’ll float the right-hand column to the bottom of the page. At times you’ll be better off with other priorities, but deciding which elements are critical is key so make sure you think things through before touching any code.

7. Mobile first

There is a reason there is so much discuss about ‘mobile first’. The first media query – 320 pixels and up – will fundamentally strip away Almost everything we don’t want or need from Twenty Ten’s layout, and reposition other things. These rules will apply at min-width: 320px, which is the standard for smartphones, so we’ll have to make some more tweaks to our edits later. For now, let’s get free of some stuff from Twenty Ten that isn’t appropriate for small screens. You’ll find these referenced styles in Twenty Ten’s style.css, which we must import to the top of our child theme’s style.css file.

001 /* 320 px and up */
002 @media only screen and (min-width: 320px)
004     #wrapper
005         margin: 0;
006         padding: 0;
008     #site-title
009         width: 100%;
010         margin-bottom: 0;
011         text-align: center;
013     #site-description
014         width: 100%;
015         float: left;
016         margin-top: 10px;
017         text-align: center;
018     #access, #access .menu-header,, #colophon, #branding, #main, #wrapper
019 @media only screen and (min-width: 481px)
020         width: 100%;
022     #branding img
023         display: none;
025     div#content
026         width: 100%;
027         margin: 0;
029     div#primary
030         width: 100%;
031         margin-top: 20px;
032         padding-top: 20px;
033         border-top: 3px double #000;
035     #main .widget-area ul
036         padding-right: 0;
038     #footer
039         margin-bottom: 0;
041     #site-info, #site-generator
042         width: 100%;
043         float: left;
044         text-align: center;

8. Make it pretty for small screens

While this straightforward piece of code (which generally just overwrites the primary styles from the Twenty Ten theme) will make the site infinitely more readable when viewed on mobile devices, it is in need of a good deal of beautifying by us. Let’s include some spacing in the next media query. The motive we’re doing it here and not on top is that we’ll have different amounts of space later, so it’s not as global as the above changes.

001 /* Up to 480 px */
002 @media only screen and (max-width: 480px)
004     .post,, li.widget-container
005         padding: 0 10px;

9. Make it pretty for somewhat larger screens

Screens that are greater than 480px but more compact than 640px might benefit from a little more spacing, so let’s raise the padding we just set for the up-to-480px screens in the prior step, from 10px to 15px.

001 /* From 481 px and upwards */
002 @media only screen and (min-width: 481px)
004     .post,, li.widget-container,     #comments
005         padding: 0 15px;

10. Reposition the sidebar

You may possibly ponder why we have a media query from 640px and up? The reason is that from this size it works with the sidebar positioned on the right-hand side. Our problem is, we need it to scale properly, so the width will be detailed in the form of a percentage.

001 /* From 640 px */
002 @media only screen and (min-width: 640px)
004     #container
005         width: 62.5%;
006         margin: 0;
008     .post,, li.widget-container
009         padding: 0 20px;
011     div#primary
012         width: 32.5%;
013         margin-top: 0;
014         padding-top: 0;
015         border: 0;

11. Back to normal

Right now, the desktop model of the site looks pretty bad, a lot like the screenshots shown throughout the page. This is typical – we have overwritten a lot of styles after all! In our last media query – the one for 980px and up – we’ll set things straight again, essentially reverting to the standard Twenty Ten.

001 /* 980 px and up */
002 @media only screen and (min-width: 980px)     
004     #access .menu-header,,     #colophon, #branding, #main, #wrapper
005         width: 940px;
007     #wrapper
008         margin: 20px auto;
009         padding: 0 20px;
011     #site-title
012         width: 700px;
013         margin-bottom: 18px;
014         float: left;
015         text-align: left;
017     #site-description
018         width: 220px;
019         float: right;
020         text-align: right;
022     #branding img
023         display: block;
025     #footer
026         margin-bottom: 20px;
028     #site-info
029         width: 700px;
030         float: left;
031         text-align: left;
033     #site-generator
034         width: 220px;
035         float: right;
036         text-align: right;

12. What we’ve obtained so far…

At this stage we actually have a pretty respectable mobile version of the site, along with a middleground for mid-sized, and the typical setup for desktop. You would think we could stop here, and if you only used text that would be the case, but alas, images and other things need to behave as well. We haven’t looked at single posts and pages either, so there’s still work to do.

13. Single posts and pages

A fast look at a single post tells us that the comments need styling; at the moment, they hit the outer margins of the window. Fortunately this is uncomplicated enough to take care of, since the comments section sits in div#comments. Remember the padding code launched in step 7, and added to in steps 8 and 9? Find that, and add #comments to it and you’ll be fine. The code from step 7 would look like this:

001 /* Up to 480 px */
002 @media only screen and (max-width: 480px)
004     .post,, li.widget-container,     #comments
005         padding: 0 10px;

14. Getting the navigation links right

It’s not just the comments code that needs to be positioned, as other elements will appear up when you’re creating an current theme responsive as well. In Twenty Ten, one such element is the navigational links, linking to the prior page in archives as well as to the previous post on single posts. We only need to worry about these when #wrapper is set to no padding, so just add the .navigation class to the same media queries as you did in step 13, like this:

001 /* Up to 480 px */
002 @media only screen and (max-width: 480px)
004     .post,, li.widget-container,     #comments, .navigation

15. The Internet Explorer answer for your HTML5 needs

Twenty Ten isn’t coded in HTML5 so you won’t come across this problem here, but more and more WordPress themes are. The thing is, Internet Explorer just does not play well with HTML5 and CSS3 all the time. You’ll be fine from version 9 and up, but Prior to that you’ll have difficulties. There are numerous boilerplates that resolve this in a more or less classy fashion, but the best solution is perhaps Remy Sharp’s excellent JavaScript HTML5 shim, which is hosted for free at Google Code. It will make the HTML5 tags behave as expected in IE6-8. You can incorporate it in any project, using the IE conditional tag:

001 <!–if lt IE 9>
002 <script src=”http://    trunk/html5.js”></script>
003 <!endif–>

It operates completely well with WordPress themes as well, Despite the fact that you should look at using wp_enqueue_script() and possibly wp_register_script() to queue the HTML5 shim script with your theme.

You might also like More from author

Leave A Reply