How to add an advertisement banner or ad block inside your wordpress header the easy way

I just came across a website earlier today that gives simple instructions to add a banner or ad block positioned to the right inside your header (not under or over). This method will work with any template including ones created in Artisteer. There is no need to change any transparacy.

You will only need to do a slight modification in 2 separate template files which are header.php and style.css. 

Within these instructions, we will make a back up copy of everything so if something goes wrong, we can revert back to the previous state.

We will use an Artisteer created template as an example…

Step 1.

Click on the appearence tab in the left column within your admin panel. Next, click on the editor button. You will now see “Edit Themes” at the top of your page.

Step 2.

Now look under templates in the right hand column. Scroll down until you see “Stylesheet” (underneath it will say style.css) and click to open. At this point if you want to be safe, go ahead and make a copy of all the code from the stylesheet and save it to notepad on your desktop (incase you have to go back to the original file). If in the event you did make a mistake, all you have to do is replace the code with the code you saved to notepad.

Step 3.

Add the following line of code to the very bottom of the style.css file within the wordpress editor…

.ads {float: right; margin-top: -95px; margin-right: 10px; }

Click update at the bottom to save changes.

4. Look to the right under Templates again. Locate “Header” (called header.php) and click to open. At this point, you can copy all the code and save to notepad (just like the previous step) incase you make a mistake.

5. Scroll down the header code within the wordpress editor and look for where it will display your blog title and description. In the case of Artisteer, it will look like this…

<div>
    <h1 id=”name-text”>
        <a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
    <div id=”slogan-text”>
        <?php bloginfo(‘description’); ?></div>

Just below this code, you insert the following code…

<div class=”ads”>

Adsense (or other advertisement) script goes here

</div>

Click update at the bottom to save your changes.

6. Open up a new browser, access your website and check your ad or banner placement. You may need to adjust the top and right margins you just entered in your style.css file. If your template was made with something other than Artisteer, your code will look a little different as far as the insertion point goes. The key is, you want to place the <div class=”ads”> tag underneath the closing tag </div> of the blog’s title.

In addtion, the placement in the .css file (margin-top: -95px;) is set to fit the standard fat Artisteer header. If you have a more skinny header, you will need to change this number more in a positive direction (i.e. margin-top: 40px). The right margin should be good the way it is. Also note, you may have to create a new banner or ad block that will fit if your banner doesn’t give much room or has too much room horizontally.

If you would like to understand more of the mechanics as to how this works, please check out this well written article by Costa from BloGigs.com, “How to Add a banner in your WordPress Header.”

Share This Post

493 Responses to “How to add an advertisement banner or ad block inside your wordpress header the easy way”

Leave a Reply

You must be logged in to post a comment.

Switch to our mobile site