Display a Logo Before the Site Title


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

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.

Logo and Site Title on carriedils.com
This tutorial is specifically for folks using a child theme running on the Genesis Framework.

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).

<?php // remove this line.
add_action( 'genesis_header', 'cd_site_image', 5 );
/**
* Output image before site title.
*
* Checks to see if a header image exists. If so, output that in an `img` tag. If not, get
* the Gravatar associated with the site administrator's email (under Settings > General).
*
* @see get_header_image() Retrieve header image for custom header.
* @see get_avatar() Retrieve the avatar `<img>` tag for a user.
*
* @return string HTML for site logo/image.
*/
function cd_site_image() {
$header_image = get_header_image() ? '<img alt="" src="' . get_header_image() . '" />' : get_avatar( get_option( 'admin_email' ), 224 );
printf( '<div class="site-image">%s</div>', $header_image );
}
view raw functions.php hosted with ❤ by GitHub

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

.site-header .site-image img {
border-radius: 50%;
display: block;
height: 100px;
margin: 0 auto 20px;
width: 100px;
}
view raw style.css hosted with ❤ by GitHub

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.

41 thoughts on “Display a Logo Before the Site Title”

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.