WordPress themes can offer so many controls and options it makes you think you’re piloting a 747. But you’ll find that when searching for something specific through the theme options what you’re looking for is never there. Its a moment like this that reminds you of the time you were looking for that zero-calorie cherry diet coke you wanted but only could find the diet Pepsi. Its times like these that you have to take into your own hands.
To remove the header and footer from a specific single page in WordPress (if you don’t have the theme option) you must first find the ID of the page and then target the header and footer with CSS using the page’s ID class that WordPress generates. Then add the CSS to your WordPress theme to hide the two sections.
Hiding header and footer with theme page options
To begin you first should double-check if your theme has the option to hide your footer and header on single pages available to you by default. If you do have a nicer paid WordPress theme, they usually have an option to customize the header and footer BELOW the pages content area.
Once you’ve confirmed your theme hates you and wants to make everything hard for you you can now take matters into your own hands by using custom CSS.
Hiding header and footer using custom CSS
Start by opening an area to insert your custom CSS. There are many areas on any giving site to add in CSS, but the best one is (when you’re logged in) under Appearance > Customizer > Additional CSS.
Next is to find page’s ID to make your CSS code. First, open the page in a new tab as if you were a normal moron viewing the page. Second, you need to open the pages inspect menu. To do this, right-click anywhere on the live page to find the inspect option. If you cant find the inspect option in the right-click menu, you can press F12 to do the same thing. If F12 doesn’t open the inspect menu for you, you can press CTRL+SHIFT+I on the keyboard to also do it. If CTRL+SHIFT+I doesn’t work for you, you can hire me to do it because you don’t know what you’re doing.
When you open the inspect menu it should look like something above. It may have a white background as I’m using dark mode in the screenshot above. It also may come up on the bottom of your screen instead of the right side, which is of course okay.
Scroll to the top of the inspect menu until you see the <body element. As circled in red in the screenshot above the body element should have a page id attached to it. Double click to select the text to copy and paste the page ID or just manually type that page ID.
Here is an example of what page ID I copy and pasted:
page-id-1446Now that you have your page ID code you can build a CSS rule around it. Start by adding a period in front of your code and adding the word header after it. You can also add the squiggly brackets to open the styling on the element. Like so:
.page-id-1446 header {
}Now copy the code again for the footer, separated by a comma – just like this sentence. This CSS code will so far select the header and footer specifically on the page associated with the ID you’ve given it.
.page-id-1446 header, .page-id-1446 footer {
}The final step is to add the CSS line that hides the two sections. To do that you have to use the display CSS property.
.page-id-1446 header, .page-id-1446 footer {
display: none !important;
}Here we used the display property and assigned none to it, meaning it will hide it. The !important after the value is there to make sure the code works for 99% of cases.
If previous methods dont work
If the previous methods don’t work it is probably because your website or the theme of your website was made improperly. If that is the case, you can still use custom CSS but instead of targeting the <header> and <footer> elements, you can target the header and footer that is being made for your theme.
The setup is the as before, begin with your pages ID and set up the CSS for it:
.page-id-1446 {
}This requires a bit more digging and exploring through your websites inspect menu, you should somewhat familair now because of step 1. Begin using the inspect tool again to find your themes weirdly coded header and footer by using the element select tool. Most browsers have this tool, in my example I am using Google Chrome. If you dont see a little select arrow at the top of the inspect menu, swich to a browser like chrome that has this.
Hover over the page’s elements to find where your header and footer are. Starting with the header, once its completely highlighted left click on the selected are to select the element. Once you’ve selected the element it will bring to that element in the right side HTML code, then you can find the CSS class on it to use in your CSS code just as you did to get your page’s ID. Repeat this for footer and you should have your own custom CSS that hides the sections you want.
.page-id-1446 .whatever-my-headers-class-was, .page-id-1446 .whatever-my-footers-class-was {
display: none !important;
}But that’s all it takes to hide the header and footer on a certain page in WordPress. If you need further help, feel free to contact me, The Website Architect who can point you in the right direction.
