WPTouch theme customization

WPtouch is one of the best mobile plugin for WordPress.It comes in two flavors free version and pro version.The free version comes with a default theme.The pro version as lots of other features as well.The default theme is easy to use but hard to customize.

I had a chance to use this plugin.I made few customizations based on my requirement.I am outlining the customizations here so that others can get benefited

Adding Google custom search in wptouch default theme

WPtouch default theme comes with an inbuilt search box which pops up after clicking the search word on the page or post.You can replace this default search box with Google custom search.To add the Google Custom search in WPtouch default theme follow below steps

  • Open header.php file located in wp-content/plugins/wptouch/themes/default
  • Search for the code shown below in the file
<div id="wptouch-search-inner">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" placeholder="<?php _e( "Search...", "wptouch" ); ?>"
name="s" id="s" />
<input name="submit" type="submit" tabindex="1" id="search-submit"
placeholder="<?php _e("Search...", "wptouch"); ?>"  />
<a href="javascript:return false;"><img class="head-close" src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/head-close.png"
alt="close" /></a>
</form>
</div>
  • Create your Google custom search code.
  • Delete all the code between the tags div wptouch-search-inner and the ending div tag shown in above code
  • Paste the adsense for search code copied above in between the wptouch-search-inner div tag and the closing div tag
  • The final code should look like as shown below note that your adsense for search code will be different then shown below
<div id="wptouch-search-inner">
	<form action="http://www.google.co.in/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-0000000000000000000" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="20" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript"
src="http://www.google.co.in/coop/cse/brand?form=cse-search-box&lang=en"></script>
		</div>

WPTouch with WordPress SEO by Yoast

WPTOuch if used along with WordPress SEO by Yoast creates repetition of titles (for example if your website title is Udinra then this word will get repeated). This is because the SEO plugin tries to rewrite the title and the title generating code in the theme conflicts with this feature of the SEO plugin.
To solve this issue follow the steps mentioned below

  • Open the file core-header.php located in folder wp-content/plugins/wptouch/themes/core
  • Search for code shown below
<title><?php wp_title('«', true, 'right'); ?> <?php $str = bnc_get_header_title(); echo stripslashes($str); ?></title>
  • Replace the above line with the line written below
<title><?php wp_title(''); ?></title>
  • Log into WordPress as administrator and go to settings–>wptouch
  • Set the Site Title option to blank (just delete the value present in site title option) and Save the settings.

Remove date and author name from Wptouch post page

WPtouch theme shows author information and date of publication below each post title.You can remove the publication date and author information from the WPtouch theme posts using below steps

  • open the file single.php located in wp-content/plugins/wptouch/themes/default directory
  • Search for below piece of code.It is located near single-post-meta-top class.You can use single-post-meta-top as the search string to locate the code.
<?php echo get_the_time('M jS, Y @ h:i a') ?> › <?php the_author() ?><br />
  • If you want to remove the date only then your modified code should look as below
› <?php the_author() ?><br />
  • If you want to remove the author information only then your modified code should look as below
<?php echo get_the_time('M jS, Y @ h:i a') ?> › <br />
  • If you want to remove both date and author information only then your modified code should look as below (delete whole line)

Remove category and tags from Wptouch post page

WPtouch theme shows the category to which a post belongs to and tags of a post after the post content while displaying a post.You can remove tags and category to which a post belongs from the WPtouch theme posts using below steps

    • open the file single.php located in wp-content/plugins/wptouch/themes/default directory.
    • Search for below piece of code.It is located near single-post-meta-bottom class.You can use single-post-meta-bottom as the search string to locate the code.
<?php _e( "Categories", "wptouch" ); ?>: <?php if (the_category(', ')) the_category(); ?>
<?php if (function_exists('get_the_tags')) the_tags('<br />' . __( 'Tags', 'wptouch' ) . ': ', ', ', ''); ?>
  • If you don’t want to show category (only show tags to which a post belongs to) then delete the first line of above code so your final code should look like.
<?php if (function_exists('get_the_tags')) the_tags('<br />' . __( 'Tags', 'wptouch' ) . ': ', ', ', ''); ?>
  • If you don’t want to show tags (only show category to which a post belongs to) then delete the second line of above code so your final code should look like.
<?php _e( "Categories", "wptouch" ); ?>: <?php if (the_category(', ')) the_category(); ?>
  • If you don’t want to show tags and categories then delete the both line of above code so your final code should be blank.

Modifying Wptouch theme footer text

wptouch theme shows powered by WordPress and wptouch line in footer text.You might want to change this and include your wptouch affiliate link or privacy policy link.To remove footer text from wptouch theme follow below steps open footer.php file located in wp-content/plugins/wp-touch/themes/default Search for the code shown below

<?php if ( bnc_wptouch_can_show_powered_by() ) { ?>
		<p><?php _e( 'Powered by', 'wptouch' ); ?>
		<a href="http://www.wordpress.org/"><?php _e( 'WordPress', 'wptouch' ); ?></a>
		<?php _e( '+', 'wptouch' ); ?>
		<a href="http://www.bravenewcode.com/products/wptouch-pro"><?php WPtouch(); ?></a></p>
	<?php } ?>

You can remove above code to delete lines powered by wordpress and wptouch.But in case you want to add your wptouch affiliate link then in place of the link http://www.bravenewcode.com/products/wptouch-pro paste your affiliate link.

WpTouch Ad management

Wptouch does support adding Adsense ads from front end (plugin configuration page).But in case you are not comfortable using that or want to use ads from different advertising network then follow below steps

For banner ads

    • To add banner ads open file single.php located in wp-content/plugins/wp-touch/themes/default/
    • Locate the code shown below.This code is used to display adsense ads (in case you added the option in plugin configuration
<?php wptouch_include_ads(); ?>
  • You can delete the code above and add ad code from your advertising network.

Ad code above </body>
Many advertising network suggest you to add ad code above </body> tag.For those advertising networks follow below steps

  • Open file footer.php located in wp-content/plugins/wp-touch/themes/default/
  • Locate </body> code and add your ad code above this code and save the file

Hope you enjoyed this tutorial.Consider sharing it if this helped you.Also in case you want to buy wptouch pro you can do me a favor by using my affiliate link.

22 thoughts on “WPTouch theme customization

  1. Hi Esha,

    thanks for such a great post on modifying WpTouch-definitely one of my favorite plugins.

    Maybe you can help me with these: I have a couple of DIVs I want to hide on mobile (like tables that don’t appear correctly). I tried using the @media-size CSS in my theme’s style file as well as WpTouch theme style.css but to no success.

    Perhaps you know what needs to be done for some DIVs to appear only on mobile and some to appear only on desktop?

    Thanks in advance,
    Matt

    • Swift theme a free wordpress theme has a widget having similar feature.You can look at it for implementation details

  2. I am trying to find a way to make the site logo larger with the Bauhaus theme – Simple theme doesn’t resize as much and looks better but Bauhaus anything I put up there looks tiny.
    Thanks for suggestions!
    Anne

  3. Hi, Im trying to figure out how to show archive listing in WPTouch(such as tag, date, author, category based listing) on Bauhaus theme, as when an address is called such as ../tag/whatever.. the desktop theme is loaded making the reading impossible and triggering a lot of mobile unfriendly pages errors in Google

Leave a Comment