Genesis Framework Tutorial: How To Add Site Description To Site Title

Not all Genesis Framework themes show the site description underneath the site title.

And that’s okay if you’ve uploaded a logo image to your WordPress blog because the site description, otherwise known as a tagline, is usually written on the logo image.

But if like a client I am working with today, you don’t have a logo image and you feel that you don’t need to have a logo created just yet, then you’ll probably want the site description to be seen by your readers. That way they know what your blog is about.

In this post I will show you how to add the site description underneath the site title in Genesis.

Note: this will work for most Genesis framework themes. If it doesn’t work for the specific theme you are using, leave a comment below letting me know which theme you are using and I’ll take look.

Step One

First, we need to add some code to your functions.php file but before you do, a word of caution.

Be very careful when editing the functions.php file, one wrong move and your entire site will break.

If you’re not comfortable updating the functions.php file manually, I recommend using a plugin instead. Keep reading to learn more.

Whichever method you use (inserting the code manually or using the plugin), I strongly recommend making a full backup of your website first! 🙂

Did you make that backup? Great! Let’s continue.

Below is the code we are going to add to the functions.php file.

<?php

/**
 * Add Site Description to Title 
 *
 */
function be_desc_in_title( $title, $inside, $wrap ) {

	$inside = '<a href="' . home_url() . '">' . get_bloginfo( 'name' ) . ' <span class="desc">' . get_bloginfo( 'description' ) . '</span></a>';
	
	//* 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;	
}
add_filter( 'genesis_seo_title', 'be_desc_in_title', 10, 3 );

code first published at https://www.billerickson.net/code/add-site-description-to-site-title

Now watch the step-by-step video tutorial below showing you how to safely add the code snippet, without breaking your website.

We will use a free WordPress plugin called Code Snippets. It comes with a fail-safe switch which immediately deactivates a code snippet if an error occurs, so you can confidently add the code with peace of mind.

note: the video shows how to add the code only. Not how to style the description text. I will show you how to do that in step two below. Watch the video and it will all make sense.🙂

Step Two

Assuming you have now successfully added the code to your functions.php file, there’s just one more step we need to take to correctly position the site description, edit the font size and font color.

Go to Appearance and select Customize. Open up the Custom CSS tab. Copy and paste the css code below and save changes.

span.desc {
 display: block;
 font-size: 18px;
 color: #6b6a6a;
}

Next, visit your blog in a new browser.

Can you see the difference?

The site description should be positioned under the title, and the font size should be smaller.

You may want to edit the font size and color to your liking.

And that’s it. Following the steps above, you should now be able to see the site description under the site title.

Kind Regards,
Kerry – The Blog Mechanic

Leave a Comment