3 Easy Steps to Add Support for Header Images to Your WordPress Theme - Jameel Evans

3 Easy Steps to Add Support for Header Images in Your WordPress Theme

Now that you have your header image hard-coded, you may not want to keep it that way for long. What if you of a client want a way to easily change it in the future? In this post you’ll learn 3 easy steps to add support for header images to your WordPress theme.

Table of contents

Have you ever wondered how in some themes you’re able to upload a header image, crop it and, PRESTO! It magically appears everywhere you want.

Turns out it not magic after-all. This functionality is called header image theme support, and it’s pretty easy to accomplish.

1 Add Theme Support for Your Header Image

In order to have the see the Header option in your WordPress Dashboard you must first tell your theme to enable the functionality.

This is pretty straight-forward! We’ll start by navigating over to the functions.php file of your theme and add this bit of code here:

Add featured image support with args

    
      $args = array('height' => 400,'width' => 1020);
        add_theme_support('custom-header', $args);		
      ));

or you can do it like this

Add featured image support without args

    
      add_theme_support('custom-header', array(
          'width' => 1020, 
          'height' => 400 
      ));

In The Code

In the code above we are telling our theme that we want to enable the header image support. We also set the recommended height and width of our images, which will show up in our WordPress customize dashboard. You can change these dimensions to whatever you want. These are also the dimensions that WordPress will crop your images to if they are too big. You’ll notice there are too block of code. One sets our height and with as $args variables, the other doesn’t. Both will work, Choose one. All this is done by the WordPress add_theme_support function. Learn more about if here.

2 Upload Your Header Image

Click on Appearance > Header > Header Image.
You’ll see a button that says, Add New Image, click it!
Upload a new header image. You’ll have the choice to crop your header image to the exact dimensions you specified. Select Crop Image.
Click on Publish to save your changes

3 Displaying Your Header Image

Finally, the good stuff! Go and preview your site, you’ll notice nothing changed. “WHY THIS HAPPEN?!”, you ask?

This is because we haven’t told WordPress where to place your dynamic header image. So let’s head on over to the file where you need to place your new header image and replace the src path with:

WordPress dynamic header tag

  
  <?php the_header_image_tag( ); ?>

In The Code

The WordPress function above simply adds the path to the header image you uploaded and cropped in your Dashboard. Learn more about the header image tag here.

BONUS How to Add Multiple Revolving Header Images

Wouldn’t it be nice if you could have a different header image every time someone visited your web-page? We’ll this is possible within our WordPress Dashboard too! This is also very easy to accomplish.

Just head back over to your Header Image Dashboard and add a couple more images then select Randomize Uploaded Headers. Now every time you refresh your website, you’ll see a new image!

Wrapping Things Up

So now that you know how to add theme support for header images to your WordPress themes, go and make all the headers in all of your projects dynamic.

Your clients will love you for it! If you have done something neat or just want to show off how I helped with your project drop a link below.