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.

Code Snippet

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;
});

The Styles

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;
}

Source

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