WP Super Cache and WP Touch (Pro)

On one client’s site we’re using WP Super Cache and WP Touch Pro, and it bothered me that while WP Touch Pro ensures that mobile users get a lovely optimised theme, it wasn’t serving cached pages for those queries. Until recently we were hacking both WP Super Cache and WP Touch (pre-Pro) to achieve this, but recent changes in both plugins mean we can avoid the egregious charge of tampering with other people’s plugin code.

Three fairly simple steps:

I have this in my main desktop theme functions.php:

/**
* Hooks the WP Super Cache supercache_dir filter to specify
* a particular directory to cache into.
*
* @param string $dir A portion of the directory path
* @return string A similar portion of the directory path
* @author Simon Wheatley
**/
public function supercache_dir( $dir ) {
$dir = "desktop/" . $dir;
return $dir;
}
add_filter( 'supercache_dir', 'my_supercache_dir' );

This in my WP Touch Pro theme functions.php:

/**
* Hooks the WP Super Cache supercache_dir filter to specify
* a particular directory to cache into for the mobile theme.
*
* @param string $dir A portion of the directory path
* @return string A similar portion of the directory path
* @author Simon Wheatley
**/
function sf_supercache_dir( $dir ) {
$dir = "wptouchpro/" . $dir;
return $dir;
}
add_filter( 'supercache_dir', 'sf_supercache_dir' );

Then the following in my .htaccess file:

# Desktop theme, gzipped
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0 MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo Wii|Nitro|Nokia|Opera Mini|Palm|PlayStation Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915 Obigo|LGE VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP_user_agent} !^(w3c |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda |xda-).* [NC]
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/desktop/%{HTTP_HOST}/$1/index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/desktop/%{HTTP_HOST}/$1/index.html.gz [L]

# Desktop theme, not gzipped
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0 MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo Wii|Nitro|Nokia|Opera Mini|Palm|PlayStation Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915 Obigo|LGE VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP_user_agent} !^(w3c |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda |xda-).* [NC]
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/desktop/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/desktop/%{HTTP_HOST}/$1/index.html [L]

# "iPhone" theme, gzipped
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android|webOS|BlackBerry9530).*
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/wptouchpro/%{HTTP_HOST}/$1/index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/wptouchpro/%{HTTP_HOST}/$1/index.html.gz [L]

# "iPhone" theme, not gzipped
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android|webOS|BlackBerry9530).*
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/wptouchpro/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/wptouchpro/%{HTTP_HOST}/$1/index.html [L]

Some quick notes on the Mod Rewrite rules:

  • I’m think that the last block (“iPhone” theme, not gzipped) is unnecessary
  • This config causes some mobile clients to still be passed through to uncached WordPress, but as it’s not that many I don’t have a problem sleeping at night

Hope this helps someone.

2 thoughts on “WP Super Cache and WP Touch (Pro)

  1. Paul Olson

    This is great. I’ve been having issues with a site and I think it’s something between W3 Total Cache and WPtouch Pro. I’ve switched to WP Super Cache and the site’s been much more stable. Now I need to set this up!

    Reply
  2. nguyen hai nam

    I am using newest WP touch version and WP Super Cache version 1.2. What I have done to install WP touch is activate WP touch -> select the option “Mobile Device Support ” – >then delete the ache. The mobile theme work fine on mobile.
    But after sometimes when I load the page and the post on my laptop (desktop version) then I came back to my mobile and load the same page, post then It show the desktop version on my mobile instead of mobile version.
    So if I use this method. Will it be ok? I mean I dont know any thing about .htaccess so Im scared that if I rewrite with your code the setting will get error. Do i need to replace everthing with this code or just add it to .htaccess file

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>