Flatsome theme has no native option to change or disable the header. (But there is an option to change to different types of footer). So, for landing pages where we need to hide the header, we need a custom-code solution. This method can be used with each theme where there is no option to disable the header.

  1. In order to target the no-header pages, I created the category ‘landing-no-header’ and assigned this category for each page needed. To learn How to add categories for Pages? see below on this page.
  2. The next step is to add the following js code in a code snippet, where the header is set to display: none for the assigned category:
document.addEventListener("DOMContentLoaded", function() {
  // Check if the page is in the category you want to target
  if (document.body.classList.contains('term-landing-no-header')) {
    // Hide the header by adding display none
    var header = document.querySelector('header'); 
    if (header) {
      header.style.display = 'none';
    }
  }
});

Side note: The code can be added in a js file enqueued to the theme, or using the Code Snippets plugin. I prefer the plugin method for adding js code, because is much easier to target it on the page needed.

How to add categories for Pages?

1. Create a custom taxonomy for pages. Category is not a native taxonomy for WordPress Pages – it’s a custom taxonomy. This is available just for Posts. So, we need to create a custom taxonomy and to asign it to Pages. It can be added by custom code or by Custom Post Type UI plugin.

2. Create a class for custom taxonomy. Once the term is created and asigned to the page, we need to create a class – because this is not a native feature as it is for the Post Taxonomies. 

//Add a class to Page Category
function category_taxonomy_body_class( $classes ) {
    // Check if we are viewing a page
    if ( is_page() ) {
        // Get the current page ID
        $page_id = get_the_ID();
        // Get the custom taxonomy terms for the page
        $terms = get_the_terms( $page_id, 'categorie_pagina' );
        if ( $terms && ! is_wp_error( $terms ) ) {
            foreach ( $terms as $term ) {
                // Add each term's slug as a class
                $classes[] = 'term-' . sanitize_html_class( $term->slug, $term->term_id );
            }
        }
    }
    return $classes;
}
add_filter( 'body_class', 'category_taxonomy_body_class' );

And voilà! The new classes created with custom taxonomy show up:

Similar Posts