Here is the scenario: You’ve searched high and low and found the perfect WordPress theme for yourself or your client. But, there’s one big problem: it’s not mobile-friendly. With mobile web traffic soon expected to exceed desktop web traffic, being mobile-friendly is critical.
I often have to go through the exercise of converting a non mobile-friendly WordPress theme to be mobile-friendly, or “responsive” (the term used to describe a site that uses the size of the browser to reconfigure itself for optimum viewing). In this article, I’ll guide you through the process I use.
Note, I am assuming you are familiar with HTML and CSS here. I’ll give you some broad strokes, along with some detailed code, but of course much of the work will depend on the inner workings of your theme. Hopefully, you can use some of the principles I talk about for your project.
Let’s look at one of the most common layouts for a WordPress theme, namely, one with a header, menu bar, main content section, sidebar, and footer. Here is a graphic depiction of this structure:
Making the Header Fluid
The first thing to do is make all of the elements “fluid” or variable-width. Ironically, in the early days of web development, everyone made containers fluid. When we discovered that this made things hard to control, we went to fixed size containers. And now we’re back to making everything fluid again!
Anyway, you need to find the main containers (divs) for the major sections of your site, as indicated in my diagram above. An easy way to do this is to use the Firebug Firefox plugin or Google Chrome. If you install it, you can hit F12 or CTRL-SHIFT-I (or ALT-CMD-I on a Mac) and it will tell you the name of all of the containers surrounding any element you click on. It’s super-useful for this type of work.
For example, your header might be contained in a div like this:
|
1
2
3
|
<div id=”header”>
(bunch of HTML here)
</div>
|
Next, look at the CSS for that div. It might look something like this:
|
1
2
3
4
|
#header {
width: 900px;
(more properties here)
}
|
To make this element fluid, remove the fixed with and change it to look like this:
|
1
2
3
4
5
|
#header {
max–width: 900px;
width: 100%
(more properties here)
}
|
Your header should now be fluid. The magic is accomplished by defining the width using a percentage instead of fixed pixels. The “max-width” property prevents it from getting too big. If you want, you can add a “min-width” if you want to prevent the window from getting too small. I generally use a value of 300px for my min width.
Re-size the browser to see if it worked! If not, there might be elements inside the header that are keeping it from shrinking. Search for any fixed-width CSS definitions. You’ll have to change them to be variable using percentage-based widths. I’ll describe how to do that by showing you how to resize the main content block and sidebar. Other problems in the header, like the text being too big, will be fixed later with media queries.
As elements wrap, the containers will need to get taller. Remove any heights that are set in pixels so they can expand as needed.
If your header still isn’t fluid, it might be inside a container that has fixed width. Use the tools to search for those, and make them fluid.
Content Block and Sidebar
Let’s assume your main content and sidebar containers look like this:
|
1
2
3
4
5
6
7
8
9
10
11
|
<div id=”wrapper”>
<div id=”content”>
(bunch of HTML here)
</div>
<div id=”sidebar”>
(bunch of HTML here)
</div>
</div>
|
Let’s say the corresponding CSS looks like this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#wrapper {
width: 900px;
(more properties here)
}
#content {
width: 600px;
(more properties here)
}
#sidebar {
width: 300px;
(more properties here)
}
|
Now, the numbers might not exactly add up to 900 due to padding and so forth, but for simplicity, let’s say they do.
As we re-size the browser, we want to maintain the ratio of the container and sidebar widths. Here’s how we accomplish that:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#wrapper {
max–width: 900px;
width: 100%;
(more properties here)
}
#content {
max–width: 600px;
width: 66.7%; /* 600/900 = 66.7% */
(more properties here)
}
#sidebar {
max–width: 300px;
width: 33.3%; /* 300/900 = 33.3% */
(more properties here)
}
|
Basically, you need to work out the ratio of the contained elements to the width of the containing element, and set your width equal to that percentage.
If you want to add padding or margin, express those as percentages as well, and adjust the other widths accordingly so the total is always 100% or less. This is really key. The widths of all of the elements that take up horizontal space need to be expressed in percentages. Note that you can use max-width to prevent things from getting too big.
If the elements are not re-sizing, look for absolutely-sized elements within those divs. Convert those widths, margins, and padding to percentages as well.
Let’s say there is a div within #content called #single-post with width 550px and 25px margins on either side. The CSS for that would look like
|
1
2
3
4
5
6
|
#single-post {
max–width: 92%; /* 550/600 = 92% */
margin–left: 4%; /* 25/600 = 4% */
margin–right: 4%;
(more properties here)
}
|
Since this div is contained in another div, the horizontal widths should total 100%, not 66.7%.
Use this technique if your header is not re-sizing. Repeat the same process that you used on the header with your footer. If anything isn’t re-sizing, check for any fixed-width contained elements.
The Menu Bar
OK, now all of the elements on the site should be resizing nicely as you adjust the width of the browser window… except for the menu bar. The menu bar can be tricky, since it can be implemented in a variety of ways.
The easiest way to deal with the shrinking window is to simply have the menu “double-back” on itself and wrap. We’re not going to hide the main menu with a button in this case. Here are some screen shots to show what I’m talking about. First we have the desktop version.
Here is the mobile version. Notice how the menu bar just folds back on itself. We are not doing a fancy menu button here, but it’s still very usable, and less work.
Okay, since the structure of menu bars can vary widely, I’m going to do some hand-waving and give you some broad brush strokes here. It’s impossible to give a step-by-step method that will work in all cases, unfortunately. Here’s the general idea though.
First, replace any widths defined in pixels using the techniques above. That alone is probably not enough. Menu bars often have fixed height, so you’ll have to replace any heights defined in pixels with “min-height” along with “height: 100%”, or something to that effect.
In my case, this only partially worked. The menu wrapped in a weird way until I added “display: inline-block” to the div containing the menu items. After I did that, the menu was no longer centered, so I had to wrap it in a new div which was centered.
After all of the hoopla, my menu was centered and wrapped when I made the browser narrow, but it took me over an hour of experimentation to figure out. More fancy solutions, like a menu that collapses into a Menu Button (sometimes known as a “hamburger”) require JavaScript or jQuery… I reserve that for a future article.
Resizing Images
Okay, hopefully your containers are now resizing, but what about the images? Chances are they were hard coded with dimensions like this:
|
1
|
<img width=500 height=150 src=“images/image.jpg />
|
To make them resize properly, the technique is similar to resizing divs. Remove the hard-coded width and height from the images and replace them with “width:100%;” and “max-width:” set to whatever you want the normal desktop size to be. The result is this:
|
1
|
<img style=“width:100%; max-width:500px;” src=“images/image.jpg />
|
Images set up this way will shrink down when you resize the browser window.
Media Queries
OK, now we have a completely fluid layout that resizes as you make the browser window narrow. But, it still looks terrible on a thin mobile device screen because the elements are too scrunched up. We need to separate them so that only one column of content is visible at a time. In addition, your header probably looks bad, and we’ll have to fix that too.
These problems can be fixed through the use of media queries in your CSS file. Let’s fix the main content container and sidebar first. Play with the browser size and determine roughly at what point you want the sidebar to hop below (or above) your main content. Estimate or measure in pixels how wide the browser window is at that point. For me, it was at 540 pixels.
Next, we have to “undo” the widths we defined for the content and sidebar to make them fill the whole width of the screen as follows:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@media screen and (max–width: 540px) {
#sidebar {
display: block;
min–width: 200px;
max–width: 400px;
margin: 0px 3%;
float: none;
width: 94%;
}
#content {
width: 94%;
margin:0px 3%;
}
}
|
The key is making the widths 100% (or 94% in my case, with 3% margin on each side). Experiment with these settings until you get what you want.
The Header
We are almost there. The header probably still looks bad when you make the browser really thin. For example, the font size might be too big and it might wrap or do other unpleasant things. This is simple to fix. Let’s say the original font size was 36px, which is too big when the screen is narrow. Pick a point where you want to resize it, and add the code below. For me, the break point was at 400px wide, where I resized the header text to 28 pixels as follows:
|
1
2
3
4
5
6
7
|
@media screen and (max–width: 400px) {
.blogname h1 {
font–size: 28px;
}
}
|
The Final Bit
I’ve undoubtedly glossed over many of the little details in your theme that you will need to fix to make it completely responsive. But hopefully with the broad strokes I’ve given you, you’ll be able to fill in the details.
But even after you get your site fully responsive, you might be surprised to still see a shruk-down version of the non-responsive site when you view it on a phone! What gives?
You have to add one last line of code to tell the phone not to “zoom out” when viewing your site. It’s easy. Just add this line to the head section of your HTML code:
|
1
|
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
|
This tells the phone’s browser not to zoom out when viewing your page. Everything should be kosher now.
If you want to see a real example of a non-responsive WordPress theme that I made responsive, check out http://disablemycable.com/blog. The CSS file shows these techniques.
Hope this has helped!! Let me know how it works for you. – Brian
I am a freelance web developer and consultant based in Santa Monica, CA who uses WordPress, PHP, and JavaScript to create web applications for small businesses and organizations.
Fonte: Make Any WordPress Theme Responsive (Mobile-Friendly)
Hom Digitalis 