Twenty Eleven Themes Featured Images As Custom Headers & Front Page Slider

If you want to use your featured images as header images on any post, page or archive, this post provides a very elegant solution.

On top of this, you can also use any slider in the header on your front page as well.

The Twenty Eleven theme already includes support for using featured images as unique header images as long as they use the correct width which is 1000px.

The default height is 288px however any height can be used.

In this tutorial, i’ll show you the 2 simple steps it takes to modify the PHP code in the Twenty Twelve themes header.php file so you can make all this happen without installing a plugin.

Note: I suggest you create a child theme for Twenty Eleven and copy the header.php file over. This avoids the loss of code modifications when the parent theme is updated.

Step 1

1st step is to add a conditional tag to your soliloquy sliders template tag in your header.php code on or around line 99.

Step 2

The 2nd step is to add an else statement after your sliders template tag and before the default featured image code:

This displays the slider on your front page only and then displays either the default image you add or select under Appearance > Header > Custom Headers

Or

the image you add to any Featured Image meta box on any edit post/page screen, as long as its exactly 1000px in width.

Note: You will need to select Default Image or Random: Show a different image on each page under Appearance > Header for this to work, if you don’t, no header image will be displayed on posts/pages where you haven’t added a featured image of exactly 1000px in width.

This is a bonus because any image you do select as your Custom Header, will display as your default header image if NO featured image is added manually to any post or page.

Note: If you have selected and are using a custom blog page for your posts page and NOT the default Reading Settings, you can change this conditional to is_front_page().

Grab All The Code

Here’s the entire code block you can simply replace in a new copy of the header.php file between lines 92 and 113.

And there’s been hundreds of thousands of people downloading different plugins to do the same thing when all it takes is a few lines of highly efficient code!

Pretty slick solution that would be great to see in more themes. What do you think?

Thanks to Thomas Scholz for the idea.