Header Image Mods

There have been a num­ber of ques­tions about mod­i­fy­ing the default Word­Press “Twen­tyEleven” theme’s header image setup. The fol­low­ing sec­tions will cover:

1. how to remove the header images using the functions.php file;
2. how to add your own images to the functions.php file; and
3. how to set the header image to appear on the front/​home page but not on sub – pages using the header.php file.

This post is not meant to be com­pre­hen­sive, but rather is intended as guide to — hope­fully — help you fig­ure out how to mod­ify the header sys­tem in your Twen­tyEleven child – theme on your own. As always, if you need help you can tweet, post a com­ment, or email me your ques­tions and/​or com­ments. Down the rab­bit hole we go …

---

Header img: How to Get Started Mod ’ing

I would imag­ine the first ques­tion is: “How Do I Even Begin?” The answer is rel­a­tively sim­ple: “Fig­ure Out How a Theme is Set – Up.” There are, I think, sev­eral good ways to do this:

1. Search for a Model of a Word­Press Theme;
2. Search the Word­Press Codex;
3. Search Google for exam­ples; and
4. Review how a Child – Theme is setup:
   1. “Theme Review: Dig­ging into Twenty Eleven;”
   2. “How to: Cre­ate a Child Theme Based on Twenty Eleven;” and
   3. “Cre­at­ing a Sim­ple Child Theme Using Twenty Eleven.”

Header img: How To Remove the Images & Add Your Own Images

Exam­in­ing the “Anatomy of a Word­Press Theme” arti­cle reveals that the header images are being run via the header.php and functions.php files. Using that infor­ma­tion and doing a quick Google search brought up a sev­eral good tuto­ri­als that cover how to remove, add, adjust, and oth­er­wise mod the header image sys­tem for your 2011 child – theme.

1. WPTI​.PS: “Replace/​Remove Default Header Image Twenty Eleven Theme.”
2. VooDoo Press: “Adding and Remov­ing Default Head­ers in Twen­tyEleven.”

Based on the infor­ma­tion from these tuto­ri­als and the “Anatomy” arti­cle, the first step in mod­i­fy­ing the header image setup in our Twenty Eleven theme is to make sure that we cre­ated a functions.php file for our child theme, and that we have copied the header.php file from the par­ent theme and added it to our child theme direc­tory — see “How to: Cre­ate a Child Theme Based on Twenty Eleven” and “Cre­at­ing a Sim­ple Child Theme Using Twenty Eleven” if you need help cre­at­ing the functions.php file and/​or copy­ing over files from the par­ent theme.

Exam­in­ing the 2011 the functions.php and header.php files reveals that the header images are being ini­tial­ized, arrayed, and called from line 78 in the header.php file:

<?php
// Check to see if the header image has been removed
	$header_image = get_header_image();
	if ( ! empty( $header_image ) ) :
?>

and from line 143+ in the functions.php file:

// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array(
	'wheel' => array(
	'url' => '%s/images/headers/wheel.jpg',
	'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
	/* translators: header image description */
	'description' => __( 'Wheel', 'twentyeleven' )
	),

	.
	.
	.

	'hanoi' => array(
	'url' => '%s/images/headers/hanoi.jpg',
	'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg',
	/* translators: header image description */
	'description' => __( 'Hanoi Plant', 'twentyeleven' )
	)
	) );
}

Fol­low­ing the WP Tips and Voodoo Press arti­cles, the basic code setup for remov­ing, adding, and mod­i­fy­ing the header image sys­tem is listed below.

To Remove the Header Image

Use a code com­ment to turn off the header image:

<!--Turn Off WordPress Header Image
<?php // Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image )) :
?>
-->

There is, how­ever, a bet­ter way to turn off the header images. Open the functions.php file from your child – theme and add the fol­low­ing code:

//	Remove 2011 Default Images
function theme_header_remove() {
unregister_default_headers();
}
add_action( 'after_setup_theme', 'theme_header_remove', 11 );

To Add Your Own Images

To add your own images the default header images need to be removed and then your images ini­tial­ized and loaded by adding the fol­low­ing to the child – theme functions.php file:

//	Remove 2011 Default Images
function theme_header_remove() {
unregister_default_headers( array('wheel','shore','trolley','pine-cone','chessboard','lanterns','willow','hanoi') );
}
add_action( 'after_setup_theme', 'theme_header_remove', 11 );

//	Add 2011 Custom Images
function theme_header_add() {
$theme_dir = get_bloginfo('stylesheet_directory');
register_default_headers( array (
'image-1' => array (
'url' => "$theme_dir/images/image-1.jpg",
'thumbnail_url' => "$theme_dir/images/image-1-thumb.jpg",
'description' => __( 'Description Text', 'twentyeleven-child' )
),
'image-2' => array (
'url' => "$theme_dir/images/image-2.jpg",
'thumbnail_url' => "$theme_dir/images/image-2-thumb.jpg",
'description' => __( 'Description Text', 'twentyeleven-child' )
)
));
}
add_action( 'after_setup_theme', 'theme_header_add' );

Make sure to care­fully fol­low­ing the Tips and Voodoo tuto­ri­als. Also, be sure to replace image-1, etc. with the actual names of the image files you are going to use. Caveat: adding your own images this way will neces­si­tate that you cre­ate the thumb­nail images (which are optional).

How to Remove the Images from Sub – Pages

The next step was to deter­mine what Word­Press had setup in the header.php file that I would allow me make the header images show only on the front/​home page but not the sub – pages. The code from the 2011 header.php file:

<?php
// Check to see if the header image has been removed:original
$header_image = get_header_image();
if ( ! empty( $header_image ) ) :
?>

This code indi­cates that by mod­i­fy­ing the con­di­tional—if—state­ment the header images can be shown only on cer­tains pages. I googled the code and got lucky; the fifth entry on the Google results page pro­vided me with an answer on Stack Exchange’s Word­Press Answers: “How to remove header image on sub­pages in Twenty Eleven (default theme)?”

The code from StackExchange:

<?php
// Check to see if the header image has been removed:modified
$header_image = get_header_image();
if ( ! empty( $header_image ) && is_front_page() ) :
?>

The answer:

1. Replace the orig­i­nal header.php code, start­ing on line 78:

   
   <?php
   // Check to see if the header image has been removed:original
   $header_image = get_header_image();
   if ( ! empty( $header_image ) ) :
   ?>
   
   

2. with the Stack code:

   
   <?php
   // Check to see if the header image has been removed:modified
   $header_image = get_header_image();
   if ( ! empty( $header_image ) && is_front_page() ) :
   ?>
   
   

3. Once you have mod­i­fied the header.php file; double – check:
   1. You added the code cor­rectly (proof read);
   2. Ver­ify that your header.php file is saved;
   3. Test your site in a browser;
   4. If the images are not show­ing up on your inte­rior or sub­pages, you are done.
4. Oth­er­wise, start debug­ging. I would start by check­ing that you:
   • saved the header.php file,
   • that you saved it to the right location,
   • and that you refreshed your browser.
5. If the images are still show­ing up, send me a mes­sage or com­ment on the post.

I hope this short write – up will help you mod­ify the header image sys­tem and learn some­thing more about work­ing with code Word­Press. Again, tweet, post a com­ment, or email me your ques­tions and/​or comments.