• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Show Logo Before Site Title in Genesis

Last Updated on July 14, 2018 Favorited: 1 times

This tutorial provides the various option to display a logo or icon before site title in any theme based on Genesis framework.

OPTION 1

The simplest solution is to add the logo from the customizer and then bring the site title and description back from the hidden layer.

Go to Appearance > Customize > Site identity and add your logo > Select WIDTH (Keep it minimum 55px or up) and Publish. Use SVG Support plugin to upload SVG logo in WordPress.

Add this CSS in your style.css and tweak as per your need.

.wp-custom-logo .site-title {
clip: auto;
width: 250px;
height: 50px;
padding-top: 15px;
padding-left: 20px;
float: left;
overflow: visible;
position: absolute;
display: inline-flex;
word-wrap: normal;
}

You can display the site-title+site description using this CSS only.

.site-description, .wp-custom-logo .site-title {
clip: auto;
width: 250px;
height: 50px;
padding-top: 15px;
padding-left: 20px;
float: left;
overflow: visible;
position: absolute;
display: inline-flex;
word-wrap: normal;
}

.site-description {
padding-top: 30px;
padding-left: 20px;
font-size: 16px;
}

Sometimes, when we show multiple elements or small logo under width: 55px; on the title area, the menu seems to jump out when toggled. We can fix it by increasing the logo width to 60px or by using

@media (max-width: 959px) {
.nav-primary {
    clear: both;
}
}

 

OPTION 2

So, We will use a simple ::before CSS selector to add the logo as background. Here is the Guide.

Now, if you do not want to use the above option or wondering to explore more ways here are some more options you can use to show something before site title.

Before going with the next option, It is necessary to understand some stuff.

a) Find a location

This is important to know where your stuff will display and for this, i highly recommend you to take a look at Genesis hooks or Genesis Visual hook guide.

For this purpose, we have the most accurate locations is genesis_header and genesis_site_title.

Now, Here adding priority in the code makes the stuff do earlier or later depend on the numbers. You will need to play with it if you want to learn.

b) Do the STUFF, Action

Once you have your location you can create a function and hook the action to do the stuff.

Let’s explore the other options and learn.

OPTION 3

The basic idea is to output the image URL as in HTML format, we will use something like this in functions.php

add_action( 'genesis_site_title', 'genesiskit_site_title_html_img', 5 );
function genesiskit_site_title_html_img() {

echo '<div class="custom-title-logo"><img src="PUT_IMG_URL_HERE">';
echo '</div>';

}

Here, Change the Image URL and You are ready to go with some CSS tweaks.

.custom-title-logo img {
width: 50px;
height: auto;
margin-top: -5px;
}

.custom-title-logo {
position: absolute;
}

.title-area .site-title {
padding-top: 12px;
padding-left: 52px;
clear: both;
}

 

OPTION 4

This will enable the feature to show a gravatar image attached to an email address.

add_action( 'genesis_site_title', 'genesiskit_site_title_avatar', 9 );
function genesiskit_site_title_avatar() {

printf( '<div %s>', genesis_attr( 'title-avatar' ) );
echo get_avatar( 'example@email.com', 50 );
echo '</div>';

}

and Some CSS.

.title-area {
width: 150px;
}
.title-area {
float: left;
padding-bottom: 15px;
padding-top: 15px;
}

.title-avatar {
margin-left: -10px;
}

.title-avatar img {
width: 50px;
}

.title-area .site-title {
padding-top: 12px;
padding-left: 52px;
}

 

OPTION 5

This works same as the OPTION 3, includes link and title which can be included in OPTION 3 manually.

add_action('genesis_site_title', 'genesiskit_php_site_title_logo', 9);
function genesiskit_php_site_title_logo() 
{

$logo = 'PUT_LOGO_IMG_URL';
printf('<div %s>', genesis_attr('custom-title-logo'));
printf('<a href="%s" title="%s"><img src="%s" alt="%s"/></a>', trailingslashit(home_url()), esc_attr(get_bloginfo('name')), $logo, esc_attr(get_bloginfo('name'))); 
echo '</div>';

}

Credits: Genesisdeveloper.me

This will use the same OPTION 3’s CSS.

OPTION 6

This snippet is from Carrie Dils and supports both image logo and gravatar.

//$header_image = '<img src="yourimage.jpg alt="" />'
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'), 64);
printf('<div class="title-avatar">%s</div>', $header_image);
}

USE CSS from OPTION 4.

Credits https://carriedils.com/custom-site-title-genesis/

That’s what I have all for showing something before site title. You can utilize these snippets to show logo and image after site title with minor tweaks.

Related Posts

  • Change Logo On Scroll in Genesis Sample
  • Hide and show title area or logo on hover in Genesis Sample
  • Reposition Primary navigation to left, secondary to right and logo in center in Genesis Sample
  • Logo using CSS only in Genesis
  • Conditional site header logo in Genesis

Categories: Free Content, Genesis Tutorials Tags: Logo, site title

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service