Once you have your WordPress site up, it is natural to want to have it "pay you back" and WordPress permits easy inclusion of advertising. Remember, adding advertising code is no different in principle from adding other code, such as Podcasting or Buttons and Icons. You still need to use the basic tools of valid XHTML and valid CSS. Of course, it helps to start with valid code before adding advertising.
Your first step in adding Ads to your WordPress blog should be to familiarize yourself with the available advertising options. You should look at the types of ads and the revenue models to determine which is most compatible with your blog. You will want to examine the pros and cons of the various methods of integrating ads into your blog and understand the issues they may create. After you have determined the types of ads, you'll be ready to work on placing ads in the blog.
There are different models for "making a sale" and revenue for website advertising. They include:
Advertisers have several different ways of including ads in websites. For all of these methods, the biggest concerns are style and validation. The ads need to work within your WordPress Theme and changes to the Theme can create validation errors. After adding a new advertising program, your first step should be to revalidate. Your next step should be to check your blog, preferably in multiple browsers to ensure that the HTML in use works within your WordPress Theme.
The different ad integration methods include:
Once you have lined up advertisers, you are now ready to begin placing the code in your blog.
Start with a clean slate. Solve any other issues your blog may have before you start adding advertising code. Looking through the Support Forums, you may see questions related to a specific ad program. Remember that many of the principles will be the same for any program that uses similar methods (i.e. Javascript) to place the ads on your site.
You can place ads directly in your Template Files or there are Plugins available to help with placing and managing advertising code.
Familiarize yourself with the specific Template Files you intend to modify before you start adding advertisement code.
When editing Template Files to include advertising code either use the Theme Editor in the Administration_Panels or use a plain text editor.
Some HTML and text ads can be aligned horizontally using the text-align CSS property. More complicated issues of alignment and position within the various template files can be solved using proper CSS styling.
Again, always check and validate your site after each change, preferably in multiple browsers. It is much easier to solve one problem at a time than to wait until they accumulate.
Some Themes will allow you to place ads (or anything) in the header template file easily. The ads are added to the header.php template file. If your Theme creates the header using a <div> or <span>, you can usually place your ad code inside that and have it appear in the header. In the following example, the ad will appear just under your blog name:
<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
<<ADD ADVERTISING HERE>>
</h1>
Other Themes, often based on the Default WordPress Theme, create the header by assigning the header class/id to a headline tag that is wrapped around the title. If your Theme does that, you will likely need to place the advertising code below the Header in the content or comparable section.
<div id="header">
<div id="headerimg">
<h1>
<a href="<?php echo get_settings('home'); ?>">
<?php bloginfo('name'); ?></a>
</h1>
<div class="description">
<?php bloginfo('description'); ?>
</div>
</div>
</div>
<div id="content">
<<ADD ADVERTISING HERE>>
Play around with the placement to get it in the appropriate place dependent upon your header design and layout. Be sure and validate your page afterwards to ensure the placement works.
You can add ads to the sidebar by editing the sidebar.php template file. The standard WordPress sidebar template file features a complex nested list, so take care not to disturb the nest. You can carefully integrate ads into the list, or restructure the list to remove the nesting feature if the ad's code interupts the list format. Or add the ads to the top or bottom of the nested list, skipping any possible coding conflicts. To include the code inside of the list, you may need to put your advertisers code between a pair of <li> </li> tags or your page will not validate and may not look right. For example, you may want to include an ad between the Pages and Archives in your sidebar:
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
<li><<ADD ADVERTISING HERE>></li>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
Multiple and single page views use different template tags to generate the "content" section of a web page in WordPress. All may be generated with the index.php template file, or only multiple post views will use it while single post views will use the single.php template file. If you want ads to appear on these different views, check your WordPress Theme to find out if your Theme uses different template files to display the different web page views.
In general, look for the WordPress Loop as your focal point for placing the ads. It begins with code that looks typically like this:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Placing code just after this will generally place the advertising above each post's content. On multi-post views, the ad will be generated at the top of each excerpt or post, such as on the front page. On single post views, the ad will be at the top of the post.
The the_content() is the template tag that returns the post content. Placing advertising code just before or just after this will put your code as close as possible to the "guts" of the post.
<div class="entry">
<<ADD ADVERTISING HERE>>
<?php the_content('Read the rest of this entry »'); ?>
</div>
The Comment code at the bottom of the posts produces the link to the Comment page. Place your advertising code just before this to have it appear ahead of the Comment link.
For standard comments, to place your ad just over the comment link look for something like this:
<<ADD ADVERTISING HERE>> <a href=">?php comments_link(); ?>">Comments to this post</a>
If you use popup comments:
<<ADD ADVERTISING HERE>>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
Placing ad code on the Comment Page is an effective way to get an extra ad without violating your program's TOS agreement, limiting the number of ads per page. To add comments to your comment section, on the single post view or popup comments page, comments.php or comments-popup.php such as:
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<<ADD ADVERTISING HERE>>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?
redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"
method="post" id="commentform">
This example will place the advertisement just below the "Leave a Reply".
Some advertising programs limit the number of ads per page, so you may need to only include ads after the first (or second or third) post. Here is an example:
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<?php $postnum = 1; $showads = 1; ?>
<?php endforeach; else: ?>
<?php if ($postnum == $showads) { ?> <<ADD ADVERTISING HERE>> <?php } $postnum++; ?>Here is a simple example. It will show ads after the 5th post of a page.
<?php $postnum = 1; $showads = 5; ?>
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<?php the_content(); ?>
<?php if ($postnum == $showads) { ?> <<ADD ADVERTISING HERE>> <?php } $postnum++; ?>
<?php endforeach; else: ?>
There are no posts!
<?php endif; ?>
Before placing ads in Feeds, check your advertising program's TOS as some advertisers do not allow this. Two options for placing ads in Feeds are Kanoodle, which produces a substitute feed including contextual ads, and Feedburner, which produces a substitute feed that can include context sensitive ads and automatically insert your Amazon Associates ID into existing links to Amazon products.
Placing ads in individual posts can be done by simply including the code in the post in some cases. To include ads powered by PHP will require a plugin to allow the code to be executed. RunPHP and PHPExec let you embed dynamic PHP code and PHP based advertising in individual posts. To use Javascript-based ads in individual posts, see Using Javascript.
You may want to use some simple CSS to wrap the post around your advertising. In this example, the ad will appear in the upper right of each post, with the post text wrapped around it.
<div style="float:right; margin:2px;"> <<ADD ADVERTISING HERE>> </div>
Of course, you can also create styles for ads in your stylesheet.
There are a variety of WordPress Plugins that can assist you in adding advertising to your WordPress site. For a general list of all of them, see the Advertising Plugins List.
If you are having trouble with your ads, here are some possible solutions.
In many cases it has nothing to do with WordPress, but here are a few things to remember or questions to ask yourself:
Context sensitive ads spider your site and index the keywords. If your site is heavy on words and links related to blogging, you will get lots of ads related to blogging. There are two things you can do to improve this. First, eliminate unnecessary blogging references. Second, make longer, keyword rich posts. Posts over 250 words tend to produce better context sensitive ads.
If you are using Google's Adsense and having this problem, you may be able to see some improvement by using section targeting.
If you find you are getting different ads at example.com/index.php than from the URI example.com, this issue with context sensitive ads may be because the search engine reads these as two separate URLs and may index them on different days.
The URL with index.php may be read by the search engine more or less often than the same page without the index.php. Once both are properly indexed, the ads should match -- at least for a while. The only solution, other than time, is to do everything you can to eliminate the use of the index.php in links, etc. A similar situation can occur with www.example.com reading differently than example.com without the www.
These issues are generally related to XHTML and CSS validation. Check that your site validates as there may be a lost or unclosed tag.
Internet Explorer is not 100% standards compliant, so even if everything validates, you can still have problems. You may want to look at CSS Fixing Browser Bugs and you may also want to consider using conditional style sheets to direct Internet Explorer to its own stylesheet.