How to Set Up W3 Total Cache with WPtouch Plugin on WordPress
Join LonePlacebo.com on Facebook!
Like many problems with this site, I prefer to fix things when I cannot afford to ignore them any longer or the solution presents itself to me with little effort on my part. One of these growing problems that I chose to neglect showed up again recently when Eric from FWebDe sent me a reply via Twitter.
@loneplacebo Hey man, I’m stuck with the mobile theme on your site!
Of course, failing to properly identify the issue at hand like the great minds at BP, I sent him a reply soon after explaining:
In the moments that followed, I realized that Eric was not referring to the fact that my site’s theme wasn’t working properly for mobile users, but that desktop users were seeing the mobile theme instead.
Hallelujah! Time to fix this once and for all! Right? Ok, maybe later. So, I told Eric:
@FWebDe that sometimes happens. Stupid wptouch iPhone theme plugin. Shrug.
But as fate had known, Brave New Code, the fine creators behind the WPtouch iPhone Theme plugin, noticed my ill-conceived tweet and proceeded to file a defamation lawsuit against me seeking $100 billion dollars due to loss revenue. In other words, they wanted me to get off my lazy ass, stop making negative comments about their plugin, and finally attempt to fix this issue.
Ah ha! I exclaimed as the magical light bulb that shows up in moments of sheer brilliance appeared above my head. I’ve been pointing my finger at the wrong guy the whole time! “Stupid W3 Total Cache plugin!” I tweeted away moments later.
So, what exactly is the big issue?
With caching plugins like W3 Total Cache or WP Super Cache installed on your WordPress blog, most of your pages are cached by the plugin so that subsequent visits to your site by visitors will be a much smoother and faster process. Sounds good so far? Good, then let’s continue.
Then, there came the mobile users. Say what?! People can visit your site on their phones now?! No way!!
Yes, way. Since mobile phone browsers are not as fast as their desktop counterparts, it became crucial for website owners to offer mobile themes of their site for mobile visitors. In other words, we needed a plugin like WPtouch since most of us are too damn lazy to create a mobile theme from scratch.
Once installed, however, your mobile theme plugin may not exactly follow a peaceful symbiotic relationship with your caching plugin. As mentioned earlier, problems occur when your caching plugins are not configured properly to incorporate the mobile theme plugin. For example:
- Mobile theme showing up for desktop users.
- Desktop theme showing up for mobile users.
- John McCain joining Twitter.
- Toddlers listening to Justin Bieber.
So, as you can see, we got some issues at hand.
Before we start…
If you are running the WP Super Cache, the fine people at Brave New Code created a video on how you can configure the plugin to work properly with WPtouch:
Step 1 of 4:
Copy and paste the following list of mobile user agents into the Rejected User Agents list found in the Page Cache Settings section of your W3 Total Cache settings(the list that already includes bot, spider, crawl, etc):
android blackberry9500 blackberry9530 cupcake dream incognito iphone ipod mini webOS webmate 2.0 MMP 240×320 ASUS AU-MIC Alcatel Amoi Audiovox AvantGo BenQ Bird BlackBerry Blazer CDM Cellphone DDIPOCKET Danger DoCoMo Elaine/3.0 Ericsson EudoraWeb Fly HP.iPAQ Haier Huawei IEMobile J-PHONE KDDI KONKA KWC KYOCERA/WX310K LG LG/U990 Lenovo MIDP-2.0 MMEF20 MOT-V MobilePhone Motorola NEWGEN NetFront Newt Nintendo Wii Nitro Nokia Novarra O2 Opera Mini Opera.Mobi PANTECH PDXGW PG PPC PT Palm Panasonic Philips Playstation Portable ProxiNet Proxinet Qtek SCH SEC SGH SHARP-TQ-GX10 SIE SPH Sagem Samsung Sanyo Sendo Sharp Small Smartphone SoftBank SonyEricsson Symbian Symbian OS SymbianOS TS21i-10 Toshiba Treo UP.Browser UP.Link UTS Vertu WILLCOME WinWAP Windows CE Windows.CE Xda ZTE dopod hiptop htc i-mobile nokia portalmmm vodafone
The highlighted items above are found in the list of user agents in the WPtouch Advanced Options section(screenshot below; click image to enlarge). The remaining list is the mobile user agents in the second to last section of the W3 Total Cache Page Cache Settings page with Android, iPhone, and iPod removed since it was already in the WPtouch user agents list.
Don't act like you can't find it!
Thoroughly confused? I sure hope not.
Step 2 of 4:
As mentioned above, the Mobile user agents found in the W3 Total Cache Page Cache Settings page should look like this:
android blackberry9500 blackberry9530 cupcake dream incognito iphone ipod mini webOS webmate 2.0 MMP 240×320 ASUS AU-MIC Alcatel Amoi Audiovox AvantGo BenQ Bird BlackBerry Blazer CDM Cellphone DDIPOCKET Danger DoCoMo Elaine/3.0 Ericsson EudoraWeb Fly HP.iPAQ Haier Huawei IEMobile J-PHONE KDDI KONKA KWC KYOCERA/WX310K LG LG/U990 Lenovo MIDP-2.0 MMEF20 MOT-V MobilePhone Motorola NEWGEN NetFront Newt Nintendo Wii Nitro Nokia Novarra O2 Opera Mini Opera.Mobi PANTECH PDXGW PG PPC PT Palm Panasonic Philips Playstation Portable ProxiNet Proxinet Qtek SCH SEC SGH SHARP-TQ-GX10 SIE SPH Sagem Samsung Sanyo Sendo Sharp Small Smartphone SoftBank SonyEricsson Symbian Symbian OS SymbianOS TS21i-10 Toshiba Treo UP.Browser UP.Link UTS Vertu WILLCOME WinWAP Windows CE Windows.CE Xda ZTE dopod hiptop htc i-mobile nokia portalmmm vodafone
This list is almost identical to the rejected user agents list with only the default list of rejected user agents excluded. Simply replace the the Mobile user agents list with the list shown above.
Step 3 of 4:
We’re almost near the end, young Anakin. Now, copy your rejected user agents list that you’ve already pasted in the W3 Total Cache Page Cache Settings and paste it into the same rejected user agents list found in the Minify and CDN Settings sections.
Step 4 of 4:
Now, all you have to do is clear the stored cache. Simply go to the General Settings page of W3 Total Cache and click on the “empty all caches” button found at the top of the page.
Well, that wasn’t too hard right?
Lastly, if you’re like me and had problems with WPtouch outputting the desktop theme on mobile phones, you whip out your shiny new iPhone 4 or Android and check out your site’s homepage. If the mobile theme is not being rendered, then feel free to contact me and bitch me out for my awful job writing this tutorial.
For more related information, check out this useful thread at the WordPress forums.
Related posts:
- Yet Another SEO Plugins for WordPress List
- 5 Solutions to Common WordPress Problems
- How to Customize your WordPress Admin Area
- 10 WordPress Tips to Take You to the Next Level
- 4 Ways to Maximize Your WordPress.com Blog
Good to see you’ve got that all sorted out now
I couldn’t have done it without you, Eric!
Great post, and perfect timing, too!
I was wondering how I could add the WPtouch plugin (for when I’m on the go), but not disable W3Total Cache! Thanks for the wonderful tutorial that will make my blog look so much better for mobile people.
Music to my eyes, Joe.
great post
vipan´s last blog ..Differences between Managers and Leaders
Gracias, Señor Vipan!
Thanks … Was stuck at one point.
Thanks for the links and the write up!