Having a responsive website is incredibly important. This tutorial is especially important if you are still running a static theme that you want to make responsive.
Doing so can often be easier than taking an already responsive theme and customizing it to fit your design. However, even if you are merely interested in learning how to implement responsive design in practical terms, this is the article for you.
How To Convert Your WordPress Theme To Responsive Design
First, we need to go over the basics of responsive design:
- Fluid site grid with proportionate instead of fixed measures
- Flexible images
- Implementing design changes to ensure usability for non-desktop devices
- Using CSS media queries to define break points for design changes
From here, we will learn how to use the above to turn a static WordPress theme into a responsive one.
Be aware, however, that while the principles stay the same, your theme might be built differently than the examples below.
Therefore, consider this only as the broad strokes. You might have to do some custom work for your own site.
Tools You Will Need
The tools we need to implement this are readily available.
First off, we need a way to check our site’s HTML and CSS structure. My favorite tool to do so is Firebug, however, you can also use Chrome Developer Tools, and Firefox Developer Tools.
(Btw, have you checked out our collection of development tools yet?)
In addition to that, we will have to edit some PHP and HTML files. A simple text editor like Notepad++ will work for this but you can find other options in this article.
You might also want to consider setting up your site in a local development environment so you can experiment with making it responsive without messing with your live site.
We have a detailed tutorial for this, right here on Torque.
Ready? Then let’s go.
1. Define Default Zoom
Our very first step is to add the following line of code to the header of our site:
1 | <meta name=“viewport” content=“width=device-width, initial-scale=1” /> |
What it does is tell browsers to render your pages based on device width, meaning if the screen used is only 320px wide, the website will be rendered in the same size instead of falling back to a larger default size.
In WordPress, adding things to the site header this is typically done by editing the header.php file in your theme folder. The code goes between the <head> and </head> tags.
All done? Then let’s move on.
2. Set Fluid Element Widths And Heights
Next up, you need to find the containers for the main sections of your site.
For this, the aforementioned Firebug comes in handy as it can display the HTML structure of your website inside the browser.
A typical WordPress theme will have the following elements:
- Body
- Wrapper
- Header
- Menu
- Main content
- Sidebar
- Footer
Our task is now to make sure these have fluid width definitions instead of static ones. We do so by changing the CSS inside the stylesheet.
For an example, let’s start off with the wrapper and say this is what you find inside your stylesheet:
1 2 3 4 5 | #wrapper { width: 900px } |
As you can see, this is a fixed width (900 pixels) which we now want to turn into something fluid. It’s actually pretty easy:
1 2 3 4 5 6 7 | #wrapper { max–width: 900px; width: 100% } |
What does this change do? Basically, it tells the element to take all the space it needs but limits its width to a maximum of 900 pixels.
That way, the page will look the same as before on any screen larger than 900px but take up the entire width of any device smaller than that.
Easy, right?
However, that’s basically all it takes to make a WordPress theme responsive.
Now all you need to do is go through your entire page structure and turn any fixed widths into fluid widths by changing pixels to percentages. That way, the page elements will automatically adapt to the size of the screen they are being displayed on.
However, the devil is in the details, so here are some important pointers:
- Any element that is nested inside another and can go across the entire screen (or as much space as it has available) can simply be set to 100% width (or even auto or no width). If the parent element (like a wrapper) has a set max-width, the child element will automatically adhere to its dimensions.
- For other elements that need to be limited in how far they expand (such as the main content and a sidebar placed next to one another,) you need to experiment a little to find the right percentage so that the layout stays the same.
- Be aware that percentages in CSS are relative. That means when you set the width of a nested element (an element inside another element) to 70 percent, it will take up 70 percent of the parent element, not of the entire screen. Capisce?
Firebug is your friend here, as it allows you to make live edits and try out CSS changes while seeing the effects on screen.
Still, I can say from experience that it can take a while until you have found all fixed measurements.
Therefore, in addition to Firebug, it might also be a good idea to run a text search inside your stylesheet to find any declarations of widths and while you are at it, height.
The latter is because when the screen size is compressed, any text inside HTML elements will expand vertically.
To make sure it doesn’t break out of its containing element or is cut off, you need to make sure you also don’t have fixed heights. Either don’t declare any height at all or, if necessary, turn it to percentages as well.
Also, a quick note on margins and paddings, which are the space around and inside HTML elements. They make sure there is enough distance between page elements and around content so that everything is understandable and legible.
While it can make sense to put these in relative numbers, many themes out there (for example the Genesis framework) declare them in pixels.
Since these guys know what they are doing, I’m going with their method. However, the choice is up to you.
In the end, you should have a web page that adapts to the size of your browser window when you shrink and expand.
At this point, many page elements will likely look smushed together, which is far from what you want, however, don’t worry, we are getting to that further below.
3. Resize Images
After this, it’s time to make sure our images are automatically scaled according to screen size.
This can be done quite easily by adding the following to style.css:
1 2 3 4 | img { height: auto; max–width: 100%; } |
With this, you declare that images should be displayed in their original size until their container element (or the screen) put a limit on it.
Simple but effective!
Of course, you also need to have a look around the stylesheet to see if any other declarations are overwriting this. A search for img helps with that.
In case you need to rebuild images in new sizes to fit your newly responsive design, the WordPress directory has just the right plugin to do so.
4. Implement (The Right) Break Points
After introducing basic responsiveness (or is that responsibility?), we now move on to thebreak points for your design changes.
These are cutoff points where the website will make some major design adjustments to continue delivering the best layout for your users.
Two things about this:
- Break points should always be design specific, not device specific. There are just too many devices out there to cater to all of them. By concentrating on what makes the most sense for your design, you automatically cover any devices coming out in the future.
- Start with the smallest screen and then work your way up. The easiest way to identify break points is to first make sure your design looks good on mobile phones and then expand the screen from there. When you notice a point at which your design starts to look terrible, that is your break point.
The first time you shrink your browser window to the size of a phone screen, it probably won’t be a pretty site.
One of the classic problems at this point is that elements that are placed side by side are still displayed in their respective widths, yet in a much smaller space, making everything impossible to read.
Therefore, the first order of the day is to make these elements move underneath one another.
A classic example of this is to move the sidebar underneath the content by changing CSS properties with a media query.
This could look like so:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @media only screen and (max–width: 500px) { .content { float: none; display: block; width: 100%; } .sidebar { float: none; display: block; width: 100%; } } |
Add the query at the end of your stylesheet. The code above also makes sure your content expands across the entire screen and is legible.
After that, it’s time to look at the rest of the page and make any CSS changes necessary so that it looks decent in its current format.
Commit all changes to your newly created media query and save the stylesheet. Well done!
Now you can slowly expand the browser window outward to determine when the layout starts looking unattractive and you need to make adjustments.
At this point, set up a new media query and adjust the design accordingly.
To figure out how large your browser window actually is, I can recommend Chrome Developer Tools or this Firefox plugin.
Copy the code above, adjust the max-width declaration of the media query and then input whatever CSS changes you need to implement.
Be sure to add new media queries at the bottom of the stylesheet but above the existing one.
Since CSS styles further below overwrite styles above them, it’s important that media queries move from larger to smaller screen sizes.
Ideally, you should end up with about 3-5 major break points and a page that shows a legible and attractive layout at every window size where all site elements stay intact throughout.
It will take a bit of trial and error but you will get it done, I’m sure.
4. Create A Mobile Menu
Creating a responsive menu can be one of the trickiest parts, especially if you want it to be collapsible.
However, you will be happy to hear that in that case you have a number of tutorials and WordPress plugins at your disposal to help you out:
- How to Create an Awesome Responsive Menu for Your WordPress Theme
- WP Responsive Menu
- Responsive Menu
- Responsive Select Menu
However, one of the easiest ways to create a menu that is also usable on mobile devices is to set its dimensions from fixed to fluid. That way, when space gets sparse, the menu will just fold in on itself.
You might have to add some extra spacing (via media query) to accommodate people using their fingers to access it but that’s it.
In case you want something more sophisticated, you can use the resources mentioned above.
5. Adapting Fonts
Next, we turn our attention to the content, in particular, the text on your site as there is a good chance that at some point you will have to fiddle with its size.
Header text especially often doesn’t fit properly on smaller screens. Pay attention to this when you look at your website on different devices and in different browser windows.
Thankfully, font size can also be controlled easily via CSS inside media queries, like this:
1 2 3 4 5 6 7 | @media only screen and (max–width: 450px) { .site–title, h1 { font–size: 22px; } } |
In addition to that, you might want to change overall font size depending on the size of the screen it is being viewed on.
Varvy has an excellent guide on how to keep text legible in different dimensions that I wholeheartedly recommend.
6. Other Changes
As mentioned in the first article, responsive design is not just about making things fit on a screen, it’s also about keeping the site usable.
Therefore, as a last step, it’s a good idea to check your site in terms of usability on different devices.
For example, sometimes it can make sense to hide elements on smaller screens if they are hard to use without a mouse or obscure part of the page.
It’s one of the reasons for the existence of collapsible menus. There just isn’t as much real estate available on phone screens. I have also removed sliders from the mobile site version because they became almost impossible to use.
So, have a pass over your site with these thoughts in mind. If you were a visitor, what would make your life easier? With media queries, you can change basically everything you want.
Plus, while you are at it, you might want to run your newly responsive site through some cross-browser testing tools to make sure everything comes out well in different scenarios.
7. Finish Up And Celebrate
If you have come this far, congrats! Your site should now be fully responsive and adapt to any screen size.
Not so hard now, was it? I knew you could do it and I’m sure your visitors and Google will be happy to see the new design!
Summing Up…
Responsive design is all but mandatory for websites these days and thankfully WordPress offers loads of themes that are mobile compatible by default.
Should your theme not be one of them, never fear. With our primer on responsive designand the above tips you should now be able to remedy this situation.
While this article can only teach you the principles and not go over every case that might pop up, it is enough to get you started and allow you to figure out the details by yourself.
Don’t worry, you will get the hang of it in no time!
What’s your experience with creating responsive WordPress themes? Any additional tips or points to add? Let us know in the comments section below!
https://accesspressthemes.com/blog/how-to-make-your-wordpress-theme-responsive/