As mentioned before there are several ways to optimize your WordPress Blog for Smartphones and Tablets. The easiest way to get started is to use a good Plugin for that. After testing a few different i ended up by using WP Touch Pro as the best Plugin solution for my purposes. With this article i'll show you briefly how to install the Plugin and which options you have to customize it.
1. Download & Install the Plugin
First of all: there are two versions of WPTouch – the free one and the pro version. As you can imagine the Pro comes with more features and options for customizing. I'd recommend to first install the free version to have a quick look and play around a little bit…
- Download the Plugin
- Unzip it
- Upload the folder “wptouch…” to your wordpress installation into the folder wp-content/plugins (you can use a FTP-Programm like FileZilla for that)
- after logging in at your WordPress go to Plugins
- search for WPTouch in the list and click on Activate Plugin
2. Testing and basic CustomizationAfter activating WPTouch it now automatically redirects the requests from visitors using a mobile device to the WPTouch theme. This means also: all users browsing the old way to your Blog will see your usual Desktop theme.
But how can you have a look on the mobile version without having a mobile device to test it?
The answer is simple: just use the Firefox Browser and install an Add-on called “User Agent Switcher” – after activating this you can change the user agent of your browser in the menu extras > User Agent. Change it to iPhone and you can see how you Blog looks now for iPhone users.
Ok, at the beginning the Layout is clean but also very basic – i guess you want to make it a bit more personal, right? To do so you can have a look at some of these options:
- go to “WPTouch”/”WpTouch Pro” in your left sidebar (should be the last menu entry) to open the Settings for WP Touch
- go to General > Global General here you can setup the “Branding”, which means the title text that appears at the top of your mobile version – moreover you can setup a certain page as landing page
- setup custom menu icons for your navigation at Menu + Icons
- change the Style & Appearance at Active Theme (Pro Version)
- use custom CSS for advanced styling at General > Global General (Pro Version)
3. Create own Themes (only available with Pro)
As stated the free Version only offers a basic customization but is good enough to offer your visitors a usable mobile interface. If you want to make the next step you should update to the Pro version to be able to use the “child theme” option and also offer you iPad users an optimized Layout. Moreover you can setup an App Mode and have much more options to create custom menus.
Let's have a closer look to the child theme option: with the Pro version you will get a “Classic” and a “Skeleton” template by default. On the Settings Page of WPTouch you have a Theme Browser where you can choose the theme to use but also the option to copy one of the given theme. After creating the child theme you can edit the CSS file by navigating to /wptouch-data/themes/childthemename but also setup a custom functions.php
The WPTouch Plugin is a great Plugin if you don't want to spend too much time in customization by just using the given options. But you also have the opportunity to go a step further and create your own child theme with the pro version. Moreover you can setup an own iPad theme and a WebApp Mode – also only available with WPTouch Pro.
You like to have the full control without paying any money and have a good knowledge of HTML/CSS & a little bit PHP? Then the upcoming post should be due to your interest:
How to use a Theme Switcher to make your Blog Mobile Friendly
Liked it or even loved this post?
Please support me by spreading the Word (use the Buttons in the sidebar to share on Twitter, FB…) – i’m also looking forward to your Feedback in the comments!