How to Remove Header Image from Interior Pages

Header Image Mods

There have been a number of questions about modifying the default WordPress “TwentyEleven” theme’s header image setup. The following sections 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 comprehensive, but rather is intended as guide to—hopefully—help you figure out how to modify the header system in your TwentyEleven child–theme on your own. As always, if you need help you can tweet, post a comment, or email me your questions and/or comments. Down the rabbit hole we go …


Header img: How to Get Started Mod ’ing

I would imagine the first question is: “How Do I Even Begin?” The answer is relatively simple: “Figure Out How a Theme is Set–Up.” There are, I think, several good ways to do this:

  1. Search for a Model of a WordPress Theme;
  2. Search the WordPress Codex;
  3. Search Google for examples; and
  4. Review how a Child–Theme is setup:
    1. Theme Review: Digging into Twenty Eleven;”
    2. How to: Create a Child Theme Based on Twenty Eleven;” and
    3. Creating a Simple Child Theme Using Twenty Eleven.”

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

Examining the “Anatomy of a WordPress Theme” article reveals that the header images are being run via the header.php and functions.php files. Using that information and doing a quick Google search brought up a several good tutorials that cover how to remove, add, adjust, and otherwise mod the header image system for your 2011 child–theme.

  1. WPTI.PS: “Replace/Remove Default Header Image Twenty Eleven Theme.”
  2. VooDoo Press: “Adding and Removing Default Headers in TwentyEleven.”

Based on the information from these tutorials and the “Anatomy” article, the first step in modifying the header image setup in our Twenty Eleven theme is to make sure that we created a functions.php file for our child theme, and that we have copied the header.php file from the parent theme and added it to our child theme directory—see “How to: Create a Child Theme Based on Twenty Eleven” and “Creating a Simple Child Theme Using Twenty Eleven” if you need help creating the functions.php file and/or copying over files from the parent theme.

Examining the 2011 the functions.php and header.php files reveals that the header images are being initialized, 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' ) 
    ) 
    ) );
}

Following the WP Tips and Voodoo Press articles, the basic code setup for removing, adding, and modifying the header image system is listed below.

To Remove the Header Image
Use a code comment to turn off the header image:


There is, however, a better way to turn off the header images. Open the functions.php file from your child–theme and add the following 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 initialized and loaded by adding the following 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 carefully following the Tips and Voodoo tutorials. 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 necessitate that you create the thumbnail images (which are optional).
How to Remove the Images from Sub–Pages
The next step was to determine what WordPress 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 indicates that by modifying the conditionalif—statement the header images can be shown only on certains pages. I googled the code and got lucky; the fifth entry on the Google results page provided me with an answer on Stack Exchange’s WordPress Answers: “How to remove header image on subpages 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 original header.php code, starting 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 modified the header.php file; double–check:
    1. You added the code correctly (proof read);
    2. Verify that your header.php file is saved;
    3. Test your site in a browser;
    4. If the images are not showing up on your interior or subpages, you are done.
  4. Otherwise, start debugging. I would start by checking 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 showing up, send me a message or comment on the post.

I hope this short write–up will help you modify the header image system and learn something more about working with code WordPress. Again, tweet, post a comment, or email me your questions and/or comments.