Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
While displaying the title and tagline of your site with a nice color background is great, sometimes you want to add a header image as a background or maybe even replace the title with just the header image. That way you can display a company logo or your own custom graphic, or just add an image to add some flavor to your site. WordPress has a built in custom header image option that can be controlled from the admin panel or from the theme customizer. And we activated this feature when we enabled the custom header function.
Now we need to make that header image function actually work with our theme. So the first thing we need to do is go and configure the header image option to provide us with a header image that is the correct size for what we want. This is done under the Include folder in the custom header template. Here, you'll remember that if we scroll down, we'll find the section that says add_theme_support custom-header, and this is where we set up the custom header feature for our theme. The variables here allow us to set a default image, so if you want an image to always appear, if no image has been defined, then you can put the URL to that image in here.
I'm going to leave that blank. In the previous movie, we also set the default text color. So now we want to set the width, height and also whether or not the image can be of flexible height in the settings. So I've done some calculations, and tested with my design, and I've decided on a width of 280 pixels and a height of 300. And for this particular theme, I want to set flex height to false. That's because flex height allows you to upload an image, and then change the height of that image.
So you can imagine if you upload a very large image, then all the content on the page would be pushed down. So if you upload a very, very large image you would never see the content. You would just see the image. So I want to restrict the image height to 300 pixels. I'm going to set flex height defaults. Now I'll save the custom header file because I need to save my settings and then I need to add in the code that will display the actual header image in my header. So, of course, first I need to go and grab header.php. And find where I want to display the header image.
And the standard placement of the header image is usually above the site branding, so I'm going to make some space here, then I need to add in the actual code that will display the header image. And fortunately for us, that code has already been prepared for us by the people who created underscores. If you scroll all the way to the top of custom-header.php, you'll find the section that says you can add an optional customer header image to header.php like so and that it has some code. So all we need to do is copy out the code.
Paste it in, and I'll do some cleanup here by tabbing it in. And now you've added a conditional statement that says if there is a header image then set up a link that points to the whole URL and then display the header image. That means if we upload a header image to our site now, the header image will display. And if you click on the header image you're taken to the front page of the site. So, that's exactly the kind of behavior you want from a header image. Now I'm going to save header.php, go back to my site and reload the front page.
And nothing happens, that's because we currently don't have a header image. So, now we need to go to the back end. So I'll go to the WordPress toolbar and select Header. You can also go to the Dashboard and go to Appearance, and Header. And from here, I'm going to choose a file. And you see that right now, WordPress is asking for an image that is 1280 by 300. So I'll choose a file. And this is a much bigger image. So I'll upload a very large image. And because we specified a specific size, WordPress will now help us crop the image to that size.
So here I'm going to pull the crop down. To here, and then click Crop and Publish. And WordPress now creates a new image for us that is the correct size and I can save these changes and jump to the front page. And now we have a header image, at the very top. And if you click on the header image you go to the front page of the site. Now that we've added a new element to our template, we also need to style that element. because you'll notice right now, the header image is not floating center. It's off to the left hand side and it also has that pesky extra space on the bottom that all images have when you just add them in to the content.
So I'm going to go to my header.php file and then, inside my conditional statement, I'm going to add a new divider. And I'll give it the class, header-image. And then I'm going to shift in the anchor here, and I'm going to close my divider. And that way I can go to my CSS file, style.css, navigate to X.X, which is where we put the header. And here at the very top I'm going to add in a new class called header-image, and then I'll only target the image inside.
And here I'll set the display to block so that the padding on the bottom disappears. And I'll set margin to zero. So, no margin at the top or bottom and auto, so that it centers itself. I'll save style.css, reload my page, and now my header image is in the middle and there is no border on the bottom.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65348 Viewers
61 Video lessons · 96174 Viewers
56 Video lessons · 109982 Viewers
82 Video lessons · 105032 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.