Tutorials Web Development

How to Implement Separate Headers for Pages in WordPress?

3.53/5 (15)

When I just started out in WordPress development, I had miserable skills and didn’t know a lot of things. Ironically, one of my first clients needed a small consulting site with different headers on different pages. And guess what? I didn’t have a clue how to do that. First, I tried to talk him out of this idea saying that the same header throughout the site would provide better usability for visitors. But no such luck. The guy was a tough call and didn’t back off.

So, I had nothing to do, but search for ways to add different headers to different pages. Fortunately, WordPress provides a lot of opportunities allowing users to achieve anything they want with minimal efforts. The platform is flexible enough to be modified in any form to add dimensions to its overall structure and functionality. With its plethora of plugins and themes, you can inject all kinds of additional features and options to confirm your strong digital presence.

Not only this, WordPress is great in enhancing your level of creativity by integrating as well as experimenting with those functions which aren't included by default. WordPress users can make the most out of this platform by going beyond to run or add anything they need as per their website requirements. One of them includes headers. Yes, you read it right it's headers.

WordPress users can revamp the look, feel, and functionality of their website headers to make their website look stunning and even better. WordPress headers can be added and modified to add labels, text or anything prominent which you want to showcase on the top of your website. Website owners can easily and efficiently create different headers for separate pages on their website and render them accordingly with the help of some resourceful set of code.

wordpress themes

For What Purposes Different Headers Can Be Utilized

There are times when online players feel the need of displaying some specific piece of information on the header, which is relevant to that page only for which it is created. This header will not be displayed on any other page apart from the targeted one. In such a scenario, a separate header is created after that add a PHP code to get the job done. Creating different headers isn't an uphill battle, provided you know the purpose and know about relevant code which can be used to accomplish your purpose.

In addition to this, one can also opt for adding different headers to display different menu sets on the homepage as well as inner pages. To do this, two different menus can be created from the back-end and then both of them can be assigned to their respective headers. Also, for those who are planning to run a marketing campaign can effectively utilize the strategy of constructing separate headers for each page so that the campaign could be hosted on the targeted page only. In such condition, an email capture box could be placed in the header, and it is rendered to only those pages wherein promotional campaigns are running.

As of now, you have gained a pretty good understanding of what WordPress headers are all about and how they can be used for different purposes. Now, in the next section of our post, I am going to discuss how we can add separate headers for different WordPress pages. So, look at the code below.

How to Create Headers for Separate Pages in WordPress

To create separate headers, first of all, create a new PHP file, and name it appropriately. Here I'll name my file header-your-page.php and put the complete code on the same.
To call a particular header, you will need to page template file call page.php and replace your normal header code with below code:

<!--?php /* */ if(is_page(23)) { get_header('about'); } else { get_header(); } wp_head(); ?-->

As you can see above, we have used get_header functionality. We have created a new custom file with the name header-your-page.php and have used if(is_page(23)) as an ID of the page for which we want to create a separate header. Further, get_header('about') is the same alias which was used while creating "header-your page name.php" example header-about.php.

In simple words, the code above is basically informing WordPress that if someone opens the page, which is 'about' then WordPress will display a file called header.about.php if it is existing. If the file does not exist, then WordPress will render the default header file.

Editing Existing WordPress Headers

You can not only create headers for different WordPress pages but also edit them to add an extra dimension to them. It's an extremely simple process. All you need simply open the file in any of the graphic programs such as Photoshop. You'll need to save the image again and edit the name of the file. Then reload it.

To locate the name of the file, just click right on the header image and select the option "view image". Once you click on the option, you'll be provided with the path to the image along with its stored location on the web server. This is crucial for a successful implementation of the header image editing task.

To Sum Up

As you can see, with the help of a simple code, you can easily implement separate headers for different WordPress pages. I hope this tutorial help you with how to get a separate header for each page. You can also make adjustments to their styles (the process is already mentioned above), so keep chipping away until you get just right.

5 Responses

  1. Thanks for the post, but the code sample is missing – it’s just an empty grey box. Tried it in Edge, Chrome, and FF.

    1. Likewise. Its a pity this article seems to have been abandoned.

  2. What will be the location of header-your-page.php file? Will it go in /themes/{Themename} folder?

Leave a Reply

Your email address will not be published. Required fields are marked *