Automagically adds responsive, customizable mobile UI to (almost) any WordPress theme.

github icon Download from GitHub

I got tired of making the same responsive layout modifications to different WordPress themes over and over again and I wanted an easy way to create and modify a custom interface for mobile devices. So I rolled all the stuff I was doing manually into a single plugin!

ZappBar adds highly configurable mobile app style button bars to the top and bottom of any WordPress theme. You can decide at what screen/browser widths they activate (so you can show them only for phones or tablets without altering your site for desktop users). This plugin can also try to convert non-responsive themes to responsive layouts that auto-adjust for mobile devices and it can try to fix some mobile layout issues that bugged me about the WordPress admin backend too.

Obviously it isn’t going to work perfectly with every theme, since theme developers can use whatever IDs, class names, and structure they please – but for child themes based on the default WordPress themes (the ones with names like TwentyTen, TwentyTwelve, etc.,) or child themes for ComicPress, WebComic, MangaPress, and WooCommerce it should work with minimal configuration.  There are options that allow you to enter custom IDs and class names if the theme isn’t using the expected ones.

If the automatic retrofitting and the customization options still don’t convert the theme to work responsively (or some elements are still messed up) then usually the best thing to do is create a child theme and place media queries in its stylesheet matching the screen sizes at which you want those elements to be adjusted.  It’s still a lot less work than having to retrofit the theme from scratch.

Is It Mobile Friendly?

Recently Google decided that, when people search on their phones or tablets, the results should favor “mobile friendly” websites.  Meaning if your site isn’t mobile friendly it gets pushed down in the search results – possibly so far nobody on a phone or tablet will ever find it.  Toward that end, Google created a Mobile Friendly Testing utility.

The problem with the utility is that it simply uses their “Smartphone Googlebot” to evaluate the site.  Bots don’t “see” the website rendered in a browser the way a human visitor does.  In particular it’s not going to evaluate the final state of the page(s) after scripted alterations.  It also seems to have a lot of difficulty even reaching WordPress-powered sites, claiming the robots.txt may be blocking it (even when it’s clearly not).

If you are using ZappBar to retrofit a non-responsive WordPress theme the Google Mobile Friendly Testing utility will completely miss those client-side modifications and declare your website “Not Mobile Friendly” (and subsequently down-rank your site in mobile search results).

Microsoft’s Bing Mobile Friendliness Tool is way better than Google’s.  It will actually evaluate a fully-rendered view of the site, it even shows you an image of how it looks rendered for the test.  Which means even if you’re retro-fitting a non-responsive theme it can pass the test.

Of course people are probably more concerned with their SEO ranking on Google than Bing, so I’d strongly recommend you use a responsive WordPress theme whether you’re using ZappBar or not.

In Action

If you are viewing this website on a phone you’re already seeing the ZappBar interface overlaid on the site.  If you’re on a desktop browser, just resize it narrower until the ZappBars appear.  On this site it’s really plain, but with some CSS in your WordPress theme you can make it fit the look-and-feel of the rest of your site.  Take a look at the following sites on a phone or squish your browser to see ZappBar in action:

Healing Circle

Sa-Bom Jim Comic

Ryu Maru

(Comments disabled, please direct questions, suggestions, and bug reports to the GitHub page for this project)