In this tutorial we’ll examine the case when you want to have different headers on different parts of your WP website. Firstly we will show you how the WordPress get_header function works. Then you’ll learn how to structure your own multiple header PHP code and apply it to your WordPress website.
Possibilities and benefits of a WordPress multiple header website
Since you’re reading this tutorial, you probably already have an idea of what are the possibilities of a WordPress multiple header website. Multiple headers have great visual and/or functional possibilities to enhance a website. Header changes can range from quite simple to very complex depending of each specific project needs.
From the visual standpoint, the website header can change it’s color, design and layout when moving trough different sections of a website. Multiple headers can be also used to display different information on different website sections or even show or hide some elements. Speaking of functionality, you can for example use a slider on the homepage header and images on other website pages. You can also use different menus, header widgets or any other elements on various sections of a website. To achieve all of that, firstly you have to learn how the WordPress get_header function works.
The website header that changes it’s elements layout and visual appearance can significantly improve the website functionality and user experience.
Introduction to the WordPress get_header function
The usual file structure hierarchy of a WordPress website consists of few main template files. Those main template files load the secondary template parts that form the complete web page. For example, the WordPress get_header function inside one of the template files loads the header template part and displays the website header.
In most cases, the main template files are the following:
- index.php structure the website homepage
- page.php structure the sub pages
- single.php define the website’s posts structure
- archive.php or category.php define the structure of post archives
- search.php structure the website search results page
As we mentioned before, each of those template files uses the WordPress get_header function to load the default website header. The get_header PHP code is usually located at the very beginning of each template file. The default get header syntax is get_header(); without any parameter inside the brackets and it will load the content of the header.php template part.
Using the WordPress get_header PHP code to create a multiple header website
Now let’s create a website that will display a different header on it’s homepage, on the sub pages, and accordingly on the posts. Let’s say we want to display the default header on the homepage. No problem about that, we’ll leave the index.php untouched to behave as we explained in the introduction. The WordPress get_header PHP code in there, without additional parameters, will load and display the default header.php file.
To create a multiple header WordPress website, firstly we have to create additional header template parts and customize them. Creating multiple header template parts is quite simple. All you have to do is duplicate the header.php file and rename it by adding a custom parameter to the file name. To do so, you have to access your WP theme folder using a FTP client, cPanel File manager or a File Manager Plugin.
So, follow this simple steps to create additional custom header template parts:
- open your WordPress website theme folder using a File manager
- duplicate the file header.php two times (or as many times needed in your case)
- rename the duplicate header.php files by adding a parameter to the file name (in our example header-single.php and header-page.php)
- customize the newly created header template parts according to your needs
Adding multiple headers to template files using the WordPress get_header PHP code
With the first step of creating a multiple header website completed, now is time to add the newly created custom headers to the main template files. As mentioned earlier, in our example we’ll leave the default header on the homepage. That means that we’ll leave the WordPress get_header PHP code in the index.php template file without a parameter. To make the page and post templates load their own custom headers, we need to add parameters to the WordPress get_header function in those template files.
- open the single.php file inside the WordPress theme editor
- locate the get_header(); function, usually at the beginning of the file
- add the parameter you used when renaming the header.php file to the get_header function
- in our example the modified WordPress get_header PHP code should now be get_header(‘single’);
- modify the page.php file the same way using the page parameter inside the function get_header(‘page’);
Your WordPress multiple header website is done
If you completed the simple procedure described in this tutorial successfully, you just created a WordPress multiple header website. The customized WordPress get_header PHP code will display a different header for your homepage, your sub pages and the blog posts. Now you can create a customized header for any template file on your website using the same procedure. To learn more about the get_header function, we suggest you consult the WordPress Code Reference.
Pro Tip: Did you know you can use a similar procedure to create multiple footer websites? Our Multiple footers WordPress tutorial will guide you trough the process and help you to furthermore enhance the user experience of your website.