How to Remove Header & Footer in WordPress Page (3 Ways)

remove header

There may be uncountable reasons to remove header and footer in WordPress page. If you are looking for a way, then you are in the right place. 

In this post, I have shown some different ways to remove header and footer in WordPress page. You may use any of these methods. All you have to do is go through the post, and then you will be able to do it all by yourself. 

Let’s begin. 

How to remove header and footer in WordPress page

You can remove header and footer in WordPress with a few methods. Here I will cover three different methods. 

  • Theme specific
  • Page template
  • Custom CSS

Theme Specific

As the process is theme related there for this method may not work with all themes. However, the popular ones and most of the themes allows to hide the header, footer, and other elements. 

For example, the OceanWp theme comes with the option to remove header and footer. After installing the OceanWP theme comes with OCean Extra that adds a setting box in your editor screen. 

Just open the page or post, then from the below Header option, you will be able to disable header, and from the footer option, you will be able to disable footer.

Different themes may have different procedures.

Page Template

Page template is another option to remove header. Page template comes with header, footer, body, and different components. There are a few page builders that let you remove header and footer, and Elementor is one of them. 

All you have to do is open the post on your Elementor-installed website. Click on the template option and select Elementor canvas. Now your header and footer will be hidden. 

Custom CSS

To remove header with custom CSS, open the page or post. Now right click on anywhere and select Inspect option. 

Press Ctrl + F and look  for header tag or div. You will find site-header, choose the first one and copy class name. 

Now navigate to Appearance -> Customize – Additional CSS. 

Now paste the below code, don’t forget to change the class code that you copied earlier. Hit publish button. 

.site-header {
	display: none;

Now header is removed from your entire website. 

If you like to remove header for a specific page, then you have to put the page id before the class. Just copy the below code and replace the page id and class with yours. 

.page-id-5 .site-header {
	display: none;

To find the page id, travel to DOM or search for ‘page-id’. 

You are all done. In the same way, you can remove the footer, too, and use the term footer instead of the header. 

Last Words

I hope this guide helped you to remove header and footer in WordPress. If you face any difficulties, feel free to ask your queries. If you liked the post, then share it with your friends, and don’t forget to leave your thoughts in the comment box below. 

Leave a Comment

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