Image Rotator for the Header of Twentyten

The wp3 default theme TwentyTen comes with a choice of header images, which can be selected from the dashboard.
To rotate these images to show randomly in the header, we can make use of the global array variable which stores all the default header image information: $_wp_default_headers.

The rest is easy: we build a function, which we later save in functions.php of TwentyTen, to pick a random image out of the available images:

function rotate_default_headers() {
global $_wp_default_headers;
$rnd_header = rand( 1,count($_wp_default_headers));
$header_nr = 1;
foreach( $_wp_default_headers as $heady ) :
if ( $header_nr == $rnd_header ) {
echo get_bloginfo('template_url') . substr( $heady['url'], 2 );
break;
}
$header_nr++;
endforeach;
}

to show the randomly rotated images in the header, add the function call in header.php –
simply edit header.php, and find this line:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

expand it to accomodate the function call:

<img src="<?php if (function_exists('rotate_default_headers')) rotate_default_headers(); else header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

done – now you will have a different header image each time you switch to a new page (within the limitions of statistics, of course).

5 Replies to “Image Rotator for the Header of Twentyten”

  1. it works fine once you fix up the typo of the function call,
    <img src="” width=”” height=”” alt=”” />

    should say

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

    it’s missing the s on the! Can you find it………..

    1. <img src="<?php if (function_exists('rotate_default_headers')) rotate_default_header(); else header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

      should read

      <img src="<?php if (function_exists('rotate_default_headers')) rotate_default_headers(); else header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

      1. Hi Greg,
        thanks for pointing the typo out.
        i fixed it in the post — you sure have helped someone to get this running.

      2. Hi alchymyth,

        No problems, I like to modify the WordPress code too. I use custom fields to create data for my header images, img titles and img alt attributes and then return the data with,

        <?php
        // get the post ID to use in custom fields
        $post_id = $post->ID;
        // create an array of custom field data
        $custom_fields = get_post_custom($post_id);
        // extract data from the array
        $banner_value = $custom_fields['banner'];
        $banner = $banner_value[0];
        $alt_value = $custom_fields['banner_alt'];
        $banner_alt = $alt_value[0];
        $title_value = $custom_fields['banner_title'];
        $banner_title = $title_value[0];
        ?>

        Then insert data into the line,

        <img src="<?php if($banner){echo get_bloginfo('template_url') . "/banners/$banner";} else header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="<?php if($banner_alt){echo $banner_alt;}else echo 'website designer Ulladulla, custom made websites'; ?>" />

        into the header.php file.

        I also use it for meta data page titles, description and keywords.

        //Greg – Australia

  2. It doesn’t work for me… but hey I am no programmer, I just follow instructions as they are given, for instance you say “we build a function, which we later save in functions.php of TwentyTen”

    which in my mind it means “grab the code and add it to funcion.php”
    so I placed it at the end of the code and savedi it… nothing.
    I placed it at the beginning just after the <?php and nothing… after that I gave up.

    But I do have a way to rotate images without having to write any code so I am cool 🙂

Leave a Reply to Greg Cogar Cancel reply

Your email address will not be published. Required fields are marked *