International Airport, Wyoming

How to Remove Header Image from Interior Pages

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—hopefully—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 directory—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:


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:



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:

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­tionalif—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:

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:
    
    has been removed:original
    $header_image = get_header_image();
    if ( ! empty( $header_image ) ) :
    ?>
    
  2. with the Stack code:
    
    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.