This article has been archived.
This plugin is no longer in the WordPress plugin repository. You can find the last archived version on Github for anyone who needs it. It is no longer under development or supported.
Easy Styling For Your Genesis Site Title
If you are not using an image for your logo on your Genesis child theme, then you are pretty much left with using plain text for your site title.
Wouldn’t it be nice to add some pizazz to your site title?
To get that effect, you need to edit two files in your child theme’s folder, the functions.php, and style.css. While talking with Ginger Coolidge the other day, she mentioned that some users prefer not to edit their functions.php file. Editing it the correct way on a live site means you need to download the file, edit it, and then FTP it back to your server. That may be more than some users are comfortable with. A single typo in your functions.php file will generate the white screen of death on your WordPress site. So are they just left with a boring site title if they don’t want to write code? Not any more.
We’ve come up with an easier way
Ginger and I put together this handy plugin called the Genesis Site Title Styles. It adds span tags around each word in the site title so that you can style them separately using CSS. Once you’ve installed and activated the plugin, all you need to do is add some CSS to target the site title span tags.
Below is an example of the CSS used to style the site title. You can modify the code to your liking and add it to the section in your style.css that targets the .site-title class.
| /* An example of how you can style each word */ | |
| /* Uncomment this if you want to remove the space between words | |
| * | |
| .site-title { | |
| font-size: 0; | |
| } | |
| */ | |
| /* Font size for all the span tags */ | |
| .site-title span { | |
| font-size: 30px; | |
| } | |
| /* style the first word */ | |
| .site-title span:nth-child(1) { | |
| color: #333; | |
| font-weight: 400; | |
| } | |
| /* style the second word */ | |
| .site-title span:nth-child(2) { | |
| color: #99d7da; | |
| font-weight: 700; | |
| } | |
| /* style the third word */ | |
| .site-title span:nth-child(3) { | |
| color: #333; | |
| font-weight: 400; | |
| } |
If you prefer not to edit your style.css file, you can add your own CSS using this option in the Customizer -> Additional CSS.
Curious about how this CSS works?
A span tag is wrapped around each word in the site title. Using the nth-child() selector, you can target a specific span tag within the site-title class. So, .site-title span:nth-child(1) would target the first word and .site-title span:nth-child(2) would target the second word. Get the idea?
If you would like to eliminate the space between each word in the site title, uncomment the code that sets the font-size to 0 for the .site-title class. Just make sure it is placed before the .site-title span:nth-child selectors.
This plugin is based on the code the Carrie Dils provided in her post: Add a Custom Class to the Site Title in Genesis.
Big thanks to Carrie for contributing some edits and helping us deploy it to Github.
If you are interested in learning how to edit your WordPress site files, Carrie has some helpful blog posts on how to do just that:
Editing Your WordPress Site 101
Teach Yourself to Troubleshoot
Whichever method you choose, go add some pizazz to your Genesis Site Title.