Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Thord Daniel Hedengren
11th April 2012

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!

How to make a WordPress theme adapt to smaller screens

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: http://tdh.me/wordpress/twenty-    ten-responsive/
 004 Description: A child theme that makes     Twenty Ten responsive.
 005 Author: Thord Daniel Hedengren
 006 Author URI: http://tdh.me/
 007 Template: twentyten
 008 */
 009 
 010 @import url('../twentyten/style.css');
 011 

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"/>
002 

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 /* ===============
002    MEDIA QUERIES */
003 
004 /* 320 px and up */
005 @media only screen and (min-width: 320px) {
006 
007     /* This goes for everything 320 pixels     and up */
008 
009 }
010 
011 /* Up to 480 px */
012 @media only screen and (max-width: 480px) {
013 
014     /* Up to 480 pixels */
015 
016 }
017 
018 /* From 481 px and upwards */
019 @media only screen and (min-width: 481px) {
020 
021     /* For screens 481 pixels and wider */
022 
023 }
024 
025 /* From 640 px */
026 @media only screen and (min-width: 640px) {
027 
028     /* Special styling from 640 pixels and     up */
029 
030 }
031 
032 /* 980 px and up */
033 @media only screen and (min-width: 980px) {
034 
035     /* Where we set everything straight again */
036 
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) {
003 
004 	#wrapper {
005 		margin: 0;
006 		padding: 0; }
007 
008 	#site-title {
009 		width: 100%;
010 		margin-bottom: 0;
011 		text-align: center; }
012 
013 	#site-description {
014 		width: 100%; 
015 		float: left;
016 		margin-top: 10px;
017 		text-align: center; }
018 	#access, #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
019 @media only screen and (min-width: 481px) {
020 		width: 100%; }
021 
022 	#branding img {
023 		display: none; }
024 
025 	div#content {
026 		width: 100%;
027 		margin: 0; }
028 
029 	div#primary {
030 		width: 100%;
031 		margin-top: 20px;
032 		padding-top: 20px;
033 		border-top: 3px double #000; }
034 
035 	#main .widget-area ul {
036 		padding-right: 0; }
037 
038 	#footer {
039 		margin-bottom: 0; }
040 
041 	#site-info, #site-generator {
042 		width: 100%;
043 		float: left;
044 		text-align: center; }
045 
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) {
003 
004 	.post, div.page, li.widget-container {
005 		padding: 0 10px; }
006 
007 }
008

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) {
003 
004 	.post, div.page, li.widget-container, 	#comments {
005 		padding: 0 15px; }
006 
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) {
003 
004 	#container {
005 		width: 62.5%;
006 		margin: 0; }
007 
008 	.post, div.page, li.widget-container {
009 		padding: 0 20px; }
010 
011 	div#primary {
012 		width: 32.5%;
013 		margin-top: 0;
014 		padding-top: 0;
015 		border: 0; }
016 
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) 	{
003 
004 	#access .menu-header, div.menu, 	#colophon, #branding, #main, #wrapper {
005 		width: 940px; }
006 
007 	#wrapper {
008 		margin: 20px auto;
009 		padding: 0 20px; }
010 
011 	#site-title {
012 		width: 700px;
013 		margin-bottom: 18px;
014 		float: left;
015 		text-align: left; }
016 
017 	#site-description {
018 		width: 220px; 
019 		float: right;
020 		text-align: right; }
021 
022 	#branding img {
023 		display: block; }
024 
025 	#footer {
026 		margin-bottom: 20px; }
027 
028 	#site-info {
029 		width: 700px;
030 		float: left;
031 		text-align: left; }
032 
033 	#site-generator {
034 		width: 220px;
035 		float: right;
036 		text-align: right; }
037 
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) {
003 
004 	.post, div.page, li.widget-container, 	#comments {
005 		padding: 0 10px; }
006 
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) {
003 
004 	.post, div.page, li.widget-container, 	#comments, .navigation {

How to make a WordPress theme adapt to smaller screens

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://        html5shim.googlecode.com/svn/    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.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.amulyasoft.com/ David Richard

      Informative and interesting article. Thanks for sharing

    • Magazine Subscriber

      Surely this should be premium content for subscribers. Really beginning to feel that I got a bum deal with my subscription to this magazine as the only useful articles seem to be appearing online for free.

    • Pingback: How to make a WordPress theme adapt to smaller screens | Tutorials | Web Designer » Web Design

    • http://auccool.com Web and Mobile Design and Development

      There some cool frameworks out there that use grid systems to adept on different screens. One of those is Skeleton that has a WordPress adapted base.

    • http://settingtheagenda.co.uk martin451

      Hi there

      Great article, but there’s an error in “Step 7: Mobile First” above (also in the printed magazine version, p.56) at line 19. An additional @media query has been inserted by mistake.
      Delete that line and the site should fit the screen correctly on iPhones and iPads.
      Sorted.

      martin451

    • http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url=http%3A%2F%2Fwww.loesje.ru%2Findex.php%2Findex.php%3Ftitle%3DWhy-Need-to-You-Find-Help-From-An-Immigration-Legislation-Lawyer%3 Immigration Solicitor in folkstone

      Hi there I am so glad I found your weblog, I really found you by error, while I was looking on
      Aol for something else, Anyways I am here now and would just like to say cheers for a fantastic post
      and a all round entertaining blog (I also love the theme/design),
      I don’t have time to read it all at the moment but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read more, Please do keep up the superb job.

    • http://RealityTvScandals.com/ Amia Sàys

      Do you make the folders (my case I have iPage) in your host folders or WP Panel?