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.

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)