WPTouch: Beautiful automatic mobile skins for WordPress and Mediawiki in 15 minutes

Hey all you bloggers and publishers. If, like me, you’ve been putting off updating your blogs and wikis to show up nicely on smartphones, fear not, there are DIRT SIMPLE FAST solutions available today to set up special skins for mobile browsers that are gorgeous. As of today, here are the instant solutions.

WordPress

Right inside your admin panel in WordPress, click on the Plugins button in the left pane.
Select Add New.
Punch in WPTouch and hit “Search Plugins”.
There it is, now install it!
That’s it. Seriously. You can play with the settings if you want (like changing the logo), but you don’t need to. Wow!

Mediawiki

This skin is the one you want, but it has a few issues.
Here is a corrected version, use it to take your chance for it to work “out of the box” 🙂 Download and untar it from within your [mediawiki/skins] folder. The changes I made are listed at the end of this post.

Now users can select the skin in their preferences, but we want automatic! Update your LocalSettings.php file to set $wgDefaultSkin as follows:

if (preg_match("/iphone/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/android/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/webos/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/ipod/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/opera mini/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} else {
    $wgDefaultSkin = 'vector';
}

Go enjoy it!

Easy and beautiful!

The Gory Details

The following changes were made to the awesome WPtouch mediawiki skin that I believe originally came from here. Update the site paths in this file:

mediawiki/skins/wptouch/css/style-compressed.css

The site paths were changed assuming you followed the short url mediawiki setup (you definitely should). So the site paths had to change from [/mediawiki/] to [/w/].

The logo URL is also wrong, fix it here:

skins/WPtouch.php

It was changed from this:

global $wgSitename, $wgUser;

to this:

global $wgSitename, $wgUser, $wgLogo, $wgScriptPath;

and this:


< a href="/">msg('sitetitle') ?>

to this:


< a href=""> msg('sitetitle') ?>

Wednesday, November 16, 2011 | Comments RSS |

tags:

2 Comments

senghong79 says:

December 24, 2011 at 12:53 pm

Thanks for the fix for mediawiki. Much appreciated. But I still can’t seem to find the links to edit the page, talk pages, history, etc, or is it just me?

Reply to this comment
m says:

December 26, 2011 at 4:29 pm

senghong79 thanks for the feedback! I’m not sure about the edit/talk/history pages, in my case I turn those off for visitors to my site. If you find anything out, let me know.

Reply to this comment