Back in 2011, I wrote a post about using WP Touch Pro.  Since, the new Google mobile-friendly rule went into effect, I have received several requests to customize sites using WP Touch Pro so I thought I would re-visit my comments on using the plugin.

First of all, the plugin now has many new features.  You can pick from several themes, adjust your menus, tell the site which plugins to use in the mobile version. Custom posts are also supported.  However, creating a custom theme still requires a bit of work. I will go over the steps it took to create a custom WP Touch Pro theme for www.thermalangel.com.

Custom Templates

wp touch pro themes in dashboard

1. Make a copy of one of the default themes by clicking the copy button. I copied the CMS theme as that was the one Thermal Angel had selected.

2. Once, you create a theme, you will have a new directory in your WordPress content folder (typically wp-content). For example: wptouch-data/themes/cms-copy-1

3. I renamed my folder from cms-copy-1 to thermal-angel

4. Update the readme.txt file to reflect the name of your theme and author. This gives your theme a unique name and will show up in the dashboard (see the image above). You can also generate a custom screen shot for your theme.  The two lines below are the changes I made to the readme.txt for my theme

Theme Name: Thermal Angel
Theme URI: https://www.koolkatwebdesigns.com/

1. The default directory of your theme folder contains all of the theme files. If you have custom templates, copy them there. Of course, you may have other modifications to these templates for your mobile site.

2. You can also modify any styles or the functions.php file if needed.

Custom Posts and Custom Taxonomies

wp touch pro custom posts dashboard selection

While you can tell WP Touch Pro to use custom post types by a selection in the dashboard (see above), it only copies custom taxonomies defined in plugins. This is another good reason to create a plugin when defining custom post types. So, if your custom taxonomies are defined in your desktop theme and not a plugin, you will have to re-register them in your WP Touch Pro theme’s function.php.

Javascript

wp touch pro custom code

WP Touch Pro has a section in the core settings where you may include custom javascript. I used this area in order to include the same rotating testimonials as the desktop site.

 

Once you have completed the steps, you will a custom WP Touch Pro mobile theme that includes your templates, custom posts and styling.

thermal angel mobile site