Modify Header.php to Get the Most Out of Yoast’s SEO Plugin in a TwentyTen Child Theme

I have taken a liking lately to Yoast’s SEO plugin.  So far, it just plain works.  Now I am not the type of guy to worry too much about this stuff.  I apply little tweaks here and there and maybe it helps.  But the plugin offers a lot of things I like, like bread crumbs, and easy access to my .htaccess file, and robots.txt.  Only a few things have to change to enjoy this plugin.  Let’s dig in to this.

So if you followed along earlier, we have already copied header.php to our child theme.  Like I mentioned in that article, I think it is best to do this, as there are many changes to make to the header.  The first thing we are going to do here is to get our title ready for the plugin.  This isn’t the title you see by your posts or anything.  It is the title picked up by search engines, and also you see it at the very top of your browser.

So in your header.php you will find this:

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

	?></title>

All kinds of stuff in there. It helps spit out some pretty well formed titles. But if you want the full yumminess of Yoast’s plugin (and you do!) then replace all that stuff there with this simple bit of code:

<title><?php wp_title(''); ?></title>

Crazy simple right? Swapping out that big old block for this allows Yoast’s plugin to properly take control of the title section. Otherwise you get some double output, and generally unpredictable results.

Now let’s take a look at another cool feature from the plugin. The breadcrumbs. They may be good for SEO, they are probably good for your users in some situations. Whatever, I like em. End of story for me. If you want to use them, here’s what I did. Now, this portion is a little subjective, what you do depends on where you want the breadcrumbs, and how you want them styled. I put them right at the end of header.php, under the last line which opend the main div. Here’s my code:

	<div id="main">

	<?php if ( function_exists('yoast_breadcrumb') ) {
		yoast_breadcrumb('<div id="navCrumbs"><p id="breadcrumbs">','</p></div>');
	} ?>

That’s all it takes to get the breadcrumbs to show up. Now the styling is a bit off for me, So I had to add and edit some css. Here’s the new stuff.

#navCrumbs {
	font-size: 1.1em;
	margin-bottom: 15px;
}
p#breadcrumbs {
	border-top: 2px solid #999999;
	border-bottom: 2px solid #999999;
	padding: 10px 0;
}

Nothing much to it, I just had to adjust some spacing and get sizes and borders just right. Now there is still a large gap in there, which we fix with a minor edit.

TwentyTen’s default css has this:

#main {
	clear: both;
	overflow: hidden;
	padding: 40px 0 0 0;
}

I needed to fix it for my breadcrumbs. I changed it to this:

#main {
	clear: both;
	overflow: hidden;
	padding: 15px 0 0 0;
}

Exactly how you do this depends on your setup. I recently decided to copy all of twentyten css into my child theme style.css. So I just edit it directly. If you are using the @import rule, you can just copy that block of code to overwrite twentyten’s rules for #main.

That’s all the hacking away at header.php I’m doing today. But tomorrow will be superfly. I plan to remove the text link above the header. But it’s also a link to the homepage. So in preparation for that, we will turn the entire header image into a link. Word!