How to Display Adsense Ads in the WordPress Index Pages for Fresh News by WooThemes – Part 1

This tutorial explains how to display Google Adsense Ads in your WordPress post index pages to generate revenue from this prime area of web page real estate.

Revenue Opportunity for Front- and Index Page Ads

I use the Fresh News 2.0.7 theme by WooThemes for the primary look and feel of www.handymanhowto.com and wanted to display the maximum allowed three (3) Google Adsense Ads on all my pages and articles, including the Front Page and Index Pages. All pages have a 300×250 Adsense ad in the sidebar which counts as one (1) Adsense Ad per web page. Individual articles (or single posts) contain two (2) additional Adsense Ads in the post body bringing the total number of ads for a single post web page to the maximum of 3 allowed by Google.

The problem is the Front Page and post Index Pages did not contain Google Ads in the page body because there was no plug-n-play or widget-based method in the Fresh News theme to include the Adsense code, leaving these frequently viewed pages with only the single ad in the sidebar. I was missing a revenue opportunity to display two additional ads on prime web page real estate.

The next image illustrates the solution with two 250×250 Adsense Ads displayed immediately after the Featured Posts for a total of three (3) Google ads on the Front Page.

Google Adsense Ads in the WordPress Page Index for Fresh News

Ads are displayed after the 2nd blog post on Index Pages for a total of three (3) Google ads per page as allowed by the Adsense program rules:

Google Adsense within Index Pages for Fresh News

Single post pages are unchanged by the Front Page and Index Page modifications.

Fresh News Theme Modifications for Google Adsense Ads

Before you begin, make a backup of your WordPress site because changes will be made to the Fresh News Theme source code files.

Step 1: Create a 250×250 pixel Google Banner Ad

• Log in to your Google Adsense Account at http://adsense.google.com.
• Go to Adsense for Content and create a square 250×250 Image Ad.
• Copy the Adsense Unit Code and save it a local file for later.

Here’s the Adsense code for my 250×250 image ad. Note that your publisher id will be different.

<script type="text/javascript"><!-- google_ad_client ="pub-2484226848394294";
/* 250x250, created 6/10/08 */
google_ad_slot = "8646292631";
google_ad_width = 250;
google_ad_height = 250; //-->
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Step 2: Edit your Cascading Style Sheet file:  style.css

New stylesheet properties are created to properly position the two Adsense ads. The center column is 580 pixels wide as found in the 960.css file: property .grid_10{width:580px}.container_16. (Firebug is indispensable for web page is forensics and analysis.) Careful measuring and testing finds that the Featured Post post excerpt div element is 542 pixels wide after allowing for margins. The style sheet pushes one ad to the left (float:left) and one to the right (float:right) of the 542 pixel wide x 270 pixel tall container.

To make the changes to style.css:

• Log in to your WordPress Admin Panel.
• Open the Theme Editor at Appearance → Editor in the left navigation menu.
• Open the Stylesheet file styles.css – it will be near the bottom of the right menu.
• Add the following lines of CSS code to the bottom of the file for the Google Ads.

/*==============  Featured Post Banner Ads  ===================*/
#featured_ads {
       width: 542px;
        height: 270px;
       overflow: hidden;
}

#featured_ads #banner_ad_left {
        float: left;
        width: 250px;
       margin: 10px;
}

#featured_ads #banner_ad_right {
        float: right;
        width: 250px;
        margin: 10px;
}

The new CSS lines are highlighted in this image:

Edit the Fresh News Style Sheet - style.css

• Click “Update File” to save your changes.

Here’s the CSS code snippet for the Adsense style additions: style.css Adsense enhancements

This tutorial is continued in Part 2.

Take care,

Bob Jackson

[ad#468x15 Link Unit Post End]

Be Sociable, Share!

• 

Copyright © 2013 HandymanHowTo.com   Reproduction strictly prohibited.