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.