Add a Custom Class to the Site Title in Genesis

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.

Note: Careful where you click. There are more affiliate links in this post than flowers sold on Valentine’s day.

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:

Winning Agent Pro site title

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.

Custom Site Title Genesis

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!

59 thoughts on “Add a Custom Class to the Site Title in Genesis”

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

  2. 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.

    1. 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.

  3. christianziemann

    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

  4. 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?

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.