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>
  • 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">
    <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" />
<script type="text/javascript"

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.
READ  6 less known but useful WordPress features

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.

READ  How to hide SyntaxHighlighter Evolved plugin meta tag

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 comments WPTouch theme customization

  1. 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

  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!

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

  4. 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,

  5. hi esha,
    thanks for your wptouch tutorial.
    i want to ask.
    In this tutorial, you modify some files in themes folder. If there is some themes update, will i lose all my job during updating themes??why did you not use child themes??can i modify my child themes only??

    thanks, sorry too many questions 😉

  6. Foundation is the core on which wptouch themes are created.Bauhaus is the theme created on top of it.So you can modify the core and the changes should get reflected in the bauhaus.

  7. Hi Esha,
    Thanks for the information.
    I’ m using wptouch 3.1.9. In this route : /wp-content/plugins/wptouch/themes appear two folders: “bauhaus” (default theme of WpTouch free plugin without updating to Pro version) and “foundation” folder. I’m modifying archives inside “Bauhaus” because is the theme I want to use, but there is not an index.php file. Otherwise, in “foundation”folder there is an index.php but any modification is not displayed. What archive I must modify or where is index.php of “Bauhaus” theme? I search in all sub-folders but I can’t see it.
    Thanks for all,

  8. You can have a function in functions.php file which adds Adsense after N number of posts (based on counter values).This counter needs to be initialized in index.php just before content div.The function should be called from post-loop.php (after or before excerpt depending upon the need). Hope this helps.

  9. Hi,
    Thanks for reply Esha.
    Yes, I tested in post-loop.php but the problem is that ads are shown below every title (for example) and I want to shown every “x” titles because if not, all titles have an ad below and only 3 adsense ads can be shown by politics. I have a counter variable for posts and I can´t find the way that this counter increments , all posts are showing the same number. Any idea what to do? Maybe with a while or do while function?

  10. Hi,
    Excellent post. I have already installed the WPtouch and I have retouched the single.php, but now I would like to show ads in the pages of tags, categories and index. For desktop themes there is no problem in using a php code infiltrated on the original WordPress loop which prints ads every “x” posts. I’ve been testing in the post-loop.php of WPtouch but can not find a way to make it recursive, always lists entries with the same number.
    Any idea how to do it?
    Thanks in advance!

  11. Twenty twelve is responsive theme..Any theme which is responsive will be displayed well on both mobile as well as desktop.It is better to use responsive themes instead of plugins.Plugin usage is recommended if your desktop site is too heavy and you want lean website for mobile (as mobile is slow) else there is not need of plugins.

  12. Namaste Eshaji,
    I am using twentytwelve child theme.
    For mobile today I uploaded the
    mobile wiziapp smooth touch theme. It requires
    wp-mobile-switcher plugin.

    Most people in India use mobile handset.
    I wish the website be displayed flawlessly on any (Indian) mobile handset.

    Is my choice correct?
    Do you know of a better alternative?
    I will appreciate your thoughts on this.

    Ashok Koparday

  13. Hello and thanks very much for this helpful post.

    I have a problem with my installation and wptouch and i cant find anywhere a answer.
    I have a custom post type “recipe” registered in my theme. Latest wptouch has option for CPT but many users cant make them show because the check box is not working.

    Can you explain how to make wptouch “understand” the CPT ?

  14. I feel very happy whenever i see a Indian girl with good knowledge of blogging any internet world. Well as about Wptouch customization; please also add about ad management in your post….

  15. Esha, Thank you for this post. Made it very easy for me to remove the date and author information from my posts. Thanka again.

Leave a Reply

Your email address will not be published. Required fields are marked *