Note: This article was originally published in 2013. Some steps, commands, or software versions may have changed. Check the current WordPress documentation for the latest information.

In this step-by-step guide, you’ll learn prevent jetpack’s mobile theme or wptouch to get cached by w3 total cache. WordPress is the world’s most popular content management system (CMS), powering over 40% of all websites on the internet.

Prerequisites

Before you begin, make sure you have:

  • WordPress installation (self-hosted)
  • Administrator access to WordPress dashboard
  • FTP/SFTP or file manager access to server files

How to: Prevent Jetpack’s mobile theme or (http://bravenewcode.com/wptouch/ “WPtouch”) to get cached by (http://WordPress.org/extend/plugins/w3-total-cache/ “W3 Total Cache”)

Honestly the problem statement is more like: “How to prevent W3 Total Cache from serving the mobile theme to all my clients”. The issue arises when the first client that visits a page is a mobile client. W3 Total Cache (or another cache plugin/mechanism potentially) will cache the page and therefore include the .css files for the mobile theme. Now, when a full featured client visits the site it is served the cached page which is using the mobile theme. (http://wordpress.org/extend/plugins/wp-super-cache/ “WP Super Cache”) plugin has a child plugin that deals with this situation, but W3 Total Cache doesn’t. Now, you are probably wondering why I don’t use WP Super Cache instead. Although I think it is more robust and like it better W3 Total Cache minifies the html and gives me more options with (http://newrelic.com “New Relic”) so I went that route. I still use Better (http://omninoggin.com/wordpress-plugins/wp-minify-wordpress-plugin/ “WP Minify”) to minify (http://en.wikipedia.org/wiki/JavaScript “JavaScript”) and (http://en.wikipedia.org/wiki/Cascading_Style_Sheets “Cascading Style Sheets”) files as W3 Total Cache simply won’t.

But getting back on topic: W3 Total Cache is not smart enough to handle this situation. The recommendation here is to indicate W3 Total Cache to not cache pages served to mobile clients. Now, in my case only a small percentage of my visitors come from a mobile device and my server even without cache is able to serve pages at an acceptable speed. If your case is different and you need cached pages for mobile visitors then consider changing to another plugin like WP Super Cache.

If you wish for mobile devices to not get cached pages then you need to leverage the user agents feature to exclude them in W3 Total Cache. This means thatPage Cache, Minify and CDN need to be configured to exclude mobile devices.

A new feature in the latest release called “User Agent Groups” also provides further flexibility to address this issue. It comes with pre-loaded groups that identify High End clients and Low End clients. Take for example any IOS device is considered a High End client as the browser can render comparably with a full featured desktop browser. This new feature allows W3 Total Cache to serve different cached pages: One default cache and One cache for each User Agent Group.

So my recommendation is to use this feature to address the issue with mobile themes getting cached for all clients. In order to activate this follow this simple instructions:

  1. Go to the User Agents Group setting under the Performance tab
    1. Scroll to each Group and Enable both default groups
    2. You might get an error when you save indicating that “bb10” is in both lists. Simply remove it from one of them… I want to believe it is more of a High end client, but who knows. Once you remove it from one of the lists you can save and be done!
    3. TheTheme section should be left to**— Pass-through —** if you are using JetPack’s Mobile Theme (currently known as minileven). If you have another theme installed you want to use you may select it from the list.

If you are using a previous version simply disable a few User Agents as mentioned previously. People like to use the previous version as some things work better on it. Below are the instructions you can follow:

  1. Go to the Page Cache settings under the Performance tab
    1. Scroll down to the Rejected user agents box and paste the user agents you want to exclude. Below are a few suggestions. Save changes.
  2. Go to the Minify settings page under the Performance tab
    1. Scroll down to the Rejected user agents box and enter the user agents you want to exclude. Below are a few suggestions. Save changes.
  3. Go to the CDN settings page under the Performance tab
    1. Scroll down to the Rejected user agents box and again enter the user agents you want to exclude. Below are a few suggestions. Save changes.
  4. Finally, go to the General Settings page under the Performance tab and click empty all caches.

Suggested user agents to exclude:

iphone ipod ipad aspen incognito webmate android dream cupcake froyo blackberry9500 blackberry9520 blackberry9530 blackberry9550 blackberry9800 webos s8000 bada

 

User Agents included in the High End list:

acer s100 android archos5 bada bb10 blackberry9500 blackberry9530 blackberry9550 blackberry 9800 cupcake docomo ht-03a dream froyo googlebot-mobile htc hero htc magic htc_dream htc_magic iemobile/7.0 incognito ipad iphone ipod kindle lg-gw620 liquid build maemo mot-mb200 mot-mb300 nexus 7 nexus one opera mini s8000 samsung-s8000 series60.*webkit series60/5.0 sonyericssone10 sonyericssonu20 sonyericssonx10 t-mobile mytouch 3g t-mobile opal tattoo touch webmate webos

User Agents included in the Low End list:

240x320 2.0 mmp bppcb alcatel amoi asus au-mic audiovox avantgo benq bird blackberry blazer cdm cellphone danger ddipocket docomo dopod elaine/3.0 ericsson eudoraweb fly haier hiptop hp.ipaq htc huawei i-mobile iemobile iemobile/7 iemobile/9 j-phone kddi konka kwc kyocera/wx310k lenovo lg lg/u990 lge vx midp midp-2.0 mmef20 mmp mobilephone mot-v motorola msie 10.0 netfront newgen newt nintendo ds nintendo wii nitro nokia novarra o2 openweb opera mobi opera.mobi p160u palm panasonic pantech pdxgw pg philips phone playbook playstation portable portalmmm proxinet psp qtek sagem samsung sanyo sch sch-i800 sec sendo sgh sharp sharp-tq-gx10 small smartphone softbank sonyericsson sph symbian symbian os symbianos toshiba treo ts21i-10 up.browser up.link uts vertu vodafone wap willcome windows ce windows.ce winwap xda xoom zte

(http://img.zemanta.com/zemified_e.png?x-id=3c913f0f-51da-482a-98bf-72667398a0d1)](http://www.zemanta.com/?px “Enhanced by Zemanta”)

Summary

You’ve successfully learned prevent jetpack’s mobile theme or wptouch to get cached by w3 total cache. If you run into any issues, double-check the prerequisites and ensure your WordPress environment is properly configured.