Screen shot 2012-12-30 at 12.36.50 PM

Adding AdSense To Jetpack Mobile Theme Tutorial

If you are like me you are very meticulous about your mobile theme. There were a couple of items that I really wanted to change, including the “Powered by WordPress” (written in another tutorial) and lack of AdSense at the top of the blog when you view on a mobile device. After scouring the web I found a couple of tutorials, but none addressed this directly and it was fairly easy so I figured I would save you some time.

What you will need prior to starting;

 -Access to your site via FTP. You can accomplish this using FileZilla on Mac or Windows.-

***AS WITH ALL EDITS TO YOUR ORIGINAL FILES, PLEASE SAVE A COPY OF YOUR FILE PRIOR TO EDITING***

1. This was done using WordPress 3.5 and Jetpack 2.0+, but should work with older versions. You want to create an AdSense code unit that will appear correctly within the approx “280″ width of your site. The unit size that I thought worked best was the 200×90. If I used the 320×50 it looked great, but would stretch off the side a little too much. Below is the end result of the 200×90 size.

IMG_3690

2. Now you have your AdSense Code created. Next we have to edit the “header.php” in our Jetpack plugin where the menu ends. This is basically telling Jetpack to display the ad after the “Menu/Search” line in the picture above.

DO NOT GET DISCOURAGED THIS IS VERY SIMPLE. You need to find the file called “header.php” within the Jetpack folder on your site. The easiest way to accomplish this is to FTP connect to your site. Using what ever FTP client you wish, connect to your site and go to the following location;

/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven

Find the “header.php” file and download it or if you have the ability to edit it without downloading open it for editing.

3. With “header.php” open, find the line of code near the bottom of the file called “</div><!– .menu-search–>”. This is the code that ends the “Menu” when viewed on a mobile device. You can choose any location, but I really liked the way it appeared when placed here.After you find this piece of coding, press “enter” to create a space. It will look like this

Screen shot 2012-12-30 at 12.36.50 PM

Then you are going to type the following code;

<div align=”center”>

<!– google_ad_client = “ca-pub-5977414394989316″;
/* Mobile JetPack Insert */
google_ad_slot = “3211831109″;
google_ad_width = 200;
google_ad_height = 90; //–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>

The bolded code is code that you are going to replace with your Google AdSense code. I added a center statement so that the code appeared in the middle of the site.

4. Now save the file, and if you had to download it you will upload it back to the same location and replace your header.php file inside the Jetpack directory.

 

**This is my first tutorial. Please feel free to email/comment if you have any questions or concerns. I just thought that it would be useful for anyone who wanted to see an Ad at the top of their site after using Jetpack mobile.