How to Hide the Header on Specific Pages in WordPress

How to Hide the Header on Specific Pages in WordPress

WordPress 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:

Hide the header on specific pages

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.

Leave a Reply

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

Disclosure: We receive a compensation from some of the companies whose products are presented on our website.