Today we’re going to talk about how to add a custom site title in Genesis, you know the site title that shows up in your site’s header when you’re not using a logo.
Before we dive in, I have some good news to share… I’ve got a second WordPress theme in the wild! Winning Agent Pro is a mobile responsive WordPress real estate theme built on the Genesis Framework. Why am I tell you this?
Well, there’s a little customization to the site title in the theme demo that I’d like to show you how to add to add to your site. It involves filtering the site title to include a custom style, so you can be fancy. Check it:
Notice the “WA” has a different style applied than “ESTATE.” The only way to achieve that is to filter the site title, which is a fancy way of saying run it through some code, car wash style, so that something a little different comes out the other side.
Give it Some Class
In this tutorial I’m specifically showing you how to add a custom class to the site title in the Winning Agent Pro theme, but you could add this customization to any HTML5-enabled child theme running on the Genesis Framework, assuming the theme wasn’t already filtering the site title in some way.
Start by (carefully) insert the following code into your theme’s functions.php file or use a helper tool like Genesis Extender. If editing theme files is something new to you, I’d encourage you to take 5 minutes to read about how to avoid problems. 🙂
| // Filter the title with a custom function | |
| add_filter('genesis_seo_title', 'wap_site_title' ); | |
| // Add additional custom style to site header | |
| function wap_site_title( $title ) { | |
| // Change $custom_title text as you wish | |
| $custom_title = '<span class="custom-title">WA</span>Estate'; | |
| // Don't change the rest of this on down | |
| // If we're on the front page or home page, use `h1` heading, otherwise us a `p` tag | |
| $tag = ( is_home() || is_front_page() ) ? 'h1' : 'p'; | |
| // Compose link with title | |
| $inside = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $custom_title ); | |
| // Wrap link and title in semantic markup | |
| $title = sprintf ( '<%s class="site-title" itemprop="headline">%s</%s>', $tag, $inside, $tag ); | |
| return $title; | |
| } |
You’ll want to sub in your own title, of course. Whatever you place between the <span> tags will get a special style applied called custom-title. The remaining title outside of the <span> tags gets the default style applied to the site title. Capicse?
Note: By doing this, we’re replacing the site title with our own text. That means whatever site title you have under Settings > General will not display in the header of your site.
Your site title as entered in General Settings is still important, however, as it is used for SEO purposes.
Give it Some Style
If you’re using the Winning Agent Pro theme, you don’t need to edit your stylesheet since the theme already includes a matching style based on your set color option. Woohoo! You’re done!
If you’re using another Genesis child theme (or want a different color for Winning Agent Pro), you can add the following to your stylesheet (style.css), substituting colors or font styles for your own:
.custom-title {
color: #000000;
font-weight: 600;
}
Were you hoping for more because that was so easy? I’m going to disappoint you: You’re done!
This worked out amazing! Thank you so so much, Carrie 😉