How to Add a Custom Header Image to a WordPress Site

Sometimes you want to display a large image right across the top of your website. Maybe you want it linked to your homepage. Maybe you want it to display some advertisement from a big-pocket sponsor. Or maybe you want it for other reasons.

Whatever your reason will be, you can easily do so. Below are the steps to add a Custom Header Image to your self-hosted WordPress website (This example is for a banner image linked to the homepage).

1. Create a new sub-folder in the theme folder and name it images.

2. Save into the images folder your preferred header images (the file names below are examples):

  • sunset.jpg
  • sunset_thumbnail.jpg
  • flower.jpg
  • flower_thumbnail.jpg
  • lake.jpg
  • lake_thumbnail.jpg

3. Open the functions.php file and add the following lines of code to it (edit the width, height, and the names of sample images as you see fit):

// Register Custom Header
function themename_custom_header_setup() {

$header_info = array(
'default-image' => get_template_directory_uri() . '/images/sunset.jpg', // Default Header Image to display
'header-text' => false, // Display the header text along with the image
'default-text-color' => '000', // Header text color default
'flex-width' => false, // Flexible width
'width' => 1000, // Header image width (in pixels)
'flex-height' => false, // Flexible height
'height' => 250, // Header image height (in pixels)
'random-default' => false, // Header image random rotation default
'uploads' => false, // Enable upload of image file in admin
'wp-head-callback' => 'wphead_cb', // function to be called in theme head section
'admin-head-callback' => 'adminhead_cb', // function to be called in preview page head section
'admin-preview-callback' => 'adminpreview_cb', // function to produce preview markup in the admin screen
);
add_theme_support( 'custom-header', $header_info );

$header_images = array(
'sunset' => array(
'url' => get_template_directory_uri() . '/images/sunset.jpg',
'thumbnail_url' => get_template_directory_uri() . '/images/sunset_thumbnail.jpg',
'description' => 'Sunset',
),
'flower' => array(
'url' => get_template_directory_uri() . '/images/flower.jpg',
'thumbnail_url' => get_template_directory_uri() . '/images/flower_thumbnail.jpg',
'description' => 'Flower',
),
'lake' => array(
'url' => get_template_directory_uri() . '/images/lake.jpg',
'thumbnail_url' => get_template_directory_uri() . '/images/lake_thumbnail.jpg',
'description' => 'Lake',
),
);
register_default_headers( $header_images );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

4. Open the header.php file and add the following bits of code to it:

<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>