The AdSense-ready WordPress Blog (Part 3)

And so we continue our series on creating an AdSense-friendly blog using WordPress. (Is anyone finding this useful?) Please read Part 1 and Part 2 before continuing.

Editing the Theme

The blog is up and running, but there are some things we need to change about the way it looks and behaves before we start posting. And before we add any AdSense code.

A WordPress blog's look and feel is controlled by its theme. A theme is the set of HTML pages, CSS stylesheets and images that define the blog's presentation. Changing the visual appearance of the blog is done by editing the theme.

Instead of modifying the default theme, you can actually download alternate themes that others have created and use them instead. But you'll probably want to change the theme anyhow, so you might as well learn how to do it using the default theme.

To edit the theme, login to the adminstration console and click on Presentation and then on Theme Editor:



On the right side of the window you'll see the list of files that make up the theme, starting with the stylesheet. You can click on any of the listed files to edit the corresponding code in the big text area on the left side of the screen:



Just remember to press the Update File button to save any changes you make to a file before moving on to the next file.

PHP Files

All files except for the one labeled Stylesheet are a mixture of HTML tags and PHP commands. PHP is a programming language, but you don't need to know PHP in order to make small changes to a theme. The important thing to remember in these files is that special tags are used to separate PHP commands from the HTML. Each PHP command begins with this tag:

<?php

and ends with this tag:

?>

For example, here's a nested list whose list items are
obtained from a database via some PHP code:

<li><h2>Archives</h2>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
</li>

If you're not a programmer, avoid changing any of the PHP code. But the HTML code is fair game to change.

Changing the Title

By default, the page titles for individual blog entries looks like this:

Reviewing Digital Cameras » Blog Archive » Hello World!

We don't really want the “Blog Archive” fragment in there, we just want the name of the blog and the title of the post. So in the theme editor we click on Header and look for the <title> tag. Here are the lines we need:

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?>
<?php wp_title(); ?></title>

This may look somewhat intimidating, but it's actually not that hard to understand if you look at it closely. All we need to do is change it to this:

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

Don't forget to press the Update File button after making the change.

Adding Section Targeting

The next thing to do is to add section targeting commands to emphasize specific parts of the pages for analysis by the AdSense crawlers.

Click on Main Index Template and find this code fragment:

<div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>"

Insert the google_ad_section_start command in between the <div> and <h2> tags:

<div class="post" id="post-<?php the_ID(); ?>">
        <!-- google_ad_section_start -->
        <h2><a href="<?php the_permalink() ?>"

Now find the matching </div> end tag and insert the googl_ad_section_end command right before it:

  <!-- google_ad_section_end -->
  </div>

Now repeat this process with the Page Template, Single Post and Archive pages — basically anywhere that a <div> of class “post” is found. Don't forget to save your changes as you make them.

Adjusting the Width

Now make a small change to the stylesheet. Click on Stylesheet and search for the “narrowcolumn” and “widecolumn” classes:

.narrowcolumn {
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 450px;
	}

.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
	}

Change the width in both cases from 450px to 468px, for reasons that will be evident later. Again, save your changes.

That's all for this installment. Next we'll look at adding the AdSense code to the blog.

Sponsored Link: Learn how to create e-book covers with your paint program.

Eric Giguere is the contextual advertising expert who wrote Make Easy Money with Google and Uncommon AdSense. You can read this blog by mail if it's more convenient for you, just send a blank email to memwg-blog@aweber.com to subscribe.

Socialize This Post (Please!)

Add to OnlywireAdd to Onlywire

Tags

Comments

2 Responses to “The AdSense-ready WordPress Blog (Part 3)”

  1. Dara on August 19th, 2007 3:52 am

    I’m trying to add section targeting to the Archives. Neither of the Archive pages have a div with class ‘post’. Should I use the div with class ‘content’ in this case?

  2. Eric Giguere on August 19th, 2007 6:56 am

    Yes, that will generally work. Themes vary a lot, but most of them have a “content” div where the content will be generated.

Subscribe without commenting