Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

How to make a WordPress theme adapt to smaller screens

Do you hate it when you find a WordPress theme you love, 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 decent 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 websites are more important than ever, and obviously this is something you don’t want to miss out on.

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

In this tutorial we use media queries to make the Twenty Ten theme responsive. That is to say, if the visitor is viewing via a small 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 separate. Let’s get started!

1. Make a child theme

First of all we need to create our child theme. As implied, child themes rely on parent themes which means that everything 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. We need header.php too

Before we can do any fun stuff with media queries in style.css we first need to add a tiny bit of code to header.php. Touching Twenty Ten itself is a big no-no, so copy 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 tutorial 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 modern displays will be able to handle. We’ll have a media query for 320px width and up, and then we’ll add some additional 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 decided, 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 within 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 */
009 }
011 /* Up to 480 px */
012 @media only screen and (max-width: 480px) {
014     /* Up to 480 pixels */
016 }
018 /* From 481 px and upwards */
019 @media only screen and (min-width: 481px) {
021     /* For screens 481 pixels and wider */
023 }
025 /* From 640 px */
026 @media only screen and (min-width: 640px) {
028     /* Special styling from 640 pixels and     up */
030 }
032 /* 980 px and up */
033 @media only screen and (min-width: 980px) {
035     /* Where we set everything straight again */
037 }

6. Decide what to hide

The key to getting the versions for smaller screens to both look good and work well is to make sure you hide unnecessary elements, and find new places for essential 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. Sometimes you’ll be better off with other priorities, but deciding which elements are crucial is key so make sure you think things through before touching any code.

7. Mobile first

There is a reason there is so much talk about ‘mobile first’. The first media query – 320 pixels and up – will basically strip away 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 rid of some stuff from Twenty Ten that isn’t suitable 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; }
046 }

8. Make it pretty for small screens

While this simple piece of code (which basically just overwrites the original 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 add some spacing in the next media query. The reason 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; }
007 }

9. Make it pretty for slightly larger screens

Screens that are larger than 480px but smaller than 640px might benefit from a little more spacing, so let’s increase the padding we just set for the up-to-480px screens in the previous 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; }
007 }

10. Reposition the sidebar

You might wonder 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 appropriately, so the width will be listed 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; }
017 }

11. Back to normal

Right now, the desktop version of the site looks pretty bad, much like the screenshots shown across the page. This is normal – we have overwritten a lot of styles after all! In our final media query – the one for 980px and up – we’ll set things straight again, basically 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; }
038 }

12. What we’ve got so far…

At this stage we actually have a pretty decent mobile version of the site, along with a middleground for mid-sized, and the standard 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 quick look at a single post tells us that the comments need styling; at the moment, they hit the outer margins of the window. Luckily this is easy enough to take care of, since the comments section sits in div#comments. Remember the padding code introduced 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; }
007 }

14. Getting the navigation links right

It’s not just the comments code that needs to be positioned, as other elements will show up when you’re making an existing theme responsive as well. In Twenty Ten, one such element is the navigational links, linking to the previous 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 {

The Internet Explorer solution for your HTML5 needs

Twenty Ten isn’t coded in HTML5 so you won’t find this problem here, but more and more WordPress themes are. The thing is, Internet Explorer just doesn’t play nicely with HTML5 and CSS3 all the time. You’ll be fine from version 9 and up, but prior to that you’ll have problems. There are numerous boilerplates that solve this in a more or less elegant 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 include 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 works perfectly well with WordPress themes as well, although you should consider using wp_enqueue_script() and possibly wp_register_script() to queue the HTML5 shim script with your theme.