post

How To Add Header Ads To All 3 WordPress Default Themes

Adding-Header-Banners-Default-WordPress-Themes
The three WordPress Default Themes still supported by WordPress are the TwentyTen, TwentyEleven and of course the latest, TwentyTwelve Themes. Most WordPress purist love these Themes and will never change to any other third party Themes. New users too will also stick to these Themes before becoming more adept and start experimenting with other WordPress Themes.

One of the reasons many blogs opted for another Theme rather than using the default is because it is quite difficult to insert different element into their blogs, especially in the Header area where it is most popular.

Frankly, it is not that difficult a task to insert anything you want into the default WordPress Theme’s header. Since it is the header area, the file to look for when inserting items like Ad Banners or Social Icons is the header.php file. All you need is the ability to make a wild guess the location where you want to put it, then add some CSS codes to properly align the banners or whatever.

Here I have 3 examples of how you can insert the most popular 728 X 90 Ad Banner into the header of the 3 default WordPress Themes.

Adding Banner To The Twenty Ten WordPress Theme Header

Make sure you have the latest version by checking if there is any updates available for the Theme. If there is, update the Theme first.

Activate Twenty Ten Theme.

Go to Appearance – Editor – Click on the header.php file to open it.

Scroll down until you see the closing div tag for “branding”. Immediately AFTER that tag, insert all your Banner codes.

      </div><!-- #branding --> <--PLACE CODES IMMEDIATELY AFTER THIS!
<div class="ads"> <--CREATE A NEW DIV IN YOUR STYLESHEET.
<script type="text/javascript"><!--
google_ad_client = "";
google_ad_slot = "";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><!--.ads--> <--CLOSE THE DIV

Update the file.

You will see that I have added a new div class called ‘ads’ just before all the banner codes. This is to align the banner so that it sits properly in the header the way I want it.

Go to your Stylesheet, scroll down till the bottom and insert these css codes.

.ads {
	display: block;	
	float: right;
 	margin-top: -100px;
	margin-right: 20px;
}

You can of course adjust the float alignment and margins according to your preference. Update the file.

You should get something like this:

Twenty-Ten-Header-Ads

Add Banner Ads To The Twenty Eleven Theme Header

Similarly, if you are using the Twenty Eleven Theme, open the Editor under Appearance, then click the header.php file to open it for editing.

The header.php is coded a little bit differently from it’s predecessor. This time you will have to look for something different. For easy recognition, I will recommend you look for the opening tag for the navigation bar. The codes will look like this

<nav id="access" role="navigation">

Immediately BEFORE that line, paste in all your codes exactly like the codes shown above. It should look like this:

<div class="ads">  <--CREATE A NEW DIV IN YOUR STYLESHEET.
<script type="text/javascript"><!--
google_ad_client = "";
google_ad_slot = "";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div><!--.ads-->  <--CLOSE THE DIV
			<nav id="access" role="navigation">  <--PLACE CODES IMMEDIATELY BEFORE THIS!

Copy the CSS codes above and paste them into your Twenty Eleven Stylesheet. Adjust the alignment values to your preference.

What you should get should look like this:

Twenty-Eleven-Header-Ads

Banner Ads For The Twenty Twelve WordPress Theme Header

The latest Twenty Twelve WordPress Theme does not come with any header images by default. Thus the banner will look more natural and will blend in better.

Like the above examples, open your header.php file and look for closing tag for ‘hgroup’. Immediately AFTER that tag, paste in all your Banner codes just like the examples above.

                </hgroup>  <--PLACE CODES IMMEDIATELY AFTER THIS!
<div class="ads">  <--CREATE A NEW DIV IN YOUR STYLESHEET.
<script type="text/javascript"><!--
google_ad_client = "";
google_ad_slot = "";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div> <!--.ads-->  <--CLOSE THE DIV
		<nav id="site-navigation" class="main-navigation" role="navigation"> <--PLACE CODES IMMEDIATELY BEFORE THIS !

Once again you have to align your banner properly. Copy and paste these codes to your Twenty Twelve Stylesheet.

.ads {
	display: block;	
	float: right;
 	margin-top: -80px;
	margin-right:0px;
}

Align to your preference. Update all files and your Twenty Twelve Header Banner should appear like below:

Twenty-Twelve-Header-Ads

Ending Note

Since all the editing has been done in the original header.php file, there is a high possibility that all these codes will be erased should there be an update to the Themes or to the current version of WordPress. It is something you have to live with if you want to add banners or whatever to your WordPress Theme Header if you are using the default Themes.

On the bright side, it is not everyday or every week that WordPress or the Themes get updated. So be happy and enjoy the Theme.



Disclosure:
Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.

advertisements
Divi WordPress Theme
728x90 V3