Different Headers In WordPress

Setting Different Header Images In WordPress

So, you want to change the Header Image for the different sections of your site, eh? Well…

*** Before I begin, a very quick caveat: Not all WordPress Themes are coded the same way. ***

Why am I covering myself with this warning? The Theme that I’m going to be referencing is coded in a way that a lot of Themes are but should you go onto try this for yourself on your Theme it might not be functionally the same.

So…
 

Things You’ll Need

1 – An IDE or Text Editor. There are many different apps out there for this, my personal choice is Coda by Panic. Basically you need to be able to directly edit Theme files in a WordPress Theme, which leads to the next thing
2 – A Web Server. WordPress runs on PHP and MySQL which need a Web Server Environment to run.

You can either do this exercise on a live site somewhere out on the internet or you can download a Local Server bundle like MAMP for Mac or XAMPP for Windows, Mac & Linux.
3 – An FTP Client. If you’re going to download the files from the Web Server to edit them and then upload the edited versions then you’ll need an FTP Client to handle this. The most popular free one is probably FileZilla. It’s available for both Mac & PC and is very reliable and feature rich. Be sure to read the Support Documents on the site if you’re new to FTP…
4 – Knowledge of HTML, CSS and PHP. Also a good working knowledge of how WordPress works; Template Hierarchy and Child Theme Creation especially as well as Template Tags and creating New Theme Templates.
5 – Coffee & Patience! We both know why 😀
 

Assumptions:

I am assuming that you have a WordPress Installation to play with and that you have created a Child Theme to make your edits.

I also assume that you have sourced your Images and sized them to fit your needs. You should have also uploaded them to your site’s Media Library as you’ll need to get the URL of the image from here…

So, with that in mind, let’s dive in.
 

Child Theme Files

There are some files I just copy over to my Child Themes by habit as they’re the files that generally need a tweak here and there:

  • 404.php – always a good idea to customise a 404 page
  • archive.php
  • category.php (if it’s been created by the Parent Theme’s Developer, if not you can usually duplicate the archive.php page and rename it category.php)
  • footer.php
  • header.php
  • page.php
  • Search.php

These files give you the flexibility to make some real changes to the look and functionality of your Child Theme without having to delve into the functions.php file (where you shouldn’t go poking about!)
 

Making A New Page Template File

We’re going to take a look at setting this up for Pages within WordPress. We’ll explore Categories too but Pages first.

In your WordPress installation find and duplicate the page.php file. Click on the name of this file to rename it. For example, if you have a section of your site dedicated to Ferraris you could change the page name to page-ferrari.php

Open page-ferrari.php in your IDE or Text Editor; at the top of this file you’ll see the Template File’s Header information. We need to edit this so that it becomes a usable Template in our Theme.

Whatever is currently written there needs to go and be replaced by the following:


/**
* Template Name: Call it what you want
**/

Now, if you go into your site’s Dashboard and head over to the page that has your Ferrari Section, in the Editor you should see a selection box on the right hand side where you can choose the Page’s Template. The dropdown should now have your newly created Template listed.

Select it and Update to save the changes.

Now, if you go back to the Frontend of your site you’ll notice that nothing has changed. Don’t panic, we have yet to do the hard work 🙂

Go back to your WordPress installation’s files and in the Child Theme’s folder duplicate the header.php file. We’re going to rename this file to header-ferrari.php (you’ve probably spotted a pattern forming…)
 

Diving Into Some Code…

For this tutorial I will be referencing the ThemeAmple“, a very slick, mobile ready Theme.

This Theme has two places in the code where you can set your Header Image. For the moment I will be using the place in the code where it puts the image under the Main Menu.

Inside the Masthead div in the header-ferrari.php file this code is what controls the display of the image in the Header:


<?php if( ample_option( 'ample_header_image_position', 'above' ) == 'below' ) { ample_render_header_image(); } ?>

I’m going to go ahead and delete this piece of code. (don’t worry, this is non-destructive editing, the original code in header.php is fine)

In it’s place I’m going to paste in some straight HTML code to display a specific image with the URL of the file in the Media Library for this picture.


<img src="http://yoursite.com/wp-content/uploads/folder-location-etc.jpg">

As a bonus aside, if your Theme hasn’t got this set you can wrap the img tag inside an

<a href="">...</a>

tag to create a linked image that takes users back to the Homepage like this:
 

<a href="<?php bloginfo('url'); ?>">
<img src="http://yoursite.com/wp-content/uploads/folder-location-etc.jgp">
</a>

Obviously you don’t have to do this but sometimes it’s a good idea to give people a massive “HOME” button.

Right! Back to the point.
 

Back To page-ferrari.php

Let’s go back to the Page Template we created to handle all the Ferrari stuff on our site; in here, near the top you’ll see


<?php get_header(); ?>

As you can imagine, this little code snippet calls the header.php file to load in the Themes’ Header information. On it’s own, in this form it will call the Default header.php file that ships with the Theme. In order to use our Custom header-ferrari.php file we need to call this file in the get_header(); function.

You can do it like this:

<?php get_header( 'ferrari' ); ?>

You may have spotted that we only called the “Ferrari” bit of our custom Header file name, this is the way that WordPress works. Don’t sweat the details!
 

Check Yourself!

If you go back to the Frontend you should now see your Ferrari specific Header image showing.

“This is all well and good, Jack, but what about setting up Header images for lots of different sections of my site?”

Well…
 

Multiple Header Images For Different Site Sections

Head back to your WordPress installation and the files of your Child Theme. Duplicate the page.php file again and rename it page-section-headers.php (you can call it whatever you like but the more logical and obvious the name the easier it is to find it later!)

Open this newly minted file in your IDE or Text Editor and change the Template Header code to something like:


/**
* Template Name: Section Headers
**/

 

Create All The Header Files

This is where things get pretty repetitive:

  • 1 – Source relevant images, edit and upload them all to your site’s Media Library
  • 2 – Get the Urls of the images from the Media Library, save them to a handy text file for reference
  • 3 – In the WordPress installation Child Theme files, duplicate header.php
  • 4 – Rename header.php to header-section-name.php (***change section-name to whatever your Section is actually called!***)
  • 5 – Find where the file is handling the display of the Header Image and add in the <img src=""> code with the Url of the image
  • 6 – Go to Pages and under the Quick Edit option select your Section Headers Template
  • 7 – Repeat steps 3 – 6 until you have header-x.php files for all of your sections

The next step is where we get to some logic coding…
 

Conditionals In WordPress

In order to make the magic work you’ll need to set up some Conditional Testing so that WordPress can select the right image based on which section/page it’s loaded. Fortunately this is quite simple code and won’t make you break out in a cold sweat! 🙂
 

The Code

We are going to be using “if/elseif” statements to test the current Page and load the right header-x.php file.

In your page-section-headers.php file, near the top you’ll see the get_header() call. This is likely to be inside an opening php tag at the top of the page:


<?php
/**
Template Name: Section Headers
**/
get_header();
the rest of the header file from here on...

We need to add in some more php to make this do what we want. So we’re going to use this bit of code:


<?php
/**
Template Name: Section Headers
**/
if ( is_page('page-name'))
{ get_header('name'); }
elseif ( is_page('page-name-2))
{ get_header('name-2'); }
else
{ get_header(); } //loads the default header if there's no header specified

the rest of the header file from here on...

 

With a bit of luck that code makes sense to you!
 

More Supercars!

Let’s say you have sections on your site for different brands of Supercar; if you’ve been following along you’ve created a header.php file for each section of your site.

With that in mind, below is the code required to make a site with 4 different supercar sections show a different Header image for each section (modify this to suit your site’s needs):


<?php
/** Template Name: Supercar Headers **/
if ( is_page( 'ferrari' ))
{ get_header( 'ferrari' ); }
elseif ( is_page( 'astonmartin' ))
{ get_header( 'astonmartin' ); }
elseif ( is_page( 'porsche' ))
{ get_header( 'porsche'); }
elseif ( is_page( 'bugatti' ))
{ get_header( 'bugatti' ); }
else { get_header(); } //loads the default header of the theme

the rest of the header file from here on...

 

Teting This Out…

If we were to go to our theoretical site and visit the different sections we should now see a section specific header for each.

Try this on your own site and see if it works for you. (hopefully it does, if it hasn’t then drop me a line)
 

Some Good News!

This concept and a slightly tweaked version of this code both work for Categories. You will need to create a new Category file for this to work. It’s much the same as creating a new Page Template; if the Theme you’re using as a Parent has a category.php file just duplicate that and rename it to something appropriate (no need to add in any header code in /* … */ tags) like category-aston-martin.php (it will have to be named the same as the slug of the Category is; you can find this in the Dashboard by going to the Categories section and view it there).

If you have a category on your site and you want it to have a specific Header image then instead of if ( is_page() ) you can use if ( is_category() ) and specify the Category in the is_category() brackets.

WordPress Template Hierarchy will take care of the details behind the scenes to make sure that the required Category file is loaded and the code you’ve added in will be parsed and the header image will be the one you want 😀
 

Even Better News!!

If you want every post in that Category to share the same Header Image as the Parent Category then you can do that too! You need to use a slight variation on the is_category(); function and use the in_category(); function instead like this:


if ( in_category( 'aston-martin' ))
{ get_header( 'aston-martin' ); }
else
{ get_header(); }

Simple, right?

What this basically does is assess whether the current Post is in the Category of Aston Martin and if it is it loads the correct header-aston-martin.php file. If it’s not in the Aston Martin Category then WordPress will load the default header.php file instead. This is what is happening behind the scenes as you navigate through the Posts in the Guides section of this site. 🙂
 

In Summary

Hopefully this walk through has been clear and helpful. You don’t need to be a coding guru to make this happen, it’s just using a couple of the built in WordPress functions and a few Theme files.

  • if ( is_page() ) { do_stuff(); } Checks to see if the current Post is a Page and this function can take a value in the is_page() brackets to load something more specific than the default. This only works in Page Template files.
  • if ( is_category() ) { do_stuff(); } Checks to see if the current Post or Page that’s loaded is a Category Archive with sub Posts. is_category() can take a value to load some category specific information like our custom header.php file
  • if ( in_category() ) { do_stuff(); } Checks to see if the Page or Post loaded is a Post inside an existing Category. in_category() takes a value to check whether the Post is in Category ‘x’ and loads the category specific information you tell it to.

If you have any questions or issues you can Contact Me on this site or get me on Twitter

In the meantime, take it easy and speak soon.

Different Headers In WordPress