/WordPress Custom Header Template Tutorial for One of our Clients

This tutorial was made for Charlie’s Nursery and Garden Center by Amy Pospiech.

I’m going to explain how you can easily change the header image of your sub-pages based on a feature that I have custom-coded into your WordPress theme template. I’ll first take you through the image creation and uploading steps, and then I’ll show you how to make the one change within WordPress itself so that it’ll show on your site.

Let’s start with the image. Take any photo or artwork in your favorite image editing program, and crop it to a size of 510px wide by 210px high. Once you’ve created the image at the right size and you’ve done your processing, color correction, or anything like that, then you’ll want to save it as a .jpg with a specific file name based on the page where you want it to appear.

So, let’s say you have a page called “Annuals.” Well, that’s easy, we’ll save it as annuals.jpg

What about “Fresh Cut Flowers?” Save it as fresh-cut-flowers.jpg (replace all of the spaces with a “-“). This is actually the same name as your “page slug” in WordPress.

See here…

So, that’s pretty straightforward, and now that you’ve saved the image to your local computer, you have to upload it to your web server. Well, how do you do that?

Depending on your web host, there may be different options available, but in this case, you can login to your cPanel directly from your web browser. Another option would be to use a desktop FTP program like FileZilla (its a free download) which I prefer. For this tutorial though, I’ll show you how to use the charliesnurserynj.com cPanel since it doesn’t require you to install any additional software. That means you can do this from any computer that has a web browser!

So, let’s login. Now, scroll down and find the icon for “File Manager.” If it asks you which directory you want to go to, you can select the default “Web Root” and click “OK.”

Then, double-click the folder icon for the “wp-content” folder, then “themes,” then “lightword-garden,” “images,” “rotating-header.” The images have been saved into this folder to separate them from your uploads and other content which appears within your blog posts and around the site. I’m going to take a minute to explain to you what each one is:

• banner-spring.jpg
• banner-winter.jpg

…are the main or “default” header banners which we have used for the two seasons so far. I kept the winter one in there so you can use it again next year if you’d like, and we can add a banner-summer.jpg and a banner-fall.jpg later.

• header-banner-base.gif
• header-banner-base.png

…are the images that give you the nice Polariod-like quality with a drop shadow behind your header graphic.

The other 11 files are placeholder images I have created for each of your existing sub-pages, which you can overwrite with your new images when you are ready.

Now that we know what’s on there, let’s take the image we saved previously, and upload it using the “Upload” icon at the top of the page. Find you file(s) using the “Browse” button, and in the dialog that comes up “Are you sure you wish to overwrite this file?” select “Yes.” If you want to stop being asked each time, select the checkbox next to “Overwrite existing files:” and it will automatically overwrite them. When you are done uploading your new images, you can close your cPanel window(s).

Then what you want to do, is go to your WordPress site and login to the admin panel. Go to the page that you were working on, and on the right-hand side in the “Page Attributes” box you will see a dropdown called “Template.” You want to select “Custom Header” and then click the blue “Update” button. If you ever want to switch it back, just use “Default Template” instead. The only difference is that one uses your default homepage image for the header, and the other finds your custom image.

The yellow notification area tells you “Page updated.” Click the “View page” link to see your new custom header in action!

If you have any problems, double-check your image file name(s), and try refreshing the web page. The worst thing that can happen is you will see a blank area with a little red X in the upper-left corner of the header area, in which case just switch back to Default Template and reach out to me, and I’ll investigate.

That’s basically all there is to it. Two steps. One is upload the image to your web server, two is make sure your page is set to use the Custom Header template. Once you’ve done that one time, and you want to change the image again, it really becomes a one-step process: simply upload and it will show.

I hope you’ve enjoyed this tutorial and if you have any questions, send me an e-mail and I’ll be happy to answer. Talk to you soon.

Stay green,

Amy