yoastseo

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!

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

  1. YOU SAVED ME. Thanks so much, I was getting mad.

    I have a quick question: do I also need to delete the meta tags section in order to give the control to Yoast SEO?

    1. (I don´t use the 21 theme, nevertheless your advice worked with my current theme anyway)

      And I will never say enough, THANK YOU THANK YOU THANK YOU THANK YOU

      1. I’m very happy this post was able to help you! Although a lot of my tutorials are focused on the 2010 or 2011 themes, with just a little bit of work, a lot of the suggestions will work with any theme!

  2. Hi Rev. Voodoo, this site has helped me loads as I am relatively new to using wordpress. I’ve just enable the Yoast SEO plugin, and enabled the breadcrumbs, I was wondering if you are aware of a way to hide them on the home page?
    Thanks!

  3. Thanks so much for your post! I never realized that it was the Yoast SEO Plugin that was causing my blog title to be so jumbled up. Your fix was extremely clear and easy to follow. Thanks again :D

  4. Thanks heaps! It was really annoying me seeing my blogs name twice in the browser tab. Yes it was small and something nobody will probably ever notice, but these things bug me!

    Thanks again.

  5. Thanks so much for your post!
    At least i could have Breadcrums on my web (www.comoorganizartuboda.com) but i have some questions with the css file that you edit.

    Which file edit with
    [CSS]
    1
    #navCrumbs {
    2
    font-size: 1.1em;
    3
    margin-bottom: 15px;
    4
    }
    5
    p#breadcrumbs {
    6
    border-top: 2px solid #999999;
    7
    border-bottom: 2px solid #999999;
    8
    padding: 10px 0;
    9
    }
    [/CSS]

    and which file you edit with

    [CSS]
    1
    #main {
    2
    clear: both;
    3
    overflow: hidden;
    4
    padding: 15px 0 0 0;
    5
    }
    [/CSS]

    Thanks in advance Voodoo

    1. You’ll notice the article is specific to the 2010 theme (the concepts work for any theme, but the css is particular to 2010). And in the article I discuss adding that css to your child theme, so you don’t edit any css file, my code was to be added to the style.css file, within a 2010 child theme.

  6. I am worrying about how to fix this for my site and i don’t know absolutely about the problem i simply followed your guide simply replaced the my code with above given code and its working fine thank you very much

  7. Hi James,

    this double title made me nuts as well. I switched from another SEO plugin to Yoast. When checking my page I had 2 titles!! Bugger. I love your instructions, since I have no idea about all those coding stuff. I just replaced what you said in the header and it worked. Great thanks so much.
    Now I need to figure out that Google search actually shows my title when my homepage shows up!
    Thanks so much again for your great instructions :)

Leave a Reply