How to Place an Ad Banner Above the Header in WordPress

| April 30, 2012 | 0 Comments More

You have probably seen website and blogs that have a large ad banner at the top of the page above the site header. Above the fold ad placements, especially full size banner ads, typically perform very well. So, how exactly can you do that with your WordPress blog? Let’s take a look at a couple ways to get the job done.

First we’ll look at the quick and dirty way to accomplish the task. This may work just fine for you depending on your theme, but as we’ll see later, a different approach using a bit of CSS may be the preferred way to go.

Method #1

Open your header.php file. You can do this by either downloading the file from your host via ftp, or by using the WordPress editor. We are going to use the WordPress editor for our example, you may want to download a copy of the header.php file from your web server as a backup, just in case you accidentally mess something up.

The Editor can be found under Appearance > Editor in the WordPress back end. Next, select the header.php file found in the templates list along the right side of the screen.

wp-8 wp-10

Find the closing head tag ( </head> ) Below this tag, type in the following HTML code.

The div tag creates a block level element to hold our banner ad code. The align=”center” will, as you might expect, center the ad banner on the screen.

Now you want to copy and paste your banner ad code in between the opening and closing <div> tags. This ad code can be AdSense, Amazon, or any other ad or affiliate code you may wish to use. For our example, we’ll use a generic Amazon banner code.

Don’t forget to select “Update file” at the bottom of the Editor when you are finished.

wp-11

Now, refresh your site and check your banner ad. (Note: If you are working with an AdSense ad that you just created, it may not show up for 10-15 minutes.) You’ll likely find your ad directly up against the top of the screen which not be the desired effect.

wp-1

To put a little space between the banner ad and the top of the screen, add a <br /> tag before the opening <div> tag of your ad code and hit “Update File” again.

wp-3

Now you should see some space above the ad banner.

wp-2

If everything looks good, you’re done. As you can see from the example above from the default WordPress Twenty eleven theme, there is quite a bit it of space below the ad. If you aren’t quite pleased with the way the ad is displayed, try Method #2 below that utilizes some CSS.

Method #2

Just as we did in the first method, open your header.php file, and find the closing head tag. </head> We’re going to place the code directly after this closing head tag.

Once again we’ll use a <div>

tag to wrap around the ad code. In this example, however, we’re going to give the <div> a name so that we can reference it directly with CSS to fine tune the positioning. Leave a single space after the <div and type id=, then open quotes, a name for the div tag, close quotes, and the >. Be sure you include the closing </div> tag after the ad code. Don’t choose a name with any spaces. Save the changes by clicking “Update File.”

Now we can refer to the this <div> in the css and position it the way we’d like. From the WordPress editor (Appearance > Editor) look for your Stylesheet (style.css) file.

(Note: If you use a premium theme, and this method doesn’t work for you, refer to the web developer to find out which CSS file you need to edit. Some themes may have a custom.css or some other css file(s) Also, if you are using FTP to upload & download your files, ask the developer where your particular CSS file resides in the file structure.

wp-5

At the very bottom of the CSS file, place the code below. Instead of adheader, use the name you used for the ad code div in the header.php file.

The first line is merely an CSS comment. This reminds you what exactly the code is in case you ever need to make changes and can’t recall the purpose for the code. The /* and */ indicate the beginning and ending of the comment. Just be sure you don’t leave out that closing */, or you will “comment out” all your code and it won’t work.

The code in brackets after your #adheader is the CSS. The width property (as you would expect) sets the width of the div tag, which is the size of the ad banner. (If your ad banner is bigger or smaller, change the 728px to the size in pixels)

Set the margin-left and margin-right attributes to auto so they are automatically centered on the page.

wp-12

Finally, we’ll adjust the top and bottom margins to fit our needs. For our purposes, we’ll add a margin of 5 pixels to the top of our ad banner.

Now we have a little bit of space between our ad and the top of the screen, but you see we still have a lot of space below the ad banner.

wp-13

To get rid of that unwanted space, we’ll use negative margins to remove some of that space below the ad. Of course, your theme may be different and you may need to use regular (positive) margins to add spacing. Feel free to play around with the numbers to see what best fits your theme.

After applying the changes, you see the space is gone from below the ad. As we mentioned, feel free to play around with the margin settings to get the perfect look for your above the heading WordPress ad banner.

No related posts.

Tags:

Category: WordPress

Leave a Reply