Modifying Headers From a TwentyTen Child Theme

In part of our ongoing series on modifying the twentyten theme we are going to look at the header.  You may decide that it’s not quite right for you.  Maybe you want to change the size, or add new custom default headers.  Well you can do all of that quite easily from your child theme.  I widened the theme to suit my taste, which is what lead my down this road.  Don’t worry, soon we will cover how to widen the twentyten theme.  But for now, let’s look at modifying the header, which leads us to our first look at WordPress’  action after_setup_theme.

Modifying many built in behaviours with twentyten is fairly simple, with hooks, filters, and actions.  We’re going to set up our own action today using after_setup_theme.  We will use this for a couple different things over the coming articles.  You can make a great big function out of this to override all sorts of default twentyten code.  Adjusting the header size, adding new default header images, changing sidebar code, etc. So let’s look at changing the header size, and then adding a new default header image. Finally we will wrap it all up in a after_setup_theme action.

So first, let’s change the header size. We look through twentyten’s functions.php and find this block of code.

	// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

So that is what we need to affect with our new header size. Simply put, we just tweak those numbers. This would be my code for my new header size. I just designed a new logo, and I really want it a bit taller, I want to show it off! I also made twentyten wider, so I need to account for that:

// OVERRIDE TWENTYTEN HEADER SIZE
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 1010 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 228 ) );

So far, not too confusing right? Next up, let’s take a look at twentyten’s functions.php for how the default header images are put in place.

	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
		'berries' => array(
			'url' => '%s/images/headers/berries.jpg',
			'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Berries', 'twentyten' )
		),
		'sunset' => array(
			'url' => '%s/images/headers/sunset.jpg',
			'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Sunset', 'twentyten' )
		)
	) );

Now there are several more images registered in twentyten’s functions.php, I just posted the first and last as an example. You can see the pattern we need to follow. So I want my new logo to be a default header, it’s that cool! You need to make up the images first. You need a full size image and a thumbnail. The full size image should be of whatever dimensions you set above. Or if you aren’t changing the image size and are just adding a new default, your full size image should be 940px wide by 198px tall, that’s the twentyten default. Now your thumbnail size must be exactly 230px wide by 48px tall. That isn’t changing. If you don’t use an image that size, your screen will look very peculiar. It will still function, it’ll just look terrible.

So once you have the images, upload them to the images directory of your child theme. Now here is my block of code for adding them in.

// ADD IN OUR CUSTOM HEADER IMAGES TO DEFAULT
    $voodoochild_dir =    get_bloginfo('stylesheet_directory');
    register_default_headers( array (
        'voodoopress' => array (
            'url' => "$voodoochild_dir/images/voodoopress.jpg",
            'thumbnail_url' => "$voodoochild_dir/images/voodoopressthumb.jpg",
            'description' => __( 'VoodooPress Default', 'voodoochild' )
        )

    ));

In line 2 we set up a variable, $voodoochild_dir, that is just a placeholder for the path to our directory. You can rename this if you like. If you do, you must also edit where you see it in lines 5 and 6. You will also need to edit the name of the images in lines 5 and 6 to match the names of the full size header and thumbnail which you uploaded. The last thing you need to edit is line 7, the description. Where mine says VoodooPress Default, put the descriptive name of your header image. Not the filename necessarily, the title. And where mine says voodoochild you put your child theme name.

OK, now we have seen the code for adjusting the header image size, and for adding in your own default headers. Let’s wrap it up! You don’t just want to plop this in your functions.php. You want this latched onto a specific action, so that it gets called at the right time. We mentioned it before, it’s after_setup_theme. Here is all that code, inside the action.

// VOODOOCHILD SETUP FUNCTION FOR ADJUSTING HEADER STUFF
function voodoochild_setup(){

// OVERRIDE TWENTYTEN HEADER SIZE
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 1010 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 228 ) );

// ADD IN OUR CUSTOM HEADER IMAGES TO DEFAULT
    $voodoochild_dir =    get_bloginfo('stylesheet_directory');
    register_default_headers( array (
        'voodoopress' => array (
            'url' => "$voodoochild_dir/images/voodoopress.jpg",
            'thumbnail_url' => "$voodoochild_dir/images/voodoopressthumb.jpg",
            'description' => __( 'VoodooPress Default', 'voodoochild' )
        )

    ));

}

add_action( 'after_setup_theme', 'voodoochild_setup' );

Do you see how we did that? we named the function in line 2. You can call it whatever you like. Just make sure that in the very last line you call to the same function name when adding the action to after_setup_theme. That’s it. You’ve just tweaked your header all sorts of ways. We will add to this in the future as there are all sorts of things to add in here. You can override twentyten’s excerpt function in here, you can edit, remove, and add sidebars here, etc. Have fun with this!

10 Replies to “Modifying Headers From a TwentyTen Child Theme”

  1. This was really helpful, I feel like each time I start researching a new function I inevitably end up back at one of your blogs. I am getting a strange error when I upload my functions file, the error is Parse error: syntax error, unexpected T_FUNCTION in /didnt/want/to/showthe/file/path on line 1 (keeping my filepath secret) I researched it and it seems its caused by syntax errors like an extra semicolon, I’ve scoured this file like 10 times and cant find any errors, does anything jump out at you
    ‘<?php

    /** Tell WordPress to run child_theme_setup()
    when the 'after_setup_theme' hook is run.
    */
    function my_child_setup(){

    // OVERRIDE TWENTYTEN HEADER SIZE
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 950 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 188 ) );
    }
    add_action( 'after_setup_theme', 'child_theme_setup' );

    /** This function will hold our new calls and over-rides */

    // Add support for Featured Images

    if (function_exists('add_theme_support')) {

    add_theme_support('post-thumbnails');

    add_image_size('index-categories', 150, 150, true);

    add_image_size('page-single', 250, 250, true);

    }
    //function to insert featured images
    function InsertFeaturedImage($content) {

    global $post;

    $original_content = $content;

    if ( current_theme_supports( 'post-thumbnails' ) ) {

    if ((is_page()) || (is_single())) {

    $content = the_post_thumbnail('page-single');

    $content .= $original_content;

    } else {

    $content = the_post_thumbnail('index-categories');

    $content .= $original_content;

    }

    }

    return $content;

    }

    add_filter( 'the_content', 'InsertFeaturedImage' );

    '

    1. Well…. I’m assuming this is in your child theme’s functions.php? Just wanted to make sure with the path hidden. Is this the entirety of the file? One issue I see, unrelated to the error… your first function is named my_child_setup, however at the bottom of it you run child_theme_setup. Other than that…it’s erroring on the first function and thinking that’s line 1. Which makes me wonder about your opening php tag, or the comment in there. Double check your opening php tag, and maybe remove that first comment, or just try a single line comment with the double slash //. That’s all I can see that maybe something is flaking out before that first function. Otherwise, I’m glad you keep finding useful stuff here. If my ideas don’t work out, let me know…. I’ll throw your code in my test install and see what I get.

      1. weird, seemed to have been an encoding issue, I always use notepad++ to edit, I copied the code into the basic notepad just to see and was getting those little square characters. So i deleted them all, reorganised everything, and uploaded it back onto the server and it’s working fine.

        I also fixed the function you pointed out so thanks for that.

  2. Hey, if I have a child theme installed, my functions.php folder is empty. All that’s in there is:

    <?php
    /**
    * TwentyTen Child Theme functions and definitions
    *
    */

    Do I simply add the code that you talked about above (for instance, to change header size) and it will automatically override what's in the original functions.php file?

    Thanks,
    Srdjan

    1. Yes, that is correct! It’s actually better to change the header size with a filter, like my example here for the 2011 theme: http://vudu.me/oy

      http://vudu.me/ph is an article with a bit more detail about adding and removing header images

      And finally, when making revisions, it’s always best to decide if the code should go into your theme, or a plugin. IT depends on exactly what you are doing. Here’s an article about that: http://vudu.me/2uc

      Hopefully you’ll find a lot of useful info there!

  3. This was great for adding an array of new default images. However, the original twentyten header images remained, so whem I select ‘Random: Show a different image on each page.’ it displays my images as well as the twentyten images. Was this supoposed to overide the twentyten header images in that they should not be displayed anymore? I don’t require them.

    Cheers,
    Graham.

Leave a Reply