ZappBar Plugin

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

(please direct bug reports and feature suggestions to the GitHub page for this project)

5 Comments

  1. I am currently using ComicPress on my site and was directed to your ZappBar plugin by Philip Hofer to help me make my site mobile and tablet responsive. I followed the instructions, downloaded the plugin and activated it, but now my screen is totally blank. I had to deactivate the plugin to get my site to function again.

    Obviously I am doing something wrong. Do you have any solutions?

    Thanks for your time and consideration!

    Sean

    • kmhcreative

      Sean,
      I’m not sure. I’m using it on multiple sites with different themes, including ComicPress 4.4, and haven’t had that happen. Here’s how I’d try to troubleshoot it:

      1. Try activating one of the default WordPress themes and see if it is white screening too. If it’s not, then the issue is with the theme not the plugin.

      2. While just activating it shouldn’t be a problem (because by default all the front-end functions are disabled until you set “On Screen Size” to something other than “none”), but go through each settings tab and “SAVE” anyway and see if that fixes it. If it does I’ll have to comb through my code and see if I’m checking for some variable that isn’t getting set on activation or something. :/

      3. If it’s still white screening then there must be some incompatibility with the plugin. What version of ComicPress are you using? Are you using a child theme? What version of WordPress are you running? Update everything.

      4. If having everything up-to-date doesn’t work, try turning on DEBUG in your wp-config.php file:

      define(‘WP_DEBUG’, true);

      That should tell you exactly which line of which file is failing. Please either post the error message back here or over on GitHub under “Issues”

      • kmhcreative

        Regarding ZappBar causing WordPress to “white screen” without an error message, I have not been able to reproduce this result myself, either on my development server installations or live sites. The only possibilities that spring to mind are:

        A. if the site in question is part of a “multisite” installation. In which case ZappBar should be activated from the main site or the register_activation_hook calls replaced with add_action(‘admin_init’, ‘zb_activate’) etc., as per the notes in the WordPress codex. Note that I have never tested ZappBar in a multisite configuration, I personally never use a multisite set-up.

        – or –

        B. if the WordPress installation’s “plugins” folder was a symlink, the plugin’s PHP files would need to be edited to replace every instance of __FILE__ with basename(dirname(__FILE__)).’/’.basename(__FILE__) or it won’t point to the actual folder location.

        With debug turned on ZappBar isn’t even throwing any errors of any kind on my dev server. So I’m at a loss to figure out why it would “white screen” anyone’s blog.

  2. kmhcreative

    I just released version 0.2.2 to GitHub. This is the first major update in 2 years! Has a bunch of bug fixes and feature additions over previous release. Compatible with WordPress 4.8. You don’t need to deactivate your existing plugin, just FTP and overwrite it with the new one (make sure you knock the “-master” of the folder name). Then you should go to Settings –> ZappBar and look through any of the new/changed options, and even if you don’t change anything hit the “Save” button.

  3. kmhcreative

    FLUSH YOUR PERMALINKS!

    Also, if you are seeing 404 Not Found errors after activating/deactivating ZappBar go to Dashboard –> Settings –> Permalinks to flush the permalink structure. This is a bit of a head-scratcher since ZappBar doesn’t create any custom post-types or alter any rewrite rules. But it does interact with other plugins like WooCommerce or any of the supported comic plugins, that DO create custom post types and rewrite rules. Since I couldn’t recreate the error consistently, I purposely didn’t add an automatic flush function to the activation/deactivation hooks as I’m not sure its actually ZappBar causing it. Whether it is or isn’t, though, flushing your permalinks should fix the 404 error.

Leave a Reply


Menu




Search

Posts

About

Comment5

Contact

Share

Share this On:

Google+ Reddit Stumble It Digg this! LinkedIn Pinterest RSS Feed E-mail Link!