How to Hide the Header on Specific Pages in WordPress
Posted on Updated onWordPress tries to create a uniform look for all your site’s pages. So certain elements like the sidebar, the navigation area, the header and footer are a constant by default. Modifying these often requires you to go into the theme and make changes. For example, if you want to create different headers for different pages, you normally have to create a new header template, and change the way the “get_header” call is made.
But what if you don’t have access to your theme code? Or what if you want to make these changes from a plugin? What if you don’t like the idea of messing around in your theme code and don’t want to go to all the trouble of creating a child theme? Unfortunately, if you want to display different headers, you have no choice but to do the above. Luckily for us however, we can hide the header on specific pages without too much fuss with a bit of CSS wizardry.
Why Remove the Headers from Certain Pages?
The most obvious use case scenario is landing pages. These are specially crafted versions of pages that are designed with the specific purpose of eliciting a desired behavior from the viewer. Either a sign up, or a purchase. Or a landing page can even be the front most page of your site and you want it to have a “Wow!” factor. For this reason, you might want to remove the header and the navigation elements to create the maximum impact on the user.
In this tutorial, I’ll show you how to remove these via CSS. The problem with CSS however, is that it’s usually site-wide. Yes, there are certain themes and plugins that allow you to create special CSS code for individual pages. But not all of the themes have this feature. This can make it tough to apply CSS only to certain pages. But I’ll show you how to achieve that.
As an example, here is the page whose headers I’m about to remove:
Step 1: Get the CSS Handles of the Header
The first step is to craft the CSS that is unique to your theme. Each theme’s header area has a different CSS identifier. We can use the browser developer tools to find out the class or the IDs necessary. For example, my Genesis theme has the following header elements:
Based on this, the CSS to hide the header will be:
#header {
display:none;
}
#nav {
display:none;
}
Step 2: Create a Category for the Front Page
We need a way to refer to the “front page” or the “landing page” from which you want to remove the header. One way to do this is to create a separate category called “Landing Page” like I’ve done here:
There are other ways to identify it of course. You can simply use the post ID, or use a tag, or something else. Whatever you use, you should know how to refer to it in code. This is important so that we get the conditional tags right in the next section.
Step 3: Insert the Code into functions.php
Finally, we can insert the following code into functions.php, or wherever you place your custom PHP code:
function remove_header() {
if (!in_category( 'Landing Page')) {
return;
}
$css_to_hide_header = <<<EOT
<style>
#header {
display:none;
}
#nav {
display:none;
}
</style>
EOT;
echo $css_to_hide_header;
}
add_action('wp_head', 'remove_header');
Replace the section in bold with your own CSS that you got in step 1. Notice how I use the “in_category” conditional function to determine if the page is a landing page. If it isn’t I just return and nothing happens. If you don’t know how to insert code like this into WordPress, check out my earlier tutorial on the same.
With the above custom PHP code, all pages that have the category “Landing Page” will have their header sections removed as shown here:
That’s it! There’s no need to modify theme files, or create child themes if you just need to hide the header on specific pages in WordPress.
you said “There’s no need to modify theme files”, but you inserted the code to functions.php, isn’t that modifying a theme file as well?
That’s complicated for nothing since the product page has a specific class. Just select the product page class and the element that you want to hide is sufficient.
.single-product .element-to-hide
{
display:none
}
That’s complicated for nothing since the product page has a specific class. Just select the product page class and the element that you want to hide is sufficient.
.single-product .element-to-hide
{
display:none;
}
Sorry for the double post I missed the coma at the end of none.
Here in 2020. I’m getting frustrated because most of the info I can find on this seems to be mixed with the way you would treat a “post” rather than a “page”. I’ve literally spent an hour on this so far. Shouldn’t be that hard. Still cannot find a way to hide the header and footer on a single PAGE.
To be more specific… I was unable to find a way to make a category for PAGES. This applies to POSTS only it seems. I suppose there’s a plugin I can download that can give me the ability to make categories but I ran out of time and accomplished nothing. This article was misleading and a waste of time.