How To Change Header Text In GeneratePress

I needed to change the header text in GeneratePress by adding a span around one of the words.

I was trying to change the color of the last word of the title to a different color as illustrated below:

Under most circumstances, to do a basic change to the header text in GeneratePress, go to Customizer -> Site Identity, change the Site Title and click "Publish".

If you want to add html to the header text, or just do your own thing entirely, maybe for SEO reasons, you'll need a bit more customization.

How to completely replace the header text in GeneratePress:

• Add a filter to 'generate_site_title_output'
• Return your new code through that filter.

The following is the code I added to the functions.php file of my child theme to add a span to one word in the header, keeping everything else:

/*** Change Header Text ***/
add_filter('generate_site_title_output', 'change_header_output');
function change_header_output() {
  return sprintf(
    '<%1$s class="main-title" itemprop="headline">
      <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('/'))),
    "Behind The <span class='header-alt-color'>News</span>"
  );
}

I then used some basic CSS to change the color of "News":

.header-alt-color {color: #FFF;}

The code above is pretty much the same as the code GeneratePress uses in header.php to create the header text in the first place.

If you want to find that code yourself, it's inside generate_construct_site_title(), which starts around line 160 in header.php.

If you're not familiar with the sprintf() structure, the most important part of the code is:

add_filter('generate_site_title_output', 'change_header_output');
function change_header_output() {
  return "<h1>My New Title</h1>;
}

You should be able to do pretty much anything you want with this header text using one of these methods.

For example, if you wanted the header to always be <h1>, or always be <p> (there are differing opinions on either option in the SEO community), you might do something like:

function change_header_output() {
  return sprintf(
    '<%1$s class="main-title" itemprop="headline">
      <a href="%2$s" rel="home">
        %3$s
      </a>
    </%1$s>',
    'h1',
    esc_url(apply_filters('generate_site_title_href', home_url('/'))),
    "Behind The <span class='header-alt-color'>News</span>"
  );
}

That will cause the header to use <h1> sitewide. Make sure it's in quotes. Because it's first in the list after the initial structure, it goes wherever %1$s is mentioned in the initial structure.