GeneratePress Header: CSS and Code Snippets

GeneratePress is a popular, highly-rated, and widely used WordPress theme known for its speed, flexibility, and focus on clean code.

GeneratePress is designed to be a solid foundation for building almost any type of website.

Here you will find some code snippets to customize the header of your theme

---

---

Remove WordPress Header

This code snippet is designed to remove the header from a WordPress theme that uses the “GeneratePress” theme”

//Remove Header
add_action( 'after_setup_theme','tu_remove_header' );
function tu_remove_header() {
    remove_action( 'generate_header','generate_construct_header' );
}

if you are wondering why someone would remove the header from the entire website, the answer is simply, they are probably building a custom header and menu.

---

Add a Custom Header using Hooks

For those using GeneratePress Premium, they can add a custom header using the elements feature.

For users who don’t want to use GP Premium, you can create a custom menu using HTML, CSS and JS

You can add it as pattern by using a custom HTML block.

<div class="my-site-header">
    <header>
        <p class="main-title"><a href="https://wpsurfer.com/" rel="home">WPSurfer.com</a></p>
        <div id="myNav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="overlay-content"><a href="https://cse.google.com/cse?cx=e64281343461b47e9">Search</a><a href="https://wpsurfer.com/wordpress-tutorials/">Blog</a></div>
        </div>
        <span id="hamburger" onclick="openNav()">&#9776;</span>
    </header>
</div>
<script>
    function openNav() {
        document.getElementById("myNav").style.display = "block";
    }
    function closeNav() {
        document.getElementById("myNav").style.display = "none";
    }
</script>

Then get the post ID by looking at the URL of the post or pattern.

Add this mu-plugin to your site and replace the “header post id value” with the post ID of your header

<?php
/*
Plugin Name: Custom Header MU Plugin
Description: Displays a custom header from a specific post
Version: 1.0
Author: TicoLibre
*/
// Display Header
function display_header() {
    $header_post_id = 123; // Replace 123 with the actual post ID you want to use
    $post = get_post($header_post_id);
    if ($post) {
        echo apply_filters('the_content', $post->post_content);
    } else {
        echo 'Header not found.';
    }
}
// Add a new header
add_action('generate_header', function() {
    display_header();
});

---

Add a Custom Header using a Child Theme

A child theme inherits the functionality of its parent theme but allows you to make modifications without directly editing the parent theme’s files.

To create a custom header for your website:

1. Go to your WordPress installation directory (e.g., /wp-content/themes/generatepress).
2. Download the Child Theme for GeneratePress
3. Upload to your site.
4. Activate the Child Theme.
5. Make a copy of the header.php file on the GeneratePress.
6. Upload the copy to the child theme’s folder.
7. Make modification to it.
8. If you already have a menu, you can ask Claude to integrate it to your header.php file.

---

GeneratePress:

This is the CSS you need if you want to add a border at the bottom of the header

.site-header {
border-bottom: 1px solid #535967;
}

You can change #535967 to whatever color you want

---

Add Padding to the Header on Mobile Devices

@media only screen and (max-width: 768px) {
  .site-header {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

---

GeneratePress: Having Different Colors in the Site Title

When it comes to creating a captivating online presence, the design elements of your website play a crucial role. One such element is the site title, which serves as a prominent identifier for your brand.

While traditionally presented as plain text, it’s not uncommon for website owners to wonder if they can infuse their site title with more visual appeal, such as using different colors for each word.

This post aims to address this query and explore the possibilities of incorporating varying colors into your site title, even in the absence of a logo image.

This is the code snippet that you need to add to your functions.php file or implement using your favorite code snippets plugin

add_filter('generate_site_title_output',function($output){
    $first_word = '<span class="st-first-word">WP</span>';
    $second_word = '<span class="st-second-word">Surfer</span>';
    $new_site_title = $first_word.$second_word;
    $output = sprintf(
				'<%1$s class="main-title"%4$s>
					<a href="%2$s" rel="home">
                        %3$s
					</a>
				</%1$s>',
				( is_front_page() && is_home() ) ? 'h1' : 'p',
				esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
				$new_site_title,
				'microdata' === generate_get_schema_type() ? ' itemprop="headline"' : ''
			);
    return $output;
});

For the color of the first word you should apply them in the Customizer > Colors > Header > Site Title

For the second part of the site title, you should apply this CSS using the GeneratePress elements section or any other method to add styles.

.main-title a .st-second-word {
    color: #94c221;
}

The code snippets provided in this post were originally posted on GeneratePress Support Forum

---

Remove Schema by GeneratePress

In case you want to remove the schema generated by GeneratePress, you can add these three lines of code to your website

//Remove Schema Generated by GP
add_filter( 'generate_schema_type', '__return_false' );
add_filter( 'generate_is_using_hatom', '__return_false' );

---