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!
Amanda says
Hi Carrie,
I have a question! Is there a way to do the same for the tagline? In other words the ?
Here is some code similar to yours I used to swap out the site title with a custom field called. Title title was “Pediatric Dentistry” and get_personalization is a custom field.
add_filter(‘genesis_seo_title’, function($title) {
return str_replace(‘Pediatric Dentistry’, get_personalization(‘practice_name’), $title);
});
Amanda says
I meant to say another developer helped me with that, I didn’t write the code!
Amanda says
I totally guessed and answered my own question – genesis_seo_description worked if anyone looks at this and is curious
Carrie Dils says
Hey Amanda, glad you got it working and thanks for following up with what worked!
Carla DeLauder says
Hi Carrie!
I added this great tutorial last year. I’ve been reading up on H1 tags (they’ve been such a mystery to me) and it seems for a blog as the main content on the homepage, the blog post title should be the H1 tag. So this would mean not using an H1 or H anything tag for the site title or description, then? Just use a CSS div?
I’m determined to finally figure this out and would love to know what you think.
Carrie Dils says
Hey Carla!
Yeah – The general rule of thumb is to use H1 for your site title on the homepage only. On all other pages, you’d use a regular div for your site title and then reserve the H1 for your post title.
For instance, you could do:
<h1 class="site-title">My Site</h1> // home page<div class="site-title">My Site</div> // all other pages
Using the same CSS class would let you use the same CSS to style both – just different markup depending on which page you’re on.
Saleem says
Great post and highly useful. Much appreciated. It worked like a charm on Altitude Pro theme.
Carrie Dils says
Glad to hear it!
Bruce Rawles says
MEGA-Thanks, Carrie! Exactly what I needed to make part of my site title (a book name) in italics. Perfecto! š
christianziemann says
Hi Carrie,
I know it’s a long shot but I’m hoping to get a response anyway.
First of all – your tutorials are great!
Regarding the SEO settings of the genesis theme you wrote: “Your site title as entered in General Settings is still important, however, as it is used for SEO purposes.”
I’m a little bit confused by this. Does that mean I’m still using my seo relevant “keyword” in that field (for h1 purpose)?
chris
C. Dee says
Some years later … :o)
I’ve been using this code since 2014 for my site title, and I’d like to do the same thing for the site description. Can I use this code as is to accomplish the same thing, but substitute in ‘description’ to make it work?