• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Carrie Dils

Carrie Dils

WordPress Developer, Consultant, and Instructor

  • About
    • Work with Me
    • Around the Web
    • Media Kit
  • Blog
  • Podcast
  • Web Development Courses
  • Freelancing Courses

Add a Custom Class to the Site Title in Genesis

Originally published on February 14, 2014 by Carrie Dils 58 Comments
Last updated on May 9, 2017

FacebookTweetPinLinkedIn

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;
}
view raw genesis-site-title.php hosted with ❤ by GitHub

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!

FacebookTweetPinLinkedIn

Filed Under: Genesis Framework, WordPress Tutorials

About Carrie Dils

I believe you can make a good living doing work that makes you excited to get out of bed every morning.

In addition to this blog, I host a podcast for freelancers, teach business courses at The Fearless Freelancer®, and teach WordPress and Front-end Development courses for Lynda.com and LinkedIN Learning. I'm also writing a book for freelancers.

Reader Interactions

Comments

  1. Avinash D'Souza says

    February 15, 2014 at 11:56 am

    Undoubtedly the stupidest query ever, but what if I wanted a fancy title AND a logo? Because I do… 🙂

    Reply
    • Carrie Dils says

      February 15, 2014 at 1:20 pm

      Ha! You could do both. Once you have the logo enabled, use Firebug or similar to inspect the element’s CSS. You’ll see that the text is there, but is set to something like “text-indent: -9999px”, which basically just throws the text far offscreen. Dial that text-indent back to 0 to see where that gets you. Then use a combo of text-indent and padding/margin to get your text the appropriate distance from your logo.

      Reply
  2. Avinash D'Souza says

    February 16, 2014 at 12:00 am

    Great post Carrie! That said, what if one is daft enough to want both…i.e. a custom title AND a logo? Cos I kinda do… 🙂

    While the custom title is a great hack, I know I’d never want a site out there sans a logo(unless I’m using a logotype) for branding reasons.

    Reply
  3. sweethomesandiego says

    March 5, 2014 at 5:32 pm

    So I cut the code, pasted it into the functions.php file on wordpress, put my web name between the span tags and cicked update. Now I have the white screen of death and don’t know what to do…Any way you can help with this?

    Reply
    • Carrie Dils says

      March 5, 2014 at 5:37 pm

      Step 1) Don’t panic.

      Step 2) Never edit a live site again. 🙂

      Step 3) You’ll need to access your site files via FTP or your host’s cPanel, open up functions.php and remove the code you entered. That’ll get your site back up and running.

      Check out some of the tips mentioned in this post for editing site files. Download/install a text editor with syntax highlighting to edit your files and that’ll help you see where your error is.

      If you can’t locate the error in your code, put it up on pastebin.com and shoot me the link and I’ll see what I can find. 🙂

      Reply
  4. Randy Bonds says

    April 3, 2014 at 3:51 pm

    Oh how I dream about having your extensive knowledge. Seriously though, I am a newbie so this stuff really helps. I appreciate the post….and the humorous aff link shouts.

    Reply
  5. Neal Ghoshal says

    April 23, 2014 at 5:26 pm

    HI Carrie – many thanks for this post. I’m trying to do this on the Agency Pro theme and it’s mot working. I’m assuming I need to change some of your code:

    // 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) {

    to

    //* Filter the title with a custom function
    add_filter(‘genesis_seo_title’, ‘agency_site_title’ );

    //* Add additional custom style to site header
    function agency_site_title($title) {

    So I’m using agency instead of wap. But I’m unsure that’s right as it’s not working. I’ve also tried agency-pro and agency-pro-orange (I’m using that color scheme).

    I guess the answer will give a clue as to how this can be achieved on any other Genesis theme.

    Hope you can help. And thanks again for all you offer to the Genesis community.

    Neal

    Reply
    • Carrie Dils says

      April 24, 2014 at 9:03 am

      Hi Neal,
      The wap_ prefix won’t make a difference how the code works, so long as your action matches the name of the function.

      Under Genesis > Theme Settings do you have it set to use “Dynamic text” instead of Logo image? That’s the only thing I can of off the top of my head unless you’ve got some other code or plugin interfering with your site title.

      Cheersd,
      Carrie

      Reply
  6. Matthew Rathbun says

    April 23, 2014 at 7:33 pm

    Perfect! Thank you for putting this together!

    Reply
  7. everydaymiija says

    May 5, 2014 at 1:00 pm

    Hi Carrie,

    I need to add a to my menu items. What modifications to the code above would I do? I am so new to php but getting the hang of it here and there.

    Reply
    • Carrie Dils says

      May 5, 2014 at 4:43 pm

      Heya,
      You don’t want any of this code. 🙂 What are you wanting to add to your menu? This tutorial might be helpful…

      http://www.petersenmediagroup.com/genesis-framework/adding-simple-social-icons-search-form-genesis-menu/

      Also, if you’re still getting comfy with PHP, here’s an article on taking proper precautions. 🙂

      Cheers,
      Carrie

      Reply
      • everydaymiija says

        May 5, 2014 at 5:28 pm

        Sorry, I thought I typed my question properly but see I didn’t. I need to add a span class to my menu items in my Primary Navigation. 🙂

        Reply
        • Carrie Dils says

          May 5, 2014 at 5:41 pm

          Ah, I see. Your code was stripped out.

          You’d want to filter genesis_do_nav, so something like:

          add_filter ( ‘genesis_do_nav’, ‘add_my_class’ );

          Where ‘add_my_class’ is you function that returns the nav with your custom markup. What are you trying to achieve as the final result? There might be an easier way to skin the cat, so to speak…

          Reply
          • everydaymiija says

            May 5, 2014 at 5:57 pm

            Ultimately, I would like to achieve some transition effects in my navigation found on this website:
            http://tympanus.net/codrops/2013/08/06/creative-link-effects/
            I’m re-designing locally so I’m playing around to learn. I appreciate the help.

          • Carrie Dils says

            May 6, 2014 at 9:24 pm

            Ok, I gotcha. On some of those examples you could get granular enough with the existing markup. Have you tried add css classes directly to individual menu items? If you don’t see the option to do that when you’re editing a menu, open up the screen option tab in the top right. Throw that in and you’re 90% of the way there. 🙂

  8. David Mottershead says

    June 23, 2014 at 3:28 pm

    Nice. Thanks for this. I used this method to filter the site title and add an icon before it. However, I believe your method modifies the way the native genesis_seo_title function works. Doesn’t the regular function usually wrap the title in an h1 tag if its the home page and a paragraph tag if it is on another page? This method is going to wrap the site title in an h1 tag no matter what page it is on? Wouldn’t you be better adding a home page check? Although it is not invalid HTML5 anybody pasting this blindly is going to change the SEO structure of their site without realising.

    You can see how I did it here: http://www.davidmottershead.com/articles/icon-site-title-genesis/

    Reply
    • Carrie Dils says

      June 23, 2014 at 5:33 pm

      Ah, good catch, David! I updated my gist with the conditional:

      https://gist.github.com/cdils/9002451

      I appreciate you pointing that out!

      Cheers,
      Carrie

      Reply
      • David Mottershead says

        June 23, 2014 at 5:52 pm

        No problem. It’s a pleasure to help. I did the same thing too. I didn’t realise the structure of the genesis_seo_title function until I ran an SEO analysis on the site I was developing and noticed there were two h1’s on the pages.

        Reply
        • Carla at Loves Moose says

          November 6, 2014 at 12:59 pm

          It’s been a few months, but hopefully you’ll see this comment.

          Does SEO structure mean that Genesis has intentionally structured tags to help with SEO? I guess it seems obvious, but I’m not really sure.

          I use p:first-child drop caps for the first letter in my blog posts. I haven’t been able to only drop that letter. Instead it drops the first letter of other things, too, like the site title on pages. The best solution is to figure that out instead of making all site titles an h1, I guess, but I thought I’d ask here and see what you think, since I don’t really understand what’s meant by SEO structure.

          Thank you.

          Reply
          • Carrie Dils says

            November 6, 2014 at 6:24 pm

            The idea is two-fold. First, Genesis 2.0+ uses Semantic HTML (which basically means the code reads logically to a browser, in proper hierarchy, etc). That’s good for SEO.

            Secondly, Genesis 2.0+ supports schema.org, meaning that you can assign pieces of microdata to your content that tell Google exactly what it is (i.e. is this content a Person, is it a Product, etc.). Because it helps Google better classify/understand your content, that’s good for your SEO.

  9. Nathan says

    July 1, 2014 at 8:40 pm

    Hey Carrie, thanks for the tutorial 🙂 Quick question…can I set a custom style for each word in my site title. Also, is there a specific logo design software you use to create logos for your client websites?

    Reply
    • Carrie Dils says

      July 1, 2014 at 8:42 pm

      Hey Nathan,
      You could use this same tutorial, but create a different with a unique class for each word.

      I use the Adobe Creative Suite, but I’m pretty sure there’s some decent open source graphic tools out there… I just don’t have experience with them.

      Cheers,
      Carrie

      Reply
      • ceah says

        January 30, 2015 at 3:19 pm

        Could you please show how you would apply to three or more words. I’m not sure how to apply a class to each word other than what you showed with the two words.

        Would I simple add a duplicate line like so:

        $custom_title = ‘WATHE’;
        $custom_title = ‘Estate’;

        or do I need to create a second function or something else:

        Thanks

        Reply
        • ceah says

          January 30, 2015 at 3:29 pm

          Hi,

          Just figured it out:

          $custom_title = ‘WATHEEstate’;

          Now I can target the middle word and make it a different color.

          Thanks so much for this tutorial Carrie.

          Reply
  10. Tim Mooney says

    July 20, 2014 at 5:17 pm

    Carrie I find this Winning Agent Pro theme excellent! Thankyou.
    I only need to do one thing …Because the site is photo rich … I need to turn off the ‘screen’ the overlays the main background image on the home page. That screen takes away detail and quality from the image. How can I do that please?

    Reply
    • Carrie Dils says

      July 21, 2014 at 8:32 am

      Hey Tim,
      Thanks! There’s a forum specifically for the theme (in addition to the general Genesis support you can get on the StudioPress forum) and I recently tackled your question for another user. Here ya go!

      http://www.winningagent.com/forums/topic/home-page-image-filter/

      Cheers,
      Carrie

      Reply
      • Tim Mooney says

        July 21, 2014 at 5:14 pm

        Thanks for the reply and the support.
        Have you done any tutorial about getting the contact form to have content in the drop down menu where a property is selected. The one when people want more info on a particular property?
        No more questions … otherwise I’m finished.
        This is the first real sensible theme I have worked on … mainly because of the Tutorial I think. I’m a bit slow in the take up!

        Reply
      • Tim Mooney says

        July 21, 2014 at 5:24 pm

        have solved the last question re contact form Sorry to bother
        Thanks

        Reply
  11. Tim Mooney says

    July 30, 2014 at 10:21 pm

    Hi Carrie
    I’m looking for a genesis based theme for a health care professional (acupuncture). Any recommendations?
    Thank
    Tim

    Reply
    • Carrie Dils says

      July 31, 2014 at 8:19 am

      Hey Tim!
      Web Savvy Themes has a few healthcare-specific themes that might work for you. The other thing to keep in mind is you don’t *have* to start with a healthcare theme – you could take any theme that you liked the general layout and structure of and use that as a starting point to add in your customizations. For instance, here’s a physician site I customized based on the Minimum theme from StudioPress.

      Depending on the time you have to invest in getting the site up and running, it may be quickest to start with one of the Web Savvy healthcare themes.

      Cheers,
      Carrie

      Reply
      • Carrie Dils says

        July 31, 2014 at 12:37 pm

        Ooh – one more note, if you do go the Web Savvy route, they’ve got a 20% coupon good thru today – use HAPPYBIRTHDAY at checkout. 🙂

        Reply
  12. Tim Mooney says

    July 31, 2014 at 8:23 pm

    Thanks Carrie
    Do you do paid phone/skypes help sessions?

    Reply
  13. jordanmroth says

    November 21, 2014 at 1:37 pm

    Thanks Carrie! It’s always great to be able to find a quality tutorial like this to save a little time and know that I’m getting something done the right way.

    Great job with Winning Agent Pro… it’s a great theme!

    Reply
  14. Francisco says

    January 27, 2015 at 12:32 pm

    Hi Carrie –

    Great tip on the custom title, and a question regarding the conditional check for the wrapping tag H1 vs. P as mentioned in comments above by David Mottershead:

    I’m wondering, would your code in effect overwrite the checks already occurring in the genesis\lib\structure\header.php file on lines 905, 908 and 911?

    What I’m curious about is this: the filter “genesis_seo_title” in that header.php file occurs on line 918 and passes $wrap which contains the result of the 3 conditional checks I mention above. Then your code performs a check similar to that on line 905 & 908 (but not like the 3rd check on 911). Does this mean your code in effect overwrites that 3rd check on 911, which is the following?

    //* And finally, $wrap in h1 if HTML5 & semantic headings enabled
    $wrap = genesis_html5() && genesis_get_seo_option( ‘semantic_headings’ ) ? ‘h1’ : $wrap;

    That made me wonder, would it be OK to simply use the filter’s passed-in $wrap value instead of the $tag conditionals in your code? I.e., suppose I adjusted your code to receive and utilize the filter’s $wrap variable instead of conditionally determining $tag within the function:

    add_filter(‘genesis_seo_title’, ‘wap_site_title’, 10, 3 );
    function wap_site_title( $title , $inside, $wrap) {
    // receive $wrap and use it for the value of $tag in lieu of conditionally calculating $tag:
    $tag = $wrap;
    //etc
    }
    // Alternately: set the value of $tag directly by putting it in the function’s parameters instead of $wrap:
    function wap_site_title( $title , $inside, $tag) {
    // Remove $tag conditionals and use passed-in value instead
    }

    In short: would there be any adverse drawback I’m not thinking of to using the received $wrap value instead of calculating $tag the way you do in your code?

    Thanks in advance.

    Reply
  15. scmeeker2014 says

    April 20, 2015 at 3:18 pm

    Thanks Carrie for this wonderful post.

    I’m trying to update the Title Text in the Ambiance Pro with this code but it does nothing. I would like to simply change the color of the text.

    Thanks!
    Samantha

    Reply
  16. Geek Dashboard says

    May 12, 2015 at 2:55 am

    I had a stupid doubt. Can we use bootstrap classes in place of genesis framework predefined classes?
    Hope you got my query

    Reply
    • Carrie Dils says

      May 12, 2015 at 4:49 pm

      Sure – you’d just need to add those classes to your stylesheet.

      Reply
  17. Kelly says

    May 20, 2015 at 1:41 pm

    This is exactly what I was looking for! Thanks so much.

    Reply
    • Carrie Dils says

      May 21, 2015 at 8:03 am

      You betcha! If you don’t want to mess with the PHP part, check out this new plugin that does the same thing: https://wordpress.org/plugins/genesis-site-title-styles/

      Reply
  18. Mads says

    July 28, 2015 at 4:40 am

    Hello Carrie,

    I have used Genesis theme’s a few times and one of the sites build, automatically makes my header and subheader, H1 and H2 on all of my sites, which is pretty crap from a SEO perspective.

    How could I easily remove the H1 & H2 tag on the headers?

    Reply
    • Carrie Dils says

      July 28, 2015 at 7:45 pm

      Hey Mads,
      You can go into the Genesis SEO settings and disable the option for “Use semantic HTML5 page and section headings throughout site?”

      If you’re using another SEO plugin, you won’t see this option and would have to remove those tags manually (I’m guessing). In that case, you could use the code in this post as example.

      Cheers,
      Carrie

      Reply
  19. Susanta says

    August 5, 2015 at 9:21 am

    Thanks for the great tutorial, Carrie! I had used this on another site successfully before. However, for some strange reason, I’m not able to do it in my current site (http://topleague.in/). Both sites have used Parallax Pro; in fact, I have used the same functions.php and css file on my site new site. Could you please take a look at my site and advise! Thanks in advance!

    Reply
  20. Mario says

    August 10, 2015 at 10:06 am

    I’m using Yoast SEO Plugin. On Google SERP my posts are displayed as “title – sitename”, even though I’ve set it to display only “title”. In fact, if you look at the tag contained in the HTML of my posts, there is just the title, so why also my sitename is added where there is extra space? Is it something which Google does automatically or it is because of Genesis Framework?

    Reply
  21. Coral Sea IT says

    September 13, 2015 at 8:49 pm

    @mario you may need to do force title rewrite in Yoast settings.

    Reply
  22. Amanda says

    October 2, 2015 at 3:17 pm

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

    Reply
  23. Amanda says

    October 2, 2015 at 3:17 pm

    I meant to say another developer helped me with that, I didn’t write the code!

    Reply
  24. Amanda says

    October 2, 2015 at 3:19 pm

    I totally guessed and answered my own question – genesis_seo_description worked if anyone looks at this and is curious

    Reply
    • Carrie Dils says

      October 6, 2015 at 8:27 am

      Hey Amanda, glad you got it working and thanks for following up with what worked!

      Reply
  25. Carla DeLauder says

    October 10, 2015 at 10:22 pm

    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.

    Reply
    • Carrie Dils says

      October 18, 2015 at 3:40 pm

      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.

      Reply
  26. Saleem says

    December 15, 2015 at 1:16 am

    Great post and highly useful. Much appreciated. It worked like a charm on Altitude Pro theme.

    Reply
    • Carrie Dils says

      December 16, 2015 at 7:13 pm

      Glad to hear it!

      Reply
  27. Bruce Rawles says

    April 30, 2016 at 12:25 am

    MEGA-Thanks, Carrie! Exactly what I needed to make part of my site title (a book name) in italics. Perfecto! 🙂

    Reply
  28. christianziemann says

    October 2, 2016 at 4:40 am

    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

    Reply
  29. C. Dee says

    June 23, 2018 at 6:10 pm

    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?

    Reply

Trackbacks

  1. Use Genesis Simple Sidebars with Winning Agent Pro's Custom Post Type says:
    February 22, 2014 at 9:59 pm

    […] week I shared how to add a custom site title to Winning Agent Pro to look like the demo. Today I want to show you how to use the Genesis Simple […]

    Reply
  2. Apply Custom CSS to Genesis Site Title for SEO - Genesis Dynamik Developer says:
    April 26, 2014 at 12:10 am

    […] That led to a 5 second Google search and finding a nice post explaining all things in detail from CarrieDils.com – thank you […]

    Reply
  3. Resource Roundup February 2014 - Art of Genesis says:
    February 8, 2015 at 9:46 pm

    […] Add a Custom Class to the Site Title in Genesis […]

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Search

Heya, I’m Carrie Dils

Carrie Dils chillin at the beach

Articles

  • Business
  • Front-End Development
  • Genesis Framework
  • Mental Health
  • Web Accessibility
  • WordPress Tutorials

Things I Love ❤️

My Tech Toolbox

Favorite Business Books

  • OfficeHours.FM
  • My Courses on LinkedIN Learning
  • The Fearless Freelancer®

© 2021 CWD Holdings LLC