Add 728X90 Adsense Banner In Header Of StudioPress Themes

Adding a 728X90 Google Adsense banner in the header of any Genesis child theme may require modification of your themes CSS code.

The reason for this is because the header right widget area is normally less than 728px width so your banner will be cut off or reduced in size. Here’s a real example i tested locally before changing the width of the header right widget area:

Here’s a forum question i’ll answer with a solution that works with any StudioPress child theme. Firstly, here’s the result this solution produces:

How can I add an Adsense code 728X90 Below My Header Image? If I add to the Header Right, it squishes my header image left and looks stupid…. Thank you.

Answer

You can reduce the width of your site title area and increase the width of your header right widget area by exactly the same value in pixels as you reduced the width by for the title area.

Here’s an example using the popular Metro Pro theme.

Line 929 of style.css file

/* Title Area
--------------------------------------------- */
.title-area {
	float: left;
	padding: 0;
	width: 360px;
}

And Line 994

/* Widget Area
--------------------------------------------- */
.site-header .widget-area {
	float: right;
	width: 664px;
}

Notes:

1. All themes are coded differently so the Line number of the CSS which needs modifying and the value it needs modifying will vary per theme.
2. Tested with 728X90 pixels image banner, not Adsense Javascript code.
3. Your site title text may needs to be changed or reduced in size if you want it to display on one line.

Reduce Site Title Size

For the Metro Pro theme, simply change the font-size on line 937/938 of your child themes style.css file. Here’s an example:

.site-title {
	font-family: 'Oswald', sans-serif;
	font-size: 35px;
	font-size: 3.5rem;
	line-height: 1;
	margin: 0 0 16px;
	margin: 0 0 1.6rem;
	text-transform: uppercase;
}

And here’s the result:

Add Custom Widget In Header

If you prefer not to use the header right widget because you don’t want it in that position or want to use it for something else, you can add a new widget.

Simply copy the PHP code from the view raw link in the Gist below and paste it at the end of your child themes functions.php file using a code editor like Notepad++.

You can then center your banner using CSS in your style sheet and the class generated by the PHP code above which is .header-banner.