How To Monetize Mobile Friendly WordPress Blog With WPtouch Plugin

In this Multi Screen age where 1320 new mobile web user gets online in every 60 second one cannot ignore the benefits of a mobile friendly site, If you go through Google Analytics for your site you will find that there is a great share of mobile users. It also depends on your blog’s niche, if your blog is related to mobile apps, image sharing,  mobile wallpaper or anything related to mobile then there are great chances that you will get large number of mobile audience and maximum view will come from mobile devices.

Mobile friendly site

So having a good mobile optimized website is beneficial in many aspect like-

  1. Mobile site loads faster than desktop site.
  2. Increased speed provide SEO benefits and higher search engine ranking.
  3.  Easy to navigate and use website.
  4. Improved Mobile user experience.
  5. Better ad serving.

Creating a mobile friendly site is easy for WordPress, you just need to install WPtouch Mobile Plugin,  however there are many plugins are available but WPtouch is the most used plugin to create such site, and it is most recommended plugin for mobile site.

Alright just go and install this plugin and you have to do simple settings, since there are two version of this plugin is available free and Pro. You need to install free one where few features are locked like extra themes, web-app mode and Advertising, you can get these features in pro version. ShoutMeLoud is currently using WPTouch pro plugin. Grab your license of WPTouch pro from here.

For bloggers like you and me the Main feature which is required is Advertising which is locked in free version however you will get every ads on mobile site which are in blog post but what about the other ad unit like header ads, sidebar ad or ads below the post ? Even if you upgrades to pro version you will  get ads only in header section.

How to Monetize WPtouch Enabled Blogs.

I assume that  you have installed the WPtouch mobile plugin from you dashboard and did the required setting and customization according to your choice, it contain only one mobile theme Bauhaus which is attractive in look and style, rest other themes in pro version are mainly used when you have a organisation’s website. The major focus here is to put ad codes in Wptouch theme.

1. How to Inject ad code in Header of your blog.

wptouch header ad

Having an ad unit  below the navigation bar in header area is always fruitful, since header ads are the first noticeable spot and there are greater chances to get click, nowadays nearly every smart phone has touch based navigation system, so keeping ad unit below Menu button can give extra click to ad unit.

Follow these steps to put ad into header :-

1. First you need to get access to your site back-end from any FTP client like FileZilla, Login to FileZilla using your FTP Credential.

2. Navigate to your site folder and follow this path –

 Site’s root directory/wp-content/plugins/wptouch/themes/bauhaus/default  as shown in the image below.

wptouch themes

Here you will get few php files you need to download header-bottom.php and single.php  on your desktop.

3.  First open header-bottom.php  using any text editor like Notepad or Notepad ++.

4.  Now you need to get Adsense code from your Adsense account, so which type of ad unit you are going to put in header? Is it going to be  Leaderboard, Mobile banner, rectangle or any other banner?  You are going to put ads in smaller screen where large banner will not show properly, and rectangle will look ugly in header.

So here is a better ad unit is available in Adsense which changes its height and width on different mobile devices and serve ads based on screen size and orientation ( Portrait and Landscape ) this is know as Responsive Ad Unit which is still in beta phase. So it is recommended to create a Responsive ad unit and get the Javascript code.

5. Now paste this Ad code in header-bottom.php file at the end of php code, see the image below.

responsive ad unit

after pasting the ad code  at the end of  closing PHP tag you need to add two extra line of code   and  in separate lines.

Save the file and do not rename it.

2. How to Enable Google Custom Search in header.

wptuch custom search

By default there is a tradition WordPress search box is present  in the header of bauhaus theme, which is a search dropper, prompt for search box when user touches the search icon. We are going to replace it with Google Custom Search box. Follow these steps to customize search box-

1. Get you JavaScript code ready for Google Custom Search, if your search box shows search result in new tab then wait, since mobile browsers are different from desktop browser where an auto pop-up or new tab is not easily noticeable which can distract users, so it is advisable that create a new Custom Search where it can show the result in same page.

2. Once again open header-bottom.php  file, and find the code  <div id=”search-dropper“> and delete code which is inside this division tag, lets elaborate using image-  (click on image to enlarge)

Google custom search in responsive site


As you see in above image you need to replace the highlighted code by Google Custom Search code. Save header-bottom.php file .

Seems confusing ? One can also get the modified header-bottom.php file here where you only need  to put your ad codes (Both responsive ad & Custom search) in mentioned area, just copy this code paste into notepad ++, put you ad codes in mentioned areas and save file as header-bottom.php

  Click to  Get Modified file

3. How to insert Ad code below the blog post.

There is option in WPtouch plugin where you can put any ad code which will execute in footer, this option is available in theme setting for WPtouch in WordPress dashboard.

But having a Ad unit in footer is not a good practice, so if you want to put ad unit below the post then follow these steps :-

1. Open single.php file using text editor, find the PHP code <?php get_template_part( ‘nav-bar’ ); ?>  and paste your ad code above it,  You can put Responsive ad unit, rectangle or mobile banner here, this ad will show below the post but in left, to align this ad into center you need to add your ad code within center align tag as-

<div align= “center”>

Your ad code here.


and at the last of php code add two more tag  and in separate lines.
wptoch footer ad AdSense

As in above image you can see that ad is inserted above <?php get_template_part( ‘nav-bar’ ); ?> within center align tag.

Again the modified php code is available here, copy and paste it to notepad++, put your ad code in mentioned area and save file as single.php

 Click to Get Modified file

After saving both header-bottom.php  and single.php file on your computer go to FileZilla and delete these two files from server and upload the modified files, once it is uploaded on server you will get your ads running on mobile site.

So here you will get following ad units in your blog-

  • Header Ad (Below navigation bar)
  • Google Custom search
  • Ads within blog post [ Both in desktop and Mobile version]
  • Ad below blog post.

Don’t forget to follow Adsense Policy for allowed ad units.

If your blog does not serve any Adsense ad in desktop version like ShoutMeLoud but you want to show in mobile version then follow all above steps plus you also need to inject ad within blog posts which you can do by putting the ad codes in page-content.php , I am skipping this part because most of you have ads enabled in blog post.

Since this mobile theme is modified by myself you won’t find any such method over internet,  If you want to review first before implementing in your site then you need to visit my Site on mobile device. Although my blog is quite new i have noticed increased CTR form mobile devices. Also if you get new updates for WPtouch do not update soon until it offers major changes, after an update you may need to perform above steps again. Feel free to comment if you face any problem during this process.

Check out WPTouch WordPress Plugin features

If you are monetising your mobile friendly WordPress blog with any other method, do let me know via comments. If you are an existing WPTouch user and found this tutorial useful, do give us a vote on Google plus and Facebook.

This useful mobile monetisation post is by Sandeep. If you would like to submit an original post on ShoutMeLoud, check our submission guidelines.

Subscribe on Youtube

Article By
Hi this is Sandeep a tech enthusiastic guy from india, i write on various technology, troubleshooting, Computer tips and tricks, I am trying to learns every kind of technology related topics and want to explore more in this field.


COMMENTs ( 8 )

  1. says

    Hmmm. Nice writing. So far I have not used this plugin. I am using fame themes snd that is already mobile friendly.

    Thanks for sharing anyway, it’s really an educative tips

  2. says

    This is exactly what I needed!
    And saves me $$$ from buying the Pro version of WPtouch that I don’t really need.
    But… on every plugin update the changes must be re-done.
    Did you find a way to customize the files with no override on updates?


  3. says

    I heard first time about WPtouch Mobile Plugin. Your tutorial and all the screenshots make it easy for me to install the plugin. Thanks for the great share.

  4. Sanusi says

    Sandeep Singh
    Thanks for put all this tutorials together,
    Have been using Mobilepress on my Blog but not really getting the best result.
    With this tutorials i will give try to WPtouch Mobile Plugin Pro, if i will get the best result

  5. says

    Hi Singh,

    This is a very impressive tips.. Actually I’av difficulties in monetizing the mobile view of my blog, Lately, I just got a nice theme for it, but I still need to move 4rm blogger to wordpress, then I would try your techniques in terms of monetization..

    Thanks for sharing anyway, it’s really an educative tips