Topic Progress:

Course Progress

2: Adding Media To Your Header

Running Time:  5:28

Adding a header image or video is very common in many WordPress Themes. This is done at Appearance > Customize > Header Media.

While you can crop your header image within the WP Admin it’s best to start with an image size that is optimal for your theme. (In the case of the Twenty Seventeen Theme the optimal size is 2000px wide X 1200px high).

Get Access To Over 50 Free Videos  So You Can Learn WordPress

Transcript Of This Video

One of the things that is very common to many WordPress themes is the use of a header image. Here is a nice big header image on my home page, and the same image is being used in a different way for the other pages of my site. Clearly, this is not an image that is suitable for my site, so I want to substitute an image, get rid of this one and put my image in there. I’m going to go into the “Admin,” “Dashboard,” and I’m going to go into “Appearance,” “Customize.” Many people call this the “Customizer,” while it is the WP admin it looks different. What you’re seeing here is a menu of options on the left-hand side, and on the right-hand side, you’re seeing a preview of what the site will be once you make changes. I’m going to go right over here to “Header image,” and no matter what theme you use if you’re going to change your header you want to read through all this. One of the things I noticed is that the optimum image size for my header will be 2,000 pixels wide by 1,200 pixels high. I’m going to keep that in mind. Now, I don’t like this image at all. If I just wanted to get rid of the image altogether, I would click “Hide image,” and then I would save the changes. Here’s what it looks like. Look, no image. Right over here, no image. But that’s not exactly what I had in mind, and I want my own image to be there. So what I’ll do is go over here to “Image,” that makes sense, and I’m going to find the image that I have right over here. Go into “My images,” and I’m going to upload the image right over here.

Perfect, we don’t need this anymore. You could see right over here the image is 2,000 pixels wide by 1,200 pixels high just as specified for my theme. If you’r e using a different theme, chances are you’re going to be using a different image size. I’m going to put in my alt-text, which I like to do. I’m going to do “In My Garden,” and then I’m going to select that image. Now, when you’re adding a header image, it’s very common that you get to this “Cropper page” as I like to call it, so you can change the image dimensions if you want. I want it just the way it is, but I’m just showing you that you have this crop tool for header images. So, I’m just going to keep it as is. Perfect. It’s exactly what I want. Now if I want to take a look at the smaller version, there it is for other pages. In fact, let’s save this and take a look at the site. We’ll close this all up, and we’ll go to look at the site, and look at this. Yes, I know I have this title in here, and I’m about to get rid of it altogether. What I want to do is take a look at these other pages. Here we go. That’s the smaller version. That’s fine. OK, I don’t like that title. It doesn’t look right. How do you get rid of that? This is very common in many themes that you’re going to run into. Again, back to “Appearance” and “Customize.”

We will now look at “Site identity.” In this case, I’m displaying the title and the tag line.

So what I’m going to do is deselect this option right over here, and look at that. Gone. I would not recommend this– Which would be to keep that and remove this. All right, you could delete– No. Don’t do that. This is very important information, especially for search engine optimization and assistive technologies, and you don’t want to do that. You want to do this. Just hide it like that, and save, and you’re good to go. The last thing I want to do is substitute my image with a video because that’s kind of cool. Right over here I’m going to go back to this and then let’s go back to “Header media” again. And now this time I’m going to select a video, and the video is already there. So let’s see what we’re going to do with this. OK, select. Look at that, poor Arlene working so hard. One of the things that my theme recommends is that you have a backup image in case a browser or some device doesn’t support the use of video in this way. I do have a backup image, and it’s going to be this image right over here, so if this wasn’t available then the user– If the user couldn’t see the video then they would see this image over here. Bottom line is I don’t want the video at all, so I’m going to remove it. We’re back to that image that I want, we’re going to save, and let’s take a quick look at the site as it is right now. That’s perfect, just what I want.

All 6 Modules In This Course

  • All Free Access

    To see all the videos in this course just fill this out to create your free account.

  • Please Read This

    You're about to subscribe to my WordPress Big 3 newsletter and that's a good thing!

    I'll keep you up-to-date with WordPress news, resources and advice delivered to you almost every Sunday.

    My newsletter is commercial free except for an occasional announcement of a discount for one of my services.

    No worries. Your email address will be kept safe and sound with MailChimp. I will never use it for any reason other than sending the WordPress Big 3 Newsletter to you. I value you and your privacy.

    If you don't want my newsletter you will still be able to see many videos in this course.

Illustration of 2 people talking

Get A Free 60 Minute Screen Sharing Consultation From Bud Kraus, Experienced WordPress Site Developer and Instructor