How To Put Google AdSense Link Unit on a WordPress Theme Header
In this article we are going to discuss how to put Google AdSense Link Unit on a WordPress Theme header so that it mimics a top menu or sub menu of the theme. As you may already know, putting Google AdSense advertising on websites or blogs should be done in such way that the advertising box is perfectly “blended” in the page, so that the visitors would think that it was not an advertising.
In the case of Link Unit, it should be placed near the menus, whether it is main menu on the top of the page, left menu, or right menu. Some people also suggests that we place the Link Unit near a search box.
It’s assumed that you already have an account on Google Adsense (click here if you have not) and a blog on self hosted WordPress. The simple 2 steps technique described here can also be applied on any website or blog since we are going to modify (a little bit) the HTML code of the theme.
1. Create AdSense Link Unit
First step, you need to obtain the Adsense Link Unit code to be embedded to your theme. Log in to your Google AdSense account, and click on AdSense Setup tab then Get Ads link.
Select Link unit since we are about to create one. Click Continue button.
Next you choose the ad format.
- Select the size of the ads and number of ads link in this unit
- Select the color for the ads to match it to your theme color
Click Continue button.
Next, you optionally choose the Ad Channels. Channels are grouping for all ads for analysis purpose. For example you have several AdSense units in your site and you want to track which unit is generating revenue most. By defining channel you can track that information and then optimize the ads grouped on that channel. You can skip this step anyway. Click Continue button.
Next, you set the name for this ads. Type a name that identify the purpose or placement of this ads. Then finally, click the Submit and Get Code button to get the ads code.
There your ads code are. Copy the code, we are going to paste it to a theme that we need to place the link on.
2. Modify Theme
Now, login to you WordPress admin account. Click on the menu Appearance (on the left side of the page) – Editor. This will bring you to the current theme file editor.
The theme editor will show up:
Here we can modify many aspect of our current theme like colors, size, layout, etc. You can select other theme than the current theme by selecting the theme to edit list box on the top right of the page.
In this example we are going to modify the Header file which is a PHP file that defines the header section of the theme. Select Header (header.php) on the right side of the page. Then the file editor the the header.php file will show up.
The file was basically a plain PHP file with HTML codes inside. Let’s take a look at it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo(‘version’); ?>" />
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/ico" href="<?php bloginfo(‘stylesheet_directory’); ?>/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(‘name’); ?> RSS Feed" href="<?php bloginfo(‘rss2_url’); ?>" />
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<div class="header_wrapper">
<div class="header_left">
<h1><a href="<?php bloginfo(‘url’); ?>"><?php bloginfo(‘name’); ?></a></h1>
<h2><?php bloginfo(‘description’); ?></h2>
</div>
<div class="header_right">
<ul>
<li<?php if(is_home()&&!is_paged()) echo ‘ class="current_page_item"’; ?>><a href="<?php bloginfo(‘url’); ?>">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1′); ?>
</ul>
</div>
</div>
</div>
The <head> section is the HTML header for the theme, skip that as it is. Take a look on the <div> tag with ID “header”. This is the div that contains the header layout. We are going to add our AdSense code inside it. Just before the closing tag of this div, put this code (the one that we got from AdSense setup, but surrounded by a new div tag with some style to match the whole theme colors):
<script type="text/javascript"><!–
google_ad_client = "pub-7773800616131770";
/* dijexi-link-top */
google_ad_slot = "9510052288";
google_ad_width = 728;
google_ad_height = 15;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Save the file by pressing the Update File button. To revise, your new header.php file will looks like this:
You are done!
Now, take a look on the new theme with an AdSense Link unit inserted just below the header which looks like a sub menu of our page (can you find it? :-) ).
That’s all for now, next time we will discuss about using AdSense in FeedBurner. Leave me a comment of you have something to discuss.
Akhmad Daniel Sembiring
vITraining.com – Qualified IT Products, Outsourcing, and Services
Ligarwangi.com – Linux, E-book, Coffee, Gift, etc
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=3dab36da-d9c9-424e-a16f-df1143f3ecd2)
thank you man, its was a nic reed! :-)
v
An expert is a person who has made all the mistakes that can be made in a very narrow field.
I enjoyed reading this
Doesn’t work for me. I’m using a Garland theme.
The box appears but it is “dead” — the cursor won’t even register if I click in the box.
Still trying to debug this.
i am really very thankful that Google launched the Adsense program. this enables most of us who owns several websites to work at home.
i love google Adsense, it enables me to earn money on the websites and forums that i have put up several years ago. if you got tons of websites, you can earn a lot from Adsense alone
get free dofollow backlinks: mysiteevaluate.com/backlinks-blog/
This is nice post i have read. I will follow your blog and revisit again. I enjoyed a lot and learn new stuffs. I will bookmark your blog so I could easily revisit this. :)
Thanks for sharing this article. My theme was not showing the ads link at menu bar location. After reading this article, I have added the code in right place. Now my ads are showing as I expected.
If you wish, you can see the menu links:
http://www.roadtoworkathome.com
http://oracle-faq-qa.blogspot.com/
Nice post man
If someone can tell me how to add adsense in the the middle of the thread
thankss
I searched so many places for help in adding adsense specifically to the banner of my blog. I am as green as they come. But the above explanation did it. There was a little guesswork but using common sense I replaced the default banner html script in the header section and replaced it with the adsense script and in two seconds it was done. You just kind of have to read the code and realize what it is referring to on your page and then place the adsense script in the right place. Not too difficult. Even on WordPress their help is completely useless. Thanks a lot for posting this info!
Thanks for the effort you took to expand upon this post so thoroughly.
Why valid html code is important to your web site’s search engine optimization efforts and consequent high rankings! Such invalid html codes… A single missing bracket in your html code can be the cause your web page cannot be found in search engines… Providentially, there are free services that allow you to check and fix the validity of your html codes.
Thanks a lot for this useful article. You help is appreciated. I successfully added adsense to the top of my article header.
Nil
Great article and right to the point. I don’t know if this is truly the best place to ask but do you folks have any ideea where to employ some professional writers? Thanks in advance :)
@Adrienne Wayner
Hey Adrienne-I work for a digital marketing agency and we have a number of copywriters on staff that are always looking for freelance work (and have extremely reasonable rates).
Respond here if you’re interested and I’d be happy to point you to them.
Great tips , nice blog i’m bookmark :) -
Excellent. I wanted to place Google Adsense on top of the page above everything else. For Artisteer theme I added the code for Adsense in between these two lines
<body >
using the div snippets you provided. It works fine on my site at http://sajepress.com
For some surprising reason some thing this simple was not available any where else.
Thanks very much for your help.
Adrienne, I can do some writing for you if you want. Contact me through redbluewebsites . com.
I tried doing this on my template and it works for the most part. My only problem is that when the Google Ad comes in it doesn’t push down my content, it actually covers it. So with a 60 pixel tall image ad it ends up covering my blog title. Does anyone know how to fix this?
Great article BTW.
Well This Is a very good post.
Thanks for the tutorial, I will try so on..
It would be much better if wordpress adds a built in option to use google adsense on blogs… I’m now using a plugins called Quick Adsense, it’s much easier to use it than any others, would you like to suggest me any good plugins for using adsense on wordpress blogs?
this post is amazing and i just cannot tell how this post has benefited me
After reading your article, I’m so glad and thanksful for you to share this writing. Be sure to keep performing your wonderful work. I grow to be a fan of one’s website.
Thank you. it has helped me to place the ad at the top.
I want to know how to monetize my bog and my website. I’m really new about this. Any idea?
I like the helpful info you supply on your articles. I?ll bookmark your weblog and check once more right here regularly. I am quite sure I?ll be told many new stuff proper here! Good luck for the following!
Great post man, Thanks a lot.
Excellent site. Plenty of useful information here. I?m sending it to a few pals ans also sharing in delicious. And of course, thanks on your effort!