By
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: 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 {
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.
