Twenty Ten default theme and header

Replace Default Header Image Twenty Ten Theme

The new default theme of WordPress 3.0 is called Twenty Ten and in comparison to the Kubrick theme it is actually beautiful and very useful as a frame to build your own site on.

To safeguard future theme updates WordPress recommends not to start tinkering with the theme files directly, but instead to build a child theme upon Twenty Ten. That way your child theme is protected from future theme updates while still using all the functionality of Twenty Ten.

Twenty Ten default theme and header

Now Twenty Ten comes with a set of beautiful header images that even have their own story, but if you decide to use the theme to build a child theme upon and use it for a client, then you probably want to ditch these header images. You probably also want to add a new default image, but still give the client the possibility to upload a different one when needed/wanted.
And perhaps you’d also want some flexibility in the width of the entire site.

In the WordPress Codex and on other sites you will be able to find information on how to make a child theme (on Twenty Ten), but information on how to replace the default header image with your own is a bit harder to come by.

Today’s WordPress Tip shows you how to replace the default header image of the Twenty Ten theme

If we take a look at the functions.php file in the Twenty Ten theme directory, we will find on line 53 something very important: if ( ! function_exists( 'twentyten_setup' ) ):

This line basically says that if the function twentyten_setup does not exist (in your child theme), then do the following. The following starts on line 75 and opens a whole bunch of parameters for that exact function: (function twentyten_setup() {) which then ends with an endif statement.

The Codex says about this:

… the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)
In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme

So to “break” all this and be able to put our own stuff in, we will need to create our own function twentyten_setup in our child theme.

If you haven’t done so, make a new file in your favorite (text) editor and copy line 75-178 of the Twenty Ten functions.php into it and save it as functions.php under your child theme’s directory.

We basically want to keep all functionality of the Twenty Ten theme, so the things about colors and backgrounds we keep in place. We’re not entirely sure about the language stuff and therefore have that taken out and added to the top of our functions.php file and replaced “twentyten” with the name of our child theme.

Replace the default header image

We’re mostly interested in the line // Your changeable header business starts here, because here our editing starts. We are going to change the line that starts with “define HEADER_IMAGE”:
define('HEADER_IMAGE', get_bloginfo('stylesheet_directory') . '/images/new-default-header-image.jpg');

You see that we leave the definition the same, but we want to show the new header image from our own child theme directory and not from the Twenty Ten directory, hence the get_bloginfo('stylesheet_directory').

With that we now have our own default image.

However we still haven’t deleted the other images that ship with Twenty Ten and perhaps your new default image doesn’t have a width of 940 pixels nor a height of 198 pixels.

The width and height you can actually find on the next lines; just fill in the numbers you want it to be and you’re set.

Remove the header images that ship standard with Twenty Ten

Right after the line // ... and thus ends the changeable header business. the standard images are loaded, so we need to delete that entire section. We will replace that section with the following code we found at aaron.jorb.in:

function yourchildtheme_remove_twenty_ten_headers(){ //source: http://aaron.jorb.in/blog/2010/07/remove-all-default-header-images-in-a-twenty-ten-child-theme/
	unregister_default_headers( array(
		'berries',
		'cherryblossom',
		'concave',
		'fern',
		'forestfloor',
		'inkwell',
		'path',
		'sunset')
	);
}
add_action( 'after_setup_theme', 'yourchildteme_remove_twenty_ten_headers', 11 );

Now that’s taken care of too.

Add additional “standard” header images

If by any chance you would like to ship your new child theme with additional header images you will have to include one more piece of code:

//Add additional "standard" header images 
function yourchildtheme_setup(){

	$yourchildtheme_dir =	get_bloginfo('stylesheet_directory');
	register_default_headers( array (
		'image1' => array (
			'url' => "$yourchildtheme_dir/images/image1.jpg",
			'thumbnail_url' => "$yourchildtheme_dir/images/thumbs/image1.jpg",
			'description' => __( 'Image Description', 'yourchildtheme' )
		), // if you have more than one image you will need a comma between all of them, except for the last one
		'image2' => array (
			'url' => "$yourchildtheme_dir/images/image2.jpg",
			'thumbnail_url' => "$yourchildtheme_dir/images/thumbs/image2.jpg",
			'description' => __( 'Image Description', 'yourchildtheme' )
		) // the last image does not get a comma
	));
}
add_action( 'after_setup_theme', 'yourchildtheme_setup' );

entire functions.php for Twenty Ten child theme

To sum it all up for you, please find below the entire section of our entire child theme’s functions.php:

<?php

function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/wp-content/themes/yourchildtheme/images/favicon.ico" />' . "\n";
}
add_action('wp_head', 'favicon_link');

// Make theme available for translation
// Translations can be filed in the /languages/ directory
load_theme_textdomain( 'yourchildtheme', TEMPLATEPATH . '/languages' );

$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable( $locale_file ) )
	require_once( $locale_file );

function twentyten_setup() {
// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();

// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );

// Add default posts and comments RSS feed links to head
add_theme_support( 'automatic-feed-links' );

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
	'primary' => __( 'Primary Navigation', 'twentyten' ),
) );

// This theme allows users to set a custom background
add_custom_background();

// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );

// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define('HEADER_IMAGE', get_bloginfo('stylesheet_directory') . '/images/image1.jpg'); // 

// 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', 800 ) ); // choose any number you like here
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 200 ) ); // choose any number you like here

// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 800 pixels wide by 200 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );

// Add a way for the custom header to be styled in the admin panel that controls
// custom headers.
add_custom_image_header( '', 'twentyten_admin_header_style' );

// ... and thus ends the changeable header business.
}

function yourchildtheme_remove_twenty_ten_headers(){ //source: http://aaron.jorb.in/blog/2010/07/remove-all-default-header-images-in-a-twenty-ten-child-theme/
	unregister_default_headers( array(
		'berries',
		'cherryblossom',
		'concave',
		'fern',
		'forestfloor',
		'inkwell',
		'path',
		'sunset')
	);
}
add_action( 'after_setup_theme', 'yourchildtheme_remove_twenty_ten_headers', 11 );

//Add additional headers 
function yourchildtheme_setup(){

	$yourchildtheme_dir =	get_bloginfo('stylesheet_directory');
	register_default_headers( array (
		'image2' => array (
			'url' => "$yourchildtheme_dir/images/image2.jpg",
			'thumbnail_url' => "$yourchildtheme_dir/images/thumbs/image2.jpg",
			'description' => __( 'Image Description', 'yourchildtheme' )
		), // if you have more than one image you will need a comma between all of them, except for the last one
		'image3' => array (
			'url' => "$yourchildtheme_dir/images/image3.jpg",
			'thumbnail_url' => "$yourchildtheme_dir/images/thumbs/image3.jpg",
			'description' => __( 'Image Description', 'yourchildtheme' )
		) // the last image does not get a comma
	));
}
add_action( 'after_setup_theme', 'yourchildtheme_setup' );

?>

If you browse further through the functions template of Twenty Ten, you will see something similar happening with the default styles of the header. If you’re fine with those, then you don’t need to change anything there. If you however would like to add something of your own there too, you will need to add function twentyten_admin_header_style() { to your child theme’s functions.php file too.

Show off your Twenty Ten child themes in the comments!

Comments via Google+ or WordPress

44 comments on “Replace Default Header Image Twenty Ten Theme

  1. Great Tutorial, gives the designer control over the header images, you can even remove the action that allows uploading new images.

    If you are offering free or paid themes, we have a little function that may work better than hard coding the array.


    /* Build the Header Array from the theme headers */
    // No need to code the headers just loop through the folder and return a list
    function cms_theme_headers() {
    global $themename;
    $list = array();
    $imagepath = STYLESHEETPATH .'/images/headers/';
    $imageurl = get_bloginfo('stylesheet_directory');
    $dir_handle = @opendir($imagepath) or die("Unable to open $path");
    while($file = readdir($dir_handle)){
    if($file == "." || $file == ".."){continue;}
    $filename = explode(".",$file);
    $cnt = count($filename); $cnt--; $ext = $filename[$cnt];
    if(strtolower($ext) == ('png' || 'jpg')){
    if (!strpos($file, '-thumbnail') > 0) {
    $header = array(
    'url' => $imageurl .'/images/headers/' .$file,
    'thumbnail_url' => $imageurl .'/images/headers/' .$filename[0] .'-thumbnail.' .$ext,
    'description' => __( $filename[0], $themename )
    );
    array_push($list, $header);
    }
    }
    }
    return $list;
    }

    Here is the full code: http://digitalraindrops.pastebin.com/B3mPW3RD

    The way you use this code, changes in the code:
    Line 3: Add ‘Your Theme Name’
    line 12: change to jpg if your file is a jpg (directory and change name if you want)
    Line 15: Remove the line or Change the Height

    Setup:
    In the child theme, add folder ‘images’ and sub folder ‘headers’ (images/headers)

    In the images folder add the main images called header.png

    In the headers folder add your headers and thumbnails, name them how you want them to be known, use – and not spaces i.e. artic-storm, autumn, christmas etc:

    Thumbnails = image name and ‘-thumbnail’ i.e. artic-storm-thumbnail, autumn-thumbnail, christmas-thumbnail etc:

    The function does all the work for you, all you need to do is size the images and drop them in the folder, as you add new images they will be available to select without code changes!

    This makes it a lot easier to add to any theme that has the header support added

    Do feel free to visit our website if you are starting out theme development as we have a series of tutorials for you, http://digitalraindrops.net, we will continue to check out this website and merge some of the code into our theme tutorials.

    David

    • Hi David, just now implemented your code as posted up at http://digitalraindrops.pastebin.com/B3mPW3RD, with slight modification to allow for calling favicon, also to allow for second menu.

      It does work; HOWEVER, in the admin panel under “Header” | Default Images, immediately below the text “If you don‘t want to upload your own image, you can use one of these cool headers”, there is a lone radio button, and beside it and slightly stepped down, a row of 2 header image thumbprints I’m using, and then to their right, slightly stepped up (on the same level with the first radio button on the far left), two more radio buttons, beside the names of the images but without thumbprints. See http://imgur.com/AHmLQ.png.

      Please refer to my code at http://wordpress.pastebin.com/wMmTF1Zc. Can you spot what I’m doing wrong?

      • Per David’s advice to me in separate email, I employed Firebug to track down the cause of the problem, and discovered that the code was picking up the hidden .DS_Store file in the images folder and trying to convert it to a thumbnail! Resolved the problem by eliminating the .DS_Store file in the folder. This, by the way, is something that needs to be done before migrating a local installation to live server, because .DS_Store will hitch a free ride all the way to live server. That said, perhaps there is a way to tweak the code such that it recognizes and ignores .DS_Store files. But I haven’t got the know-how. ;)

  2. thanks wptips and David for the kickass collaborative effort! i used this code and it worked perfectly. thanks for sharing!

  3. thanks very helpful, can I ask a question:

    what if I just want to completely eliminate the banner, how would override that with a child theme functions.php. unfortunately im not well versed in php yet.

    • Hi David, you would only use the first part of the tutorial:
      function yourchildtheme_remove_twenty_ten_headers(){ //source: http://aaron.jorb.in/blog/2010/07/remove-all-default-header-images-in-a-twenty-ten-child-theme/
          unregister_default_headers( array(
              ‘berries’,
              ‘cherryblossom’,
              ‘concave’,
              ‘fern’,
              ‘forestfloor’,
              ‘inkwell’,
              ‘path’,
              ‘sunset’)
          );
      }
      add_action( ‘after_setup_theme’, ‘yourchildteme_remove_twenty_ten_headers’, 11 );

      • thank you, I followed aarons article but maybe im missing something. I placed the following code in my child themes function.php but nothing happened, here is the entire php code:

        my goal is to completely eliminate the header image but im not sure if this is the correct way?

        • David, I think the easiest way to completely get rid of the header image, is to delete the code from your header.php

          The code for your functions.php is correct.

          The only thing I can think of that perhaps you are doing not correct is that the functions file only has one php opening tag and no closing tag, thus:

          <?php
          // the code of the function
          // that's it
          
  4. thank you, I checked to see if I closed the tag and I did, i tried deleting the code from the header php before I posted, this is what actually has prompted my search. what I had originally done was removed the header through admin>>> header. I than used css to apply a background image to the branding div, and this looked great in firefox, however in internet explorer it showed my image but displayed the missing image template over it.(the border with the x in the top left corner). I think i’ll have to start over and retrace my steps, it seems like im missing something simple, thanks for your help and this post.

    • it was something simple, i didnt delete the entire snippet of code in the header so it was stille trying to call the image, thanks again

  5. I am using thirty-ten, the child of twenty-ten, from Aaron Jobin. I would like to add a second header image above the menu but beneath the site title. Thoughts?

    With appreciation,

    Ron M.

    • Hi Ron, adding a 2nd image shouldn’t be a problem. Depends a bit how you would like to do it. If you want it automated, like the main header image, then you will need to dive into the functions file and perhaps write an additional function. If it doesn’t need to be automated, then you can just add the code to your header.php file and style it further in your stylesheet.

  6. I’m glad that it can be done … by someone with a clue! This is all completely new to me and I’m not sure what the difference between automated and not automated is. I’m taking baby steps here. Thanks for your help.

  7. so, something like this? I wasn’t sure what you meant by “omitted the proper brackets.”


    div id=”add-img”
    img src=”http://buffalogolfer.com/wordpress/wp-content/uploads/2011/02/cropped-bgcheader31.jpg” width=”940″ height=”198″ alt=””
    /div

  8. Hello,

    I am working on a site for a friend and want to keep the banner on the home page (a static page which I’ve named:myfrontpage.php). However, I want to remove the banner from all the other pages while maintaining the navigation bar. I have tried creating a separate ‘pageheader.php’ file which has the banner info removed from the code. In the templates for the other pages instead of get_header, I attempted to code get_pageheader. This is not working. I am not sure if it’s because I need to define the pageheader.php file or if I’m just going about this the wrong way.

    Any tips would be very helpful.

    Thanks,

    Emma

    • Hi Emma, you can use a conditional (IF/ELSE) statement for this, something like:

      <?php if is_home() { ?> 
      <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
      <?php } ?>
      
  9. Hi Emma, which version WordPress are you using, what kind of installation, and which theme?

    With the theme Twentyten, you can add the banner to your static home page using “set featured image” – accessible through the admin > Pages > add new panel. You’ll need to import the banner image into the media library.

    Then for all other pages, create an alternative header image and add to the theme’s header image. You could, for instance – in the case of the theme Twentyten – create a transparent png or gif image that is 940px width and 1px height, and try that as a header image.

    This is one solution that gives you flexibility to change and is least intrusive in terms of hard-coding changes into the theme. Not necessary to rewrite anything, if this works for you.

  10. Das, thanks for the tips. I don’t think having a transparent image is going to help me unless I am able to post images/text etc. on top of it? I just find that the banner takes up too much room on pages that should be reserved for information/ displaying images for the client. Perhaps I chose the wrong theme…

    Anyway, the site can be viewed here: casaverdesur.net

    wp tips, I’ve tried conditional tags before but managed to mess up the content of my page pretty badly. If I had my choice I would be a front end person but wordpress seems to require you know a bit about php. I am new to this….I attempted to put the conditional tag you provided in the “one column no sidebar template” before the file requests to ‘get_header’. Nothing changes on the page. Where would you go about inserting the conditional tag?? In the functions file??

    Thanks so much for you help!

  11. P.s. I am also considering the option of creating static pages/php files for every page on the site and coding them without the ‘header’ file and with html…is that possible? As there are so many pages, it feels as if it would be time consuming…

    • Emma, the header image is called from the file header.php, therefore the code we gave you earlier should replace the current code where the image is called in the header.php file

      Your 2nd question (to create all static pages without the header) is of course possible, but we would (highly) advise against it. The whole point of WordPress is to create everything dynamically.
      What you could do instead is to change your other template files (index.php, single.php, page.php, archives.php, category.php, tag.php, attachment.php, author.php, and perhaps a few more) and get rid of the first line that calls the header: get_header()
      But you would be facing another problem then, as the header has all the html a webpage needs to load, so you would need to handcode that too in all those templates, quite a bit of work indeed…

      Our suggestion: please give it another try.
      If you mess up your site, remember that the database will still be there, it’s only the look of the site you are temporarily messing up :)
      Make a copy of your current header.php file (the one that works) and keep that in a safe place. Then you can try all you want and if everything fails you just delete the entire file and put the one you keep in a safe place back in the directory.

      And if you have questions, you can always come back here! Good luck!

    • Hi Emma, take a look at this: http://www.erisdesigns.net/2010/11/convert-wordpress-twenty-ten-theme-into-a-basic-cms/.

      You could insert a call for the header image in the instance of your home page (as wptips has suggested) and disable the call for it in every other instance. This can be done by commenting it out – preferable to deleting it altogether.

      The author of the article referred to above is talking about using WordPress as a CMS, but employing static Pages. He also says to get rid of the header images entirely. I wouldn’t go so far, because they are doing no harm sitting in their folder, and as long as the code has been disabled, WordPress is not going to cough and spit them up onto your pages. Who knows? You might change tack later in the race and decide you want a header image.

      One thing to understand is that with WordPress, Pages are a distinct entity, different from so-called pages – which are really not pages at all, not in the good old html sense of the word; they are a conglomerate of components stored in a database and dynamically synthesized upon callup by the use of code. WordPress Pages are static, and although you can call posts into them, they are not included in the blog loop.

      Whatever you do, no you don’t want to hard-code more than you have to. WordPress has a great deal of functionality built into it and is very flexible, allows you to change themes, add posts, pages, add features via widgets and plugins without digging deep into the core and mucking around. It’s a bit of a learning curve, I know, but well worth it in terms of saving time and making your website more manageable and easily updated. Instead of spending all that time and trouble to hard-code your website, invest a little more time to read up in the WordPress codex and support forums, and it will pay off.

      As wptips advises, dare to live. Experiment with snippets of code that you run across, learn some php basics. Don’t be too scared to try things out. BUT BE SURE YOU ALWAYS MAKE A COPY OF THE ORIGINAL FILE BEFORE YOU EDIT. Work with child themes, never with the original theme files. You can learn more about child themes in the WordPress codex up at wordpress.org.

      Good luck. :)

  12. Thanks for all your help.

    I tried to edit the header.php file. This is how the code looked originally:

    `

    <img src="/images/lizzielogo.jpg” alt=”” />

    ID ) &&
    ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnail’ ) ) &&
    $image[1] >= HEADER_IMAGE_WIDTH ) :
    // Houston, we have a new header image!
    echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
    else : ?>
    <img src="” width=”” height=”” alt=”” />

    `

    This is how it looked after I changed it:

    `<

    <img src="/images/lizzielogo.jpg” alt=”” />

    <img src="” width=”” height=”” alt=”” />
    `

    I get the following error which I don’t understand because the syntax looks correct.
    Parse error: syntax error, unexpected T_STRING, expecting ‘(‘ in /home/casaverd/public_html/wp-content/themes/mycustomtwentyten/header.php on line 70

    I’m stll not sure what I’m doing wrong…I’m reading up on conditional tags but I want to tell my friend to hire a professional because I don’t think I can really help her out..

  13. Ugh. Sorry about those comments. I was trying to insert html within “ and it did not work…please disregard. I am going back to guitar playing as my hobby :)

  14. Hey Wptips,

    Thanks for your help. I think I’ve realized why it wasn’t working. Awhile back I deleted the original ‘home’ because by default it automatically displays in the menu bar.

    I used the code you suggested but I needed to use:

    Because the default homepage was deleted the string didn’t make sense.

    You have been very patient and I appreciate that!

  15. Is it possible to activate the header image/images as image maps with hyperlinks? I can create the image maps with photoshop, but when I upload them, the slices do not activate as functioning links. Thanks for your help on this one.

    • oh those! well if you want to do that it seems best to hard-code it into the header. On your example site you can see that it is done like http://pastebin.com/HQnK1MJa
      I don’t think this can be done in an easy function. Maybe a very complicated function, but then you can ask yourself what the point is to do it that way as hard-coding it into the header should be relatively simple.

  16. Pingback: WordPress – Replace default header image of Twenty Ten theme

  17. Pingback: Replace/Remove Default Header Image Twenty Eleven Theme | WP TIPS

  18. Doesnt work for me

    i have the function.php file ready …

    i copied the code …75 to 175 …
    inserted the code to delete the header images and bang…dreaded error on my screen

    can some one be so kind and help this human work it out
    with instruction

    thanks

  19. Hi there,

    I am a new designer, I would like to know if I’m allowed to use this header changing code for all my client sites?

    Thanks in advance

    John

    • Hi John, last time we checked WordPress was still open source, also no reason to believe that is going to change any time soon. So go ahead and use it wherever you want! Of course you can always accredit WP TIPS as the source of your beautiful customization ;)