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!
Undoubtedly the stupidest query ever, but what if I wanted a fancy title AND a logo? Because I do… 🙂
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.
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.
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?
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. 🙂
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.
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
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
Perfect! Thank you for putting this together!
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.
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
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. 🙂
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…
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.
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. 🙂
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/
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
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.
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.
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.
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?
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
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
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.
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?
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
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!
have solved the last question re contact form Sorry to bother
Thanks
Hi Carrie
I’m looking for a genesis based theme for a health care professional (acupuncture). Any recommendations?
Thank
Tim
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
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. 🙂
Thanks Carrie
Do you do paid phone/skypes help sessions?
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!
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.
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
I had a stupid doubt. Can we use bootstrap classes in place of genesis framework predefined classes?
Hope you got my query
Sure – you’d just need to add those classes to your stylesheet.
This is exactly what I was looking for! Thanks so much.
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/
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?
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
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!
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?
@mario you may need to do force title rewrite in Yoast settings.
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);
});
I meant to say another developer helped me with that, I didn’t write the code!
I totally guessed and answered my own question – genesis_seo_description worked if anyone looks at this and is curious
Hey Amanda, glad you got it working and thanks for following up with what worked!
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.
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.
Great post and highly useful. Much appreciated. It worked like a charm on Altitude Pro theme.
Glad to hear it!
MEGA-Thanks, Carrie! Exactly what I needed to make part of my site title (a book name) in italics. Perfecto! 🙂
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
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?