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