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

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
24 ⁄ 8 =