How to Show a Logo Before Site Title (Genesis)

If you have a personal blog and want to customize the header section, I’m sure you’re going to find this tutorial useful.

In this post, I’m going to talk about how to display a logo (or gravatar) before site title in your site header.

Before we get started, I’d like you to know this tutorial is meant for WordPress blogs running on Genesis Framework.

Here’s an example of what we want to achieve.

Here’s what a site title looks like in Genesis Sample before customization.

In order to display the logo as shown above, you need to:

#1. Check if the admin email address has Gravatar profile. If not, you can create one here.

#2. Add a code snippet to your functions.php file.

#3. Tweak or add some code in your CSS file.

So, let’s get started now.

Step #1: Add the following code at the bottom of functions.php file of your active theme.

Step #2: Add the following code at the bottom of your CSS file in your active theme. Please, note that you might need to change the properties to suit your needs.

/*—– Styling Logo before Site Title —–*/

.site-header .site-image img {
border-radius: 50%;
display: block;
height: 100px;
margin: 0 auto 20px;
width: 100px;
}

Step #3: Tweak title-area. This step is optional. For the tutorial purpose, I made the following adjustments.

/*—– Adjusting Site Title after Site Logo —–*/

.header-full-width .title-area {
width: 50%;
padding: 20px;
}

Here’s what it looks like after the logo is added before the Site Title.

An Alternative to Gravatar

If you don’t want to use Gravatar, you need to use the following code (instead of the PHP code snippet given above). Also use the URL to your image logo on line number 07, replacing the example logo I have used.

Also Read: How to Replicate Site Title Design of Modern Portfolio Pro