How to Add Commercial Ads on WordPress Blog

web hosting solution






Requirements

Let’s say that you are ready to place commercial ads on your WordPress blog. If you have signed up for Google’s AdSense, you may have an ad code like the following.

WordPress place ad code

Let’s take a little closer look at the code. The width and height are 728 and 90 pixels, respectively. This ad size is known as Leaderboard. Before placing an ad code, you need to make sure at what size your ad will appear. More importantly, you need to decide where to display an online ad. Possible options you have are below header, sidebar and footer.

WordPress place ad code Another important thing to note is which WordPress theme you are using. The ad size you can deal with depends on how your theme is built. If you look at the style sheet (style.css), you can see the maximum width size you can use at the sidebar. For example, the style sheet of this WordPress theme is designed such that the width of the entire page is 900 pixels and the width of the sidebar is 220 pixels. In order to effectively use and control online ads, therefore, you need to have some knowledge about Cascading Style Sheet (CSS). But let’s see how far we can go without it.

Placing Ad Code

Let’s see how to place an online ad right below the header. You have to locate your theme folder at first. Go to wp-content > themes . Then open the folder of the theme you are going to work on. Next, open your header.php with a text editor. Let’s say you have the default WordPress theme. Scroll down all the way to the bottom. And you should find backslash div and hr backslash. That’s where you want to place your code. So give some space between those two lines. You may want to ad br before and after the ad code. And make sure that you enclose your ad code with div such that the ad will align to the center.

WordPress place ad code

WordPress place ad code WordPress place ad code

The WordPress sidebar is a little more complicated in adding an ad code. Let’s take a look at the default WordPress sidebar. Open sidebar.php. Basically, all you need to do is to see the pattern of li and backslash li. And there are some commands between these tags. Another pattern is a question mark no space php followed by a semi-colon and space with a question mark at the end. So decide where at the sidebar you want to place an ad and look for backslash li or the end of the other pattern. For example, if I want to display an ad below Categories, I should scroll down a little bit and give some space below “wp_list_categories.”

WordPress place ad code WordPress place ad code

You can also place an ad code at the bottom of the WordPress blog. Depending on the theme you have and how its style sheet is written, you can place an online ad before or after the footer. If you want to place an ad before the footer, you may have to revise your style sheet a little bit so that the whole WordPress blog looks properly.

Anyway, if you have the default theme, just open footer.php. You should find ‘wp_footer’ at the bottom. And just create some space below this line.

WordPress place ad code WordPress place ad code

Conclusions

In order to place online ads from Google or an ad exchange program, you may have to have some basic knowledge about CSS. Anyhow, you need to decide where to place an ad in the first place. And make sure that you have sufficient space at header, sidebar or footer for the ad you are going to display.

This entry was posted in Advertising for publishers, WordPress tips. Bookmark the permalink.

3 Responses to How to Add Commercial Ads on WordPress Blog

  1. Mark G. says:

    Great article. Couldn’t have used Google Adsense without it.

    Have trouble centering the Leaderboard; when I add it centers the entire page.

    Also not sure where to put the your article mentions.

    Would be great if you could add a screen shot showing both.

    To see my code and how my leaderboard is slightly off center (in IE6 and Firefox) you can look at CustomClothingStore.com. (Edited by the admin)

    Thanks again for taking the time to post this article.

  2. Mark G. says:

    the “bracket align” code centers the whole page

    the “bracket br” I don’t know where to place.

    The actual commands disappeared when I hit Submit Comment.

  3. admin says:

    1. >Also not sure where to put the your article mentions.

    It’s a relative old article, so explain to me what article to put, please.

    2. For centering an ad, use div tag. (REF: p=199, or see one of the screenshots right above the paragraph which starts with “You can also place…”)

    3. By the way, the top header image is simple but pretty. Nice work…

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment spam protected by SpamBam

Notify me of followup comments via e-mail. You can also subscribe without commenting.