I use the Fresh News Theme by WooThemes for the overall look and feel of HandyManHowTo.com. Several people have asked me “How did you integrate Google Adsense into the Fresh News Theme 300×250 Block Ad in the Sidebar?“. An example is the “Zoom Plumbing” Google Ad in the screen grab below.
HandymanHowTo.com with 300x250 Google Adsense Ad in Sidebar
Here’s how to do it…
Create a 300×250 Google Adsense Unit
- Log into your Google Adsense account.
- Create a text and image, square, “300×250 Medium Rectangle Ad”.
- Copy and save the AdSense Unit Code. The code for my 300×250 ad is:
<script type=”text/javascript”><!–
google_ad_client = “pub-2484226848394294″;
/* 300×250, created 10/11/08 */
google_ad_slot = “9756119931″;
google_ad_width = 300;
google_ad_height = 250;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
Fresh News version 2.x Instructions
WooThemes made it really easy to create a sidebar banner ad in Fresh News version 2.x with the new WooTheme framework. Scroll down for the Fresh News version 1.x instructions if you haven’t upgraded to 2.x.
Step 1: Log into to the WordPress Admin panel.
Step 2: Click the blue “Woo” icon on the left navigation menu.
Step 3: Click the “Banner Ad Sidebar – Widget (300×250).
Step 4: Paste your 300×250 Adsense Unit Code into the box as shown:
Woo Themes - Banner Ad Sidebar Widget 300x250 Adsense Code
Step 5: Click “Save All Changes”.
Step 6: Under the Appearance menu on the left nav bar, click Widgets.
Step 7: Click and drag the “Woo – Ad 300×250″ widget to the side bar as shown.
Woo Ad 300x250 Sidebar Widget - Google Adsense
And that’s all! You now have a Google Adsense 300×250 ad in your Fresh News theme sidebar.
Fresh News version 1.x Instructions
These instructions are for the Fresh News version 1.x only.
Edit ads-300×250.php
WooThemes executes the PHP code in the ads-300×250.php file to paint the content of the 300×250 pixel block ad in the sidebar. The file is located in the
/public_html/wp-content/themes/freshnews/ads
directory on your website.
- Make a backup copy of the ads-300×250.php
- Edit ads-300×250.php
- Replace the content of the <div id=”mpu_banner”> …. </div>
in both places of the file with your Adsense Unit Code.
Original Code Block
<div class=”box2″>
<div id=”mpu_banner”>
<?php
// Get block code //
$block_img = get_option(‘woo_block_image’);
$block_url = get_option(‘woo_block_url’);?>
<a <?php do_action(‘woo_external_ad_link’); ?> href=”<?php echo “$block_url”; ?>”><img src=”<?php echo “$block_img”; ?>” alt=”" /></a>
</div>
</div>
Google Adsense Code Block
<div class=”box2″>
<div id=”mpu_banner”>
<script type=”text/javascript”><!–
google_ad_client = “pub-2484226848394294″;
/* 300×250, created 10/11/08 */
google_ad_slot = “9756119931″;
google_ad_width = 300;
google_ad_height = 250;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script></div>
</div>
The original and changed source files are here for comparison. I’ve renamed the files to a .txt extension to prevent WordPress from executing the files when clicking on the links.
Default theme file: ads-300×250-original.php
Google Adsense file: ads-300×250.php
Good luck with your website!
Take care,
Bob Jackson
Copyright © 2012 HandymanHowTo.com Reproduction strictly prohibited.
Hey there,
Thanks for your article! This is a great little tutorial and has helped my site a lot!
Thanks
Thanks a lot, just what I was looking for