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

Link Header Image to Home Page

Having the whole header image linking to the home page is one of the most common things of a theme. This article explains how to add this feature to the WordPress theme Twenty Ten.

Edits are to be made in header.php of a child theme of Twenty Ten, at the location recognizable below (theme version 1.6):

<div id="site-description"><?php bloginfo( 'description' ); ?></div>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
.....
.....
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
 <?php endif; ?>
</a></div><!-- #branding -->

The link tag

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

was added just after this line

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

and closed it before the end of the #branding div

</a></div><!-- #branding -->

that is all.