Adding Wordpress header Image Feature

Add header image in wordpress theme

As like as WordPress Background Image, WordPress header image feature also added from wordpress version 3.4. Through this functionality a user can easily add and change header image from wordpress dashboard account without touching any core files of wordpress theme.

i) To add this cool feature in any wordpress custom theme, firstly add this below small code in your theme Functions.php file

$args = array(
'flex-width' => true,
'width' => 980,
'flex-height' => true,
'height' => 200,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
add_theme_support( 'custom-header', $args );

Code Explanation:

  1. ‘flex-width’ => true, (Header image will be responsive )
  2. ‘width’ => 980, (Default header image width)
  3. ‘flex-height’ => true, (Header image will be responsive )
  4. ‘height’ => 200, (Default header image height)
  5. ‘default-image’ => get_template_directory_uri() . ‘/images/header.jpg’, (Default header image located in images folder and the name is header.jpg)

Extra arguments that you can use with this code are:

$args = array(
'default-image' => '',
'random-default' => false,
'width' => 0,
'height' => 0,
'flex-height' => false,
'flex-width' => false,
'default-text-color' => '',
'header-text' => true,
'uploads' => true,
'wp-head-callback' => '',
'admin-head-callback' => '',
'admin-preview-callback' => '',
add_theme_support( 'custom-header', $args );

ii) Secondly add this below code in Header.php (or others file depend on theme design and development) and save it.

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

iii) Check your wordpress dashboard account, you will see a new feature has added in Appearance – – > Header

Wordpress header image

Published by

Emdad Khan

I am Emdad Khan, A WordPress Theme Developer and Author of BN Web Design Website. A full time Freelancer on WordPress Theme Development & Optimization as well as blogger.

Leave a Reply