Display a Logo Before the Site Title

In this article, I’ll walk you through a Genesis customization I use here on my site: displaying a logo before the site title. In my case, the “logo” is actually just my Gravatar, but I’ll show you how to add either a logo or Gravatar to the site title area of your Genesis child theme.

The code to add a logo before the site title

Use the following code snippet and corresponding style to add either a logo (header image) or Gravatar just before the site title.

Before you go cracking open files and editing them, I trust that you’re not working on a live site and you’re checking code for errors before blindly copy/pasting into your own site. If that’s not the case, please take a moment to read about the proper way to edit a WordPress site.

Drop the following in your theme’s functions.php, theme config file, or the Genesis Extender plugin (or wherever else you add your customizations).

You’ll likely want to adjust the styles to suit your own needs, but here’s what I used:

The explanation

In addition to the comments in the code, I’d like to walk through what’s happening.

Getting the header image

The first thing our custom function does is use a PHP ternary operator to set a value for our $header_image variable.

We call WordPress’s get_header_image() function, which returns a boolean (true or false).

If it returns true (there IS a header image), then we use that URL as the source for the img.

If it returns false (there is NOT a header image), then we call WordPress’s get_avatar() function.

We pass in the two arguments, $id_or_email and $size.

To get the $id_or_email value, we use WordPress’s get_option() function, telling it that the option we want to get is 'admin_email'.

For $size, we just input the pixel width and height (Gravatar’s are always square).

Once, this bit of code processes, we have a value for $header_image.

Wrapping the image in some HTML markup

Here we’re using PHP’s printf() function to output a formatted string. I love these PHP string functions because they’re so much cleaner to read than an echo that switches back and forth between PHP and HTML output.

printf() allows you to use “placeholder” values. In this case, we have our HTML markup that we want around our image (this allows us greater control over styles) and you’ll notice a %s sandwiched within that div. That %s is a placeholder for the first value that comes after the comma, the value of $header_image.

When the code is parsed, it’ll substitute the %s for the value of $header_image.

Where to hook this function?

Now that you know what the function does (and what it outputs), the last piece of the puzzle is to call this function.

Since we want to display this image before the site title, then we need to look with the Genesis Framework to see where (or on what hook) the site title is happening and then hook our function just right before that.

---

You might also like reading Putting the Framework in Genesis Framework.

For more in-depth, I recommend my Customizing Themes with Genesis for WordPress course on LinkedIN Learning. (Here’s a free 30-day trial to LinkedIN Learning)

If you crack open the files for Genesis Framework, specifically /lib/structure/header.php, you’ll see that the site title output is part of the genesis_do_header() function and is hooked to genesis_header().

So that’s where we’ll hook our function.

add_action( 'genesis_header', 'cd_site_image', 5 );

In order to have my function trigger before genesis_do_header(), I’m setting it at a priority of 5. (Read here for more information about how priorities work).

There you have it!

Now you’re all set to display a logo (or Gravatar!) before the site title. Adding the Gravatar is a fun little customization, especially for a personal blog.

If you try out this tutorial, leave me a comment with a link to your work.

Bonus

You may have noticed my site title uses two different colors. If you’d like to try that out, here’s a tutorial to show you how to add a custom class to the site title.