32 | Image Rotator for the Header of Twentyten

g+

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).

This entry was posted in Tips & Tricks, WordPress and tagged , , . Bookmark the permalink.

6 Responses to Image Rotator for the Header of Twentyten

  1. Brenton comments:

    At this moment I am ready to do my breakfast, after having my breakfast coming yet again to read more news.

    Also visit my web page :: Bastrop hospice home services
    (http://ashmore.csail.mit.edu)

  2. Greg Cogar comments:

    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………..

    • Greg Cogar replies:

      <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="" />

      • alchymyth replies:

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

      • Greg Cogar replies:

        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

  3. mark comments:

    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

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*