Summary of Code Changes to index.php

The index.php file is the theme template that displays the Featured Posts and Post Summaries (Excerpts) to paint the body of the Front Page and Index Pages. Source code logic is added to index.php to display the Google Adsense Ads at the appropriate position in the summaries and only once per page to stay within the maximum of 3 ads per web page.

First, a new variable is created to ensure the Adsense Ads are display only once per page at line 27:

<?php $BannerAdsDisplayed = FALSE; ?> <!-- Boolean to show featured banner ads only once. -->

The main code for the Featured Banner Ads – this is how I described the new feature in the php comments – is on lines 61 to 99:

           <!-- Featured Banner Ads 250px x 250px -->
           <?php if (($BannerAdsDisplayed == FALSE &amp;&amp; !$is_paged) || /* show on main page after featured posts */
                     ($is_paged &amp;&amp; $postcount == 3)) /* show after the 3rd post on index pages 2 and greater */
           { ?>
           <?php   $BannerAdsDisplayed = TRUE; ?>
              <div class=&quot;box&quot;>
                 <div id=&quot;featured_ads&quot;>
                    <div id=&quot;banner_ad_left&quot;>
                       <script type=&quot;text/javascript&quot;><!--
                           google_ad_client = &quot;pub-2484226848394294&quot;;
                           /* 250x250, created 6/10/08 */
                           google_ad_slot = &quot;8646292631&quot;;
                           google_ad_width = 250;
                           google_ad_height = 250;
                           //-->
                       </script>
                       <script type=&quot;text/javascript&quot;
                           src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;>
                       </script>
                    </div>
                    <div id=&quot;banner_ad_right&quot;>
                       <script type=&quot;text/javascript&quot;><!--
                           google_ad_client = &quot;pub-2484226848394294&quot;;
                           /* 250x250, created 6/10/08 */
                           google_ad_slot = &quot;8646292631&quot;;
                           google_ad_width = 250;
                           google_ad_height = 250;
                           //-->
                       </script>
                       <script type=&quot;text/javascript&quot;
                           src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;>
                       </script>
                    </div>
                 </div> <!-- featured ads -->
              </div> <!--/box -->
           <?php
           } ?>	<!-- if($BannerAdsDisplayed...) -->

           <!-- Featured Banner Ads Ends -->

Disable the Post Date Display

I’ve disabled the post date display on all my posts purely as a matter of personal preference - see lines 38 to 42 and 106 to 110. If you want the post date to be shown as usual, simply uncomment these lines. Either way, this change is unrelated to the Google Adsense enhancements and has no impact on the Ad display logic.

<?php
/************* suppress the date display on posts
<p class=&quot;fl&quot;><?php the_time('j. F Y'); ?></p>
*/
?>

and

<?php
/************* suppress the date display on posts
<p class=&quot;fl&quot;><?php the_time('j. F Y'); ?></p>
*/
?>

Now let’s make the changes to index.php.

Edit index.php

If you haven’t already made a backup of your WordPress database, please do so now. If you make an error in the edits to index.php it can possibly make your blog unreadable.

The following instructions assumes you’ve not made any customizations to index.php and you’re using Fresh News v2.0.7. If you’re using a different version or have made other customizations, you’ll need to “stare and compare” and merge the Adsense code enhancements using your judgment.

• Log in to your WordPress Admin Panel.
• Open the Theme Editor at Appearance → Editor in the left navigation menu.
• Open the Main Index Template file index.php by clicking on it in the right menu.
• Right click in the editor and choose Select All.
• Right click and choose Cut. The content of the Theme Editor is now empty.
• Open Notepad or your favorite text editor and paste the contents of index.php into notepad. Now save this original copy of index.php to your local computer just in case you need to recover the original version (this will be quicker than restoring the site backup.) Alternately, use File Manager in cPanel and/or save a copy using FTP.

Theme Editor - Main Index Template: index.php

• The full source code for the Adsense enhancements is here: index.php
• Paste the upgraded index.php code into the Theme Editor.
• Replace my Adsense 250×250 code unit with your Adsense code on lines 69 to 79 and 82 to 92 as highlighted:

           <?php   $BannerAdsDisplayed = TRUE; ?>
              <div class=&quot;box&quot;>
                 <div id=&quot;featured_ads&quot;>
                    <div id=&quot;banner_ad_left&quot;>
                       <script type=&quot;text/javascript&quot;><!--
                           google_ad_client = &quot;pub-2484226848394294&quot;;
                           /* 250x250, created 6/10/08 */
                           google_ad_slot = &quot;8646292631&quot;;
                           google_ad_width = 250;
                           google_ad_height = 250;
                           //-->
                       </script>
                       <script type=&quot;text/javascript&quot;
                           src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;>
                       </script>
                    </div>
                    <div id=&quot;banner_ad_right&quot;>
                       <script type=&quot;text/javascript&quot;><!--
                           google_ad_client = &quot;pub-2484226848394294&quot;;
                           /* 250x250, created 6/10/08 */
                           google_ad_slot = &quot;8646292631&quot;;
                           google_ad_width = 250;
                           google_ad_height = 250;
                           //-->
                       </script>
                       <script type=&quot;text/javascript&quot;
                           src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;>
                       </script>
                    </div>
                 </div> <!-- featured ads -->
              </div> <!--/box -->

• Click “Update File” to save.

Test the Adsense Upgrade to Front Page and Index Pages

In a new web browser window, open your web site and confirm the two Google Adsense Ads are displayed after the Featured Posts on the Front Page, and after the 2nd post summary on the following Index Pages.

If something doesn’t look right, just paste the original source code back into index.php and save to restore the original look and feel.

Track the Performance of the new 250×250 Page Ads

If you’re interested to know how well the new Adsense Ads are performing, log in to your Adsense Account and create a custom channel to track the performance of the new ad units.

Hope this helps,

Bob Jackson

Bookmark It!

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

Bookmark It!