Showing different header content per page – WordPress

I have recently finished customising a WordPress website for a client. After the site was finished he came to me with an idea:

Since we target different towns, it would be good if instead of showing our 0800 number we could show them one of our local numbers

The client is a Digital Aerial Fitter; he covers the south east of England. I initially though yes this would be easy, just create a new page template & header for each town with a different number that was until I saw how many numbers there were. Doing it that way just wouldn’t be feasible, mainly because I didn’t want a huge list of page templates, this solution does however involve creating multiple headers, but it’s easier than you think.

The benefit of having a totally different header file is that you can have totally different information in the header, for example you can use different images on every page if you wanted. Let’s get to it:

Step one

Login to your site via FTP and navigate to the themes folder, find header.php (it might be named slightly differently) and download it.

Step two

Open the header.php file in a code editor (or notepad) copy everything and create a new file named header-whatever.php (obviously you can rename the ‘whatever’ part).

Change the parts you want to have different to the standard header, so if it was a background image, you would give the header a new class and set the background in the CSS, once you have made the changes re-upload the file into the same directory you took the header.php file from.

Step three

Login to your WordPress admin and navigate to Appearance -> Editor, find the page template file on the right it’s usually called page.php (you should do this for all page templates).

Step four

Since I was creating different headers to show a local number, it meant some of our pages could show the same number, for example ‘Aldershot’ is right next to ‘Farnham’ they both have the same local area code so would both use the same header. For this I’ve put the pages into an array. This would work well if for example you wanted to show a different image for each section of your site, for example on the pages regarding ‘SEO’ you wanted to show a blue header, but on the pages regarding ‘Web Design’ you wanted to show red; in this scenario you would list all of the SEO pages into the array which displays the ‘blue’ header and the Web Design pages into the array that shows the red header.

Find the section in the page template file where the header is called, it should look something like this: ‘get_header();’, then replace it with the following (replacing the ‘page-here’ parts with the url of your page in this format: ‘my-first-page’ without ‘/’ or anything else):

The above is highly customisable, for example you can copy the ‘elseif section to add another header like so:

And likewise you can remove one, you can add as many pages as you like into the header array.

Let me know if you use this and how it works for you! Also if you need any help, post a comment below.