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:
or you can do it like this
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:
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.
Previous Resource3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme
Blog posts authored by Jameel with easy-to-navigate table of content
Starters Guide to Git & GitHub in Web Development
The Definitive Guide to 508 and ADA Website Compliance
3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme
Here's a couple of recommendations from Linkedn