Yet most of us are missing a trick. The standard wordpress themes are optimised to be read on the web. We provide RSS feeds so that people can read on the go, but often those feeds struggle to cope with image sizes or layout issues. So for a large percentage of our audience all that hard work around the customer experience is being squandered.

As people do more and expect more on their smartphones, so we need to find a way to provide a great customer experience on these devices.

Step forward WPtouch

WPTouch is a free plugin for wordpress that automatically transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, when viewed from an iPhone, iPod touch, Android, Opera Mini, Palm Pre and BlackBerry Storm mobile devices.

The admin panel allows you to customize many aspects of its appearance, and deliver a fast, user-friendly and stylish version of your site to your iPhone, iPod touch, Android, Opera Mini mobile, Palm Pre and BlackBerry Storm visitors without modifying a single bit of code (or affecting) your regular desktop theme.

Critically, it also includes the ability for your visitors to easily switch between the *WPtouch* view and your site’s regular theme – putting control of the customer experience back in the hands of the user.

Quite simply it is awesome. Doubly so when you consider it is free and triply so when you find out just how easy it is to configure.

You can download the plug-in from the WordPress Codex here.

This post tells you how to to increase the number of images that are in the slideshow.

The good news is it is pretty simple. It does require  you to edit some code, but providing that you are careful and follow what I have done below, you can do this without any technical knowledge whatsoever. Before you start, just back-up a copy of your modularity theme, which you can find under your wordpress directory, eg ../wordpress/wp-content/themes/.

Okay, there are two php files that you will need to change, and we are going to make the changes using the built-in text editor within wordpress. From your wordpress dashboard, go to “Appearance” and select the “Editor” option. This will open up a screen with a box containing the file “customs.css” open and ready for editing. On the right there will be a list of all the files that are contained in the modularity theme. Go over to that list and double click on slideshow.php.

The page  will refresh and the text box will now contain the the php code that makes up  the slideshow.php file. Scroll down towards the bottom until you find the following Les the [code] tag which I have put in there so that is displays correctly and you can cut and paste it easily) :

[code]<li><img src="<?php if ( get_option('gpp_slideshow_image_5') <> "" ) { echo get_option('gpp_slideshow_image_5'); } else { bloginfo('template_directory'); ?>/images/slideshow/image5.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li>[code]

This is the code that displays your images into the slideshow - in this case in the 5th slot. The first thing we need to do is create some more slots in the slideshow to display how ever many more images you want to show. Effectively you need to copy this block  of code that refers to image number 5 and replicate it by the number images you want to add, ensuring that you change the numbers each time. Or you can copy and paste the code I have posted below to add another 5 images.

Here is the code for another 5 image (remember to strip out the two {code} tags):

[code]<li><img src="<?php if ( get_option('gpp_slideshow_image_6') <> "" ) { echo get_option('gpp_slideshow_image_6'); } else { bloginfo('template_directory'); ?>/images/slideshow/image6.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_7') <> "" ) { echo get_option('gpp_slideshow_image_7'); } else { bloginfo('template_directory'); ?>/images/slideshow/image7.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_8') <> "" ) { echo get_option('gpp_slideshow_image_8'); } else { bloginfo('template_directory'); ?>/images/slideshow/image8.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_9') <> "" ) { echo get_option('gpp_slideshow_image_9'); } else { bloginfo('template_directory'); ?>/images/slideshow/image9.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li> <li><img src="<?php if ( get_option('gpp_slideshow_image_10') <> "" ) { echo get_option('gpp_slideshow_image_10'); } else { bloginfo('template_directory'); ?>/images/slideshow/image10.jpg<?php } ?>" alt="<?php bloginfo('name'); ?>" /></li>[code]

Now click on the "Update" button underneath the box. Okay part one done and you are about half way through!

Now we need to update the Homepage slideshow section of the modularity interface, to add the ability for us to upload the images and assign them to each of the slots that you have just created. In the editor, go back to the right hand side of the page and now open up theme_options.php

Scroll down until you find:

$options[] = array( "name" => "Slideshow image 5",
"desc" => "Upload your fifth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_5",
"std" => "",
"type" => "upload");

Between the end of that code and the next block (that begins:
$options[] = array( "name" => "Slideshow height",
"desc" => "Enter the height, in pixels, that you want your slideshow to be.")

Insert the following:

[code]$options[] = array( "name" => "Slideshow image 6",
"desc" => "Upload your sixth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_6",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 7",
"desc" => "Upload your seventh slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_7",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 8",
"desc" => "Upload your eighth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_8",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 9",
"desc" => "Upload your ninth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_9",
"std" => "",
"type" => "upload");

$options[] = array( "name" => "Slideshow image 10",
"desc" => "Upload your tenth slideshow. Images should be sized at 950 pixels wide max, jpg only, compressed to 6, in sRGB mode.",
"id" => $shortname."_slideshow_image_10",
"std" => "",
"type" => "upload");[code]

Now press the "Update" button below the text box to save and update the changes to the theme_options.php file.

That's it - all done!  To check everything is ok, go back to the modularity section, open up the Homepage slideshow section, and you will now find that you can upload another 5 images

Good luck