This is How to Hide Header and Footer Using Custom CSS in WordPress
As a WordPress website owner, you may occasionally need to hide the header and footer on specific pages. This could be for various reasons, such as creating a distraction-free landing page, showcasing product demos, or simply maintaining a clean and minimalist design.
While WordPress offers several built-in options to customize the appearance of your website, sometimes you may need to go beyond the basic settings and leverage custom CSS to achieve a specific look and feel.
In this article, we'll explore how you can easily hide the header and footer on selected pages of your WordPress website using custom CSS.
Understanding the Visibility Property
The key to hiding elements on your WordPress website is the visibility
property in CSS. This property allows you to control the visibility of an HTML element without affecting the overall layout of the page.
There are two main values for the visibility
property:
visible
: This is the default value, which means the element will be displayed as normal.
hidden
: When set to hidden
, the element will be completely removed from the page, but the space it would have occupied will still be reserved, maintaining the layout.
By applying the visibility:hidden
property to your header and footer elements, you can effectively make them disappear without disrupting the structure of your page.
Hiding the Header and Footer in WordPress
To hide the header and footer on specific pages of your WordPress website, follow these steps:
-
Identify the Header and Footer Elements
The first step is to identify the HTML elements that represent the header and footer on your WordPress website. Typically, these are wrapped in <header>
and <footer>
tags, respectively.
Alternatively, your theme may use specific class names or IDs for the header and footer, such as .site-header
and .site-footer
. You can inspect the HTML structure of your website using your browser's developer tools to find the exact elements you need to target.
-
Create Custom CSS
Once you've identified the header and footer elements, you can create custom CSS to hide them. Here's an example:
/* Hide the header */
.site-header {
visibility: hidden;
}
/* Hide the footer */
.site-footer {
visibility: hidden;
}
In this example, we're using the class names .site-header
and .site-footer
to target the header and footer elements, respectively. You'll need to replace these with the appropriate selectors for your website.
-
Apply the Custom CSS
There are a few ways to apply the custom CSS to your WordPress website:
a. Using the Customizer:
- Go to the WordPress Customizer (Appearance > Customize).
- Navigate to the "Additional CSS" section.
- Add the custom CSS you created in the previous step and click "Publish".
b. Creating a Child Theme:
- Create a child theme for your current WordPress theme.
- Add a new file called
style.css
to the child theme directory.
- Add the custom CSS to the
style.css
file.
c. Using a Plugin:
- Install and activate a plugin like "Insert Headers and Footers" or "Custom CSS and JS".
- Add the custom CSS to the plugin's settings.
The method you choose will depend on your familiarity with WordPress and your preferred workflow. The Customizer and child theme approaches are generally recommended, as they provide a more robust and maintainable solution.
-
Test and Verify
After applying the custom CSS, visit the pages where you want to hide the header and footer, and confirm that they are no longer visible. Ensure that the layout and content of the page are still displayed correctly.
Advanced Techniques
While the visibility:hidden
approach is a simple and effective way to hide the header and footer, there are a few additional techniques you may want to consider:
-
Conditional Hiding
Instead of hiding the header and footer on all pages, you may want to selectively hide them based on certain conditions, such as the page template, post type, or a custom field.
You can achieve this by using WordPress-specific CSS selectors in your custom CSS. For example:
/* Hide header and footer on the "About" page */
body.page-id-123 .site-header,
body.page-id-123 .site-footer {
visibility: hidden;
}
/* Hide header and footer on pages with a specific custom field */
body.postmeta-hide-header-footer .site-header,
body.postmeta-hide-header-footer .site-footer {
visibility: hidden;
}
Replace page-id-123
and postmeta-hide-header-footer
with the appropriate selectors for your use case.
-
Disabling Plugins
If you're using a plugin that adds the header and footer to your WordPress website, you may be able to disable the plugin's functionality for specific pages. This can be a cleaner solution than overriding the styles with custom CSS.
Refer to the plugin's documentation or settings to find out how to disable it on selected pages.
-
Using the display
Property
Instead of using visibility:hidden
, you can also use the display
property to hide elements. The main difference is that display:none
will completely remove the element from the page layout, whereas visibility:hidden
will maintain the space occupied by the element.
.site-header {
display: none;
}
.site-footer {
display: none;
}
The choice between visibility:hidden
and display:none
will depend on your specific requirements and the layout of your website.
Conclusion
Hiding the header and footer on specific pages of your WordPress website can be a valuable technique to create unique layouts, landing pages, or distraction-free experiences for your users. By leveraging the visibility
property in custom CSS, you can easily make these elements disappear without affecting the overall structure of your website.
Remember to test your changes thoroughly and consider using more advanced techniques, such as conditional hiding or disabling plugins, to ensure a seamless and consistent user experience across your WordPress site.
If you're looking for a powerful tool to help you identify and fix technical issues impacting your website's conversion rates, be sure to check out Flowpoint.ai. Flowpoint's AI-powered analytics and recommendation engine can provide valuable insights to optimize your website and drive better results
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.