Customising WordPress TwentyEleven theme headers

This website uses the TwentyEleven theme from WordPress.org. TwentyEleven has a cetain cleanliness or clarity and simplicity that lends itself to publishing lengthier articles. Out of the box The header needs some work.

Add your own header logo

Edit header.php and change the ‘<hgroup>… </hgroup>’ section starting at line 80 and add the url to your (pre-sized 1000px 288px) logo image to:

[sourcecode]
<hgroup>
<h1 id="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><img src="https://www.menantol.co.uk/wp-content/themes/twentyeleven/Menantol_logo_sized_fit.png" alt="" ></a></h1>
<h2 style="margin-top: 10px; margin-left:5px;" id="site-description"><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>
[/sourcecode]

Randomising header images

TwentyEleven can randomise the header images, so that each new page view gets a fresh header image. I find this less intrusive and annoying than having a constantly revolving image slider on every page. In WP-Admin select ‘randomise uploaded headers’ in the ‘Appearance, Customise, Header’ menu. Make sure that your uploaded header images are 1000px x 288px.

Not randomising home page header image

On this website, the homepage discusses my philosophy and the name ‘Menantol’, referring to the neolithic standing stones of Mên-an-Tol. Becasue of this it ought really to always display the same image of Mên-an-Tol.

In header.php starting at around line 124, directly after:

[sourcecode]
endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image
[/sourcecode]

add the following code replacing the image url for the ‘is_front_page() clause’ with your own :

[sourcecode]
if ( is_front_page() ) : ?>
<img src="https://www.menantol.co.uk/wp-content/uploads/sig-Men-an-Tol_slide2.jpg" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" />
<?php else : ?>
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" />
<?php endif; ?>

[/sourcecode]