Community Forums › Forums › Archived Forums › Design Tips and Tricks › Possible to target part of text in Site Title?
- This topic has 5 replies, 2 voices, and was last updated 10 years, 1 month ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
April 4, 2014 at 9:37 am #98463MarkPMember
I'm not sure this is possible but would love some input.
I would like to use the Site Title for a text logo instead of image on a new site.
However, I would like to be able to make a word in the title an accent color separate from the rest.
Ex: My Site Title - where Site would be red and My and Title would be white.
Is this possible at all???? via CSS or PHP?
Thanks to everyone for any help.
April 4, 2014 at 12:42 pm #98500Tony @ AlphaBlossomMemberHello,
You can modify this code example by Bill Erickson
function be_customize_site_title($title, $inside, $wrap) { $custom = str_replace("Site", "<span class="title-red">Site</span>", $title); return $custom; } add_filter('genesis_seo_title','be_customize_site_title', 10, 3);
Add that to your theme's functions.php file (replace "Site" with the word you want to highlight"). Then in your theme's style.css file, add:
.site-title a span.title-red { color: #FF0000; }
That should do it for you. Have a great weekend!
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 4, 2014 at 2:08 pm #98516MarkPMemberHi Tony!
Thanks for the input. I'm puzzling through now.
I tried your function but it wouldn't return the site ( what I mean is that when I add the function in Coda the site won't display. If I comment the function out, displays fine.)I went to Bill's site to try his original code, in this case I'm able to get it to work using his example of italicizing one of the site title words. In my example I have the site title set to Genesis Demo and have added Genesis to Bill's function and it displays as italics.
Here is Bill's original code which used "of" as the word change:
function be_customize_site_title($title, $inside, $wrap) {
$custom = str_replace("Genesis", "Genesis", $title);
return $custom;
}
add_filter('genesis_seo_title','be_customize_site_title', 10, 3);I think the hiccup in this, and I'm not sure why, is the span class in your example seems to be the part that won't register.
I feel like I'm almost there with your help and it's much appreciated.Any thoughts about the span class in the function.php?
By the way, looked at your site and you do very nice work!
MarkApril 4, 2014 at 3:07 pm #98524Tony @ AlphaBlossomMemberHi Mark,
Sorry about that...I screwed it up adding the class after testing, and didn't adjust the code for that:
function be_customize_site_title($title, $inside, $wrap) { $custom = str_replace('Blossom', '<span class="title-red">Blossom</span>', $title); return $custom; } add_filter('genesis_seo_title','be_customize_site_title', 10, 3);
One strange thing I noticed with this if you're using the same word as in your link title attribute (title="xxx"), then it will also try to filter that, but that's html encoded for security so it will screw up the code.
Try it out to see if that works for you, but look at the link source code to check as well.
Thanks for the nice compliment...it's still pretty unfinished but trying to get it done 🙂
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 4, 2014 at 3:26 pm #98526MarkPMemberYeah I see what you mean.
I get
GENESIS DEMO">GENESIS DEMO on the front end with the second Genesis being red.
Honestly, I have no idea how to resolve the link issue. This is one of those simple things that isn't very simple 🙂
I want to move away from using an image logo for various reasons, but may not be able to accomplish design styling that I want without an image. Oh well.
Thanks again for the input. If you come up with something please let me know, and I will do the same.
Cheers,
MarkApril 4, 2014 at 3:35 pm #98528Tony @ AlphaBlossomMemberIt's strange...I thought I've used that function before with no issues, but...
So, I think the way I'd handle it is to use a filter and copy the Genesis function over, then make whatever changes you want:
add_filter('genesis_seo_title', 'abte_custom_seo_title', 10, 3 ); function abte_custom_seo_title( $title, $inside, $wrap ) { //* Set what goes inside the wrapping tags $inside = sprintf( '<a href="%s" title="%s"><span class="newclass">New</span> Title</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ) ); //* Determine which wrapping tags to use $wrap = is_home() && 'title' == genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p'; //* A little fallback, in case an SEO plugin is active $wrap = is_home() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap; //* And finally, $wrap in H1 if HTML5 & semantic headings enabled $wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap; //* Build the title $title = genesis_html5() ? sprintf( "<{$wrap} %s>", genesis_attr( 'site-title' ) ) : sprintf( '<%s id="title">%s</%s>', $wrap, $inside, $wrap ); $title .= genesis_html5() ? "{$inside}</{$wrap}>" : ''; return $title; }
There's other code out there that's simplified (if you want to use h1 on every page, or use a conditional, etc), but this makes your change and keeps the rest of the markup as is depending on page, other plugins, etc.
I was hoping there was a way to filter the $inside text only, but haven't been able to figure it out. Anyways, add this to your functions.php (instead of the other), change your text and classes, as well as your css to match and it should do what you need.
Maybe someone else can chime in with a better solution...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.