The AdSense-ready WordPress Blog (Part 4)
Note: if you like this post (and the others in the series), please take a moment to bookmark it on Digg, del.icio.us and other social networking sites you use. There are convenient links for Digg and del.icio.us at the bottom of the post…
Sorry for the delay in continuing this series, it's been almost two weeks I think since I posted Part 3. Be sure to read it and Part 1 and Part 2 before continuing.
Plugins
In this installment we're going to add some AdSense code to our WordPress blog. First, though, we should install some useful plugins.
A plugin is an extension to WordPress. Written in PHP, they are provided as a set of files that you install in the plugins subfolder of the wp-content folder. So your first job is to figure out where this folder is on your system, because you'll need to copy the plugin files over to it via FTP.
The easiest way to copy those files is via an FTP application. The one I recommend is the free FileZilla application, but there are other popular choices out there like CuteFTP. Or you can just do it at the command line if you're so inclined. I'll leave it up to you to figure out which client to use.
Plugins are usually distributed as a single ZIP file. You unzip the file into a folder on your desktop computer and use the FTP client to copy the files up to the site hosting your blog. Simple plugins often consist of a single PHP file and can be copied directly to the plugins folder. More complicated plugins with several files are usually stored in their own folder, and normally you copy the folder itself into the plugins directory — this is where an FTP application like FileZilla comes in handy because you can literally just drag and drop the folder from your own machine up to the website.
In any case, here are some plugins I recommend installing:
1. SimpleTags makes it easy to insert Technorati tags into your postings, either by surrounding individual words/phrases with “” and “” or by adding a “
” section at the end of the post.2. AdSense-Deluxe lets you insert AdSense ads into individual posts by inserting an HTML comment like <!–adsense–>. That inserts the default AdSense code, you can also insert named blocks of code using syntax like <!–adsense#halfbanner–>. Or you can insert the blocks directly into your page templates. We'll look at this one in more detail below.
3. Sociable automatically displays links to various social bookmarking sites (Technorati, del.icio.us, etc.) at the end of each posting.
4. Google Sitemap Generator generates a comprehensive sitemap of your blog. Use it with your Google Sitemaps account to ensure that Google is finding all of your posts from the beginning.
This just scratches the surface of available plugins, of course, and at some point you should spend some time seeing what else is available to enhance your blog.
Adding The Code
Now it's time to add some AdSense code. The first thing we're going to do is modify the page templates to add a horizontal link unit to the top of each page. You'll need to use the theme editor discussed in Part 3. Don't worry, this will be a very simple change!
You actually need to change three templates. Let's start with the page template. In WordPress parlance, a page is a non-blog HTML page. A blog's About page is a typical example — see this one. Notice the horizontal link unit immediately below the header? That's what we want to do.
Login to the administration console for your blog, click Presentation and then Theme Editor. From the list of templates on the right click on Page Template. What you see should look like this:
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entrytext">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Again, this may look complicated, but it's not. The part you want to focus on is the second line, the first div tag. This defines the part of the web page where the WordPress page contents are found. Insert the AdSense code right after this line so that the template looks something like this:
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<div style="width: 468px; padding-top: 1em; padding-bottom: 1em;">
<script type="text/javascript"><!--
google_ad_client = "pub-5964030199537728";
google_alternate_color = "FFFFFF";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al";
google_ad_channel ="1500227689";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entrytext">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
If you look carefully, you'll see that I wrapped the AdSense code in another div tag. This is to add some padding above and below the link unit. It's usually a good idea to wrap your AdSense code in a div like that so you can position the ads perfectly within your layout.
Now do you see why in Part 3 we increased the size of the narrowcolumn CSS style to 468 pixels? It's so we could match the size of the link unit.
Another alternative would be to use the larger horizontal link unit size (728 pixels) and put the link unit at the very top of the page, in which case you'd need to modify the Header template. You could also place the link unit right in the heading box itself provided you weren't using a gradient background, since AdSense only supports solid colors for ad and link unit backgrounds.
You would make similar changes to the Single Post and Main Index Template templates, inserting the AdSense code immediately after the topmost div tag in each template.
Using AdSense-Deluxe in Templates
An alternative to manually inserting the AdSense code in three different places is to let the AdSense-Deluxe plugin handle it. You first go to the AdSense-Deluxe configuration page (you'll find it under the Options tab once you've activated the plugin) and configure an AdSense block with the link unit code. Let's call it “narrowlinks”. In the three templates, add this code immediately after the first div tag:
<?php if( function_exists('narrowlinks') ) :
adsense_delux_ads('narrowlinks'); endif; ?>
Then whenever you change the link unit code on the AdSense-Deluxe options page your changes will immediately propagate to the pages that use that block of code.
At this point you'll have a blog that displays a horizontal link unit on most pages. Next time we'll look at getting the AdSense to display within individual blog posts.
Sponsored Link: Free keyword tools are available at Secret Page Spy. Join now (it's free) and you also get a copy of AdSense Money Machine, an e-book about AdSense, and a bunch of other books and software.
Eric Giguere is the contextual advertising expert who wrote Make Easy Money with Google and Uncommon AdSense.
 |
Enjoyed this post? Get free updates by mail or by RSS! |
Socialize This Post (Please!)
Tags
If you found this page useful, consider linking to it! Simply copy and paste the code below to your website. The link will look like this: The AdSense-ready WordPress Blog (Part 4)
Comments
3 Responses to “The AdSense-ready WordPress Blog (Part 4)”
Where did the AdSense-Deluxe plugin go? The link is dead now.
I finally took da plunge + did a WordPress Blog*
Picking out the theme was no EZ chore + now the Hard Work begins!!
This will really be a big Help to me tho!!
Cheers E! Billy ;))
Dara, I don’t know what’s happened to the plugin’s site, it looks to be down completely right now. Send me mail and I can mail you the version I have sitting here on my computer.
Billy, glad to see you starting down the WordPress path… yeah, picking a good theme is always a pain, but in the end it’s worth it.