How To Add Header Image Support In WordPress

WordPress, as a CMS, helps you to add the Header Image in your site. But, will the used theme out of the box in your site will support it? No, we do not think so and you too have the same thought on it, right? We knew it since you were trying to do the same, ie, add header image support in your built in WordPress theme and could not do so, hence searched for it and accidentally landed on this page. Well, it looks like you are totally on luck in this. Here, we are going to describe about how to add header image support in WordPress.

What is Header Image?

Well, header image is the image of your site, which can represents the whole site about what is the main purpose of building it. Also, you can utilize it for linking it back to your homepage for better user engagement in your site.

Well, this too, ie, header image in WordPress has many more features includes in it, ie, it can be of any height and width as you desire for your site. From WordPress 4.7, you can utilize to display the Video on your home page utilizing the same feature and much more.

Integrate the header image support in WordPress

Now, since we have shared little bit of knowledge about what header image in WordPress actually is, now, we will move ahead and add header image support in our theme. So, let’s move ahead and get going on this work.

First of all, what you have to do is, you can to open your functions.php file of your theme. Now, after that, you can add the below PHP code in that file to add the theme support for the header image support in your theme:

add_theme_support('custom-header', array(
'default-image' => '', // set default header image
'width' => 1500, // set the width for header image
'height' => 500, // set the height for header image
'flex-height' => true, // enable flex height
'flex-width' => true, // enable flex width

Note: Since this function, ie, add_theme_support() needs to be supported via inside the hook of after_setup_theme() , hence you need to add the above PHP code inside the function, which this hook is present.

After doing this mentioned tasks, when you visit Appearance->Customize, you can find the Header Image section there. Now, choose the required header image from there and then to display the header image in your theme, you can simply paste the below code in the required file, where you want to display the header image in your site:

<?php the_header_image_tag(); ?>

Now, if you paste that above code, then, after setting up the header image in your site, you can simply see the output as the below on in your’s site too:


Now, if you have done the same task as mentioned above and is successful on how to add header image support in WordPress, then, we can assume that you are more familiar on this now than before and can integrate it more properly in any theme you build later on. But, if you are still confused and could not do the same as mentioned, then, do let us know via commenting on the comment box below and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.