The unprecedented customization opportunities available with WordPress have made it one of the leading content management systems (CMSs) used by web developers all over the world. With an impressive flexibility to add specific dimensions to a website’s structure and overall functionality; WordPress comes with a wide range of themes and plugins you can choose from. One of the widely recognised flexibilities available with WordPress is to include custom headers for different pages within a WordPress powered blog or website. This is a tutorial, which makes you familiar with steps associated with addition of custom headers for pages within your WordPress website/blog.
Understanding the significance of having different headers for different pages in WordPress website
There are situations wherein you need to display certain type of information on the header available on a specific WordPress page. It is here that the concept of adding custom headers comes as a handy option. This custom header would be displayed only on the targeted page and not on all the pages available within your WordPress website. All you need to do is simply know everything about the PHP code that would allow you to accomplish the task of adding a new header for a particular WordPress page. And that’s not all. It is a custom header, which allows you to display an entirely different menu set on your website’s homepage and inner pages. If you’re about to run an online marketing campaign for your business, then you can effectively leverage individual headers on WordPress pages to host your campaign on targeted web pages only.
And now, let me walk you through the steps associated with creation of different headers for pages in WordPress
Step 1 – Create a new PHP file
As the very first step, you need to create a new PHP file and name the same in accordance to your preference. In this tutorial, I’ve named the PHP file as header-your-page.php and insert the code into the same.
Step 2 – Create a new page template file
Next, in order to call a specific header, you need to have a page template file. In this tutorial, I’ve named this file as page.php. Now, I’ll be replacing the normal header code with the one mentioned below:
<!--?php
/*
*/
if(is_page(23)) {
get_header('about');
}
else {
get_header();
}
wp_head();
?-->
As is visible in the above code snippet, I’ve used the get_header functionality. For this, I’ve created a custom PHP file named header-your-page.php and have used ID of the webpage (i.e. if(is_page(23)) for creating a new header. Moreover, I’ve also used get_header(‘about’) method which is similar to the one that has been used for creating the “header-your-page.php” file.
All in all, the above code snippets informs WordPress that in case someone opens the ‘About’ page, then the file called header.about.php file should be displayed. However, if this file doesn’t exist, then WordPress should display the default header file.
Some useful Insights on editing existing WordPress headers
In addition to rendering you the flexibility of creating separate headers for different pages, WordPress also allows you to edit the existing headers for web pages. To get started with the header editing task, all you need to do is simply open the file for the page using Adobe Photoshop software program. An easy way to locate the name of the PHP file is simply right clicking on the image of the header and selecting the option “view image”. On clicking the header image, you’ll be provided with path of the image in addition to its storage location as on the chosen web server. After this, you just need to save the new image for the header, followed by editing the name of the PHP file and finally reloading the concerned web page.
Wrapping it all up
Having a separate header for different pages within your WordPress website/blog is definitely a plus point for you as the website owner. I’m sure the above tutorial would have allowed you to gather excellent details about getting a custom header for each of your WordPress pages. So, the next time you’re in a need for an individual header for any of your web pages, do follow the steps covered in this tutorial for meeting your goal.
