Add Retina Logo to Genesis or WordPress Themes

Share this on:

Many Genesis and WordPress themes have a custom header area that you can use to add your logo or header. The size for the logo or header is set by the theme. You can add your own logo size, and you can also edit the custom header settings, so that your logo can be uploaded at twice the normal size. Then your logo will look sharp and not blurry on retina screens.

twice the size logo for retina screens

This tutorial will show you how to resize the header customizer to match your logo size, so that you can add retina logo to Genesis or WordPress themes, and then to adjust the theme styles, so that it looks great.

In your WordPress admin, if you go to Appearance > Header, you can see the size that your theme allows for the current logo. You’ll edit this to enable uploading a retina logo.

We’ll look at two example themes.

  • In Enterprise Pro theme, the default width of the logo is 320px and the height is 80px.
  • In Genesis Author Pro theme, the default width of the logo is 320px and the height is 70px.

For this tutuorial, we’ll use a new logo that is 400px wide by 100px high.

Step 1. Create a Retina Logo

Since we have chosen the logo size to be 400px wide by 100px high, the retina logo will need to be twice the width and twice the height. So you can add a retina logo that is 800px wide by 200px tall. You can use the exact size that you want your logo to be.

Step 2. Change the Custom Header Size

First, you want to find the code in functions.php that sets the logo size. It looks like this in Genesis Enterprise Pro theme, but will be similar in all WordPress themes.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 80,
	'width'           => 320,
) );

You can see that the width of the logo is 320px and the height is 80px.
Edit this to add the retina logo – 800px by 200px.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 200,
	'width'           => 800,
) );

In Genesis Author Pro theme functions.php, the default logo size is width of 320px and height of 70px.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'flex-height'     => true,
	'width'           => 320,
	'height'          => 70,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Edit it for the retina logo to be:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'flex-height'     => true,
	'width'           => 800,
	'height'          => 200,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Take note of the what the ‘header-selector’ is for your theme.

Step 3. Style Changes to Add Retina Logo to Your Genesis Theme

In your style.css, you will want to find the Site Header and Title Area sections. This is for Genesis themes; other WordPress themes will do something similar, but the selectors may not be the same; you’ll need to use the header-selector above to help you determine what to edit.

For the following selectors, you will want to make these changes. Note that these sizes are for the display size of the logo, not the larger sizes that were used in functions.php.

  • width will need to be changed from 320px to 400px
  • min-height will need to be changed from either 70px or 80px to 100px.

In Enterprise Pro style.css, find these three selectors:

.site-header {
	background-color: #fff;
	min-height: 150px;
}
/* ... */
.title-area {
	float: left;
	padding: 0 0 4px;
	width: 320px;
}
/* ... */
.header-image .site-title > a {
	background-position: top !important;
	float: left;
	min-height: 80px;
	width: 100%;
}

Our new logo is 80px wider and 20px taller than the original for Enterprise Pro. You’ll need to adjust the selectors accordingly.

.site-header {
	background-color: #fff;
	min-height: 170px; /* add 20px to height */
}
/* ... */
.title-area {
	float: left;
	padding: 0 0 4px;
	width: 400px; /* logo width */
}
/* ... */
.header-image .site-title > a {
	background-position: top !important;
        background-size: contain !important; /* required */
	float: left;
	min-height: 100px; /* logo height */
	width: 100%;
}

In Author Pro style.css, find:

.site-header {
	background-color: #7a8690;
	color: #fff;
	min-height: 120px;
	position: fixed;
	width: 100%;
	z-index: 498;
}
/* ... */
.header-image .title-area {
	padding: 25px 0;
	width: 320px;
}
/* ... */
.header-image .site-title > a {
	background-size: contain !important;
	display: block;
	float: left;
	min-height: 70px;
	width: 100%;
}

Our new logo is 80px wider and 30px taller than the original for Author Pro, so change to:

.site-header {
	background-color: #7a8690;
	color: #fff;
	min-height: 150px; /* add 30px to height */
	position: fixed;
	width: 100%;
	z-index: 498;
}
/* ... */
.header-image .title-area {
	padding: 25px 0;
	width: 400px; /* logo width */
}
/* ... */
.header-image .site-title > a {
	background-size: contain !important;
	display: block;
	float: left;
	min-height: 100px; /* logo height */
	width: 100%;
}

Step 4. Adjust Some Other Selectors

Enterprise Pro has a Header Right widget area that will need to be adjusted in width to match the larger logo. Since the new retina logo area is 80px larger than the original logo, you’ll want to make the header right widget area smaller by 80px.

In Enterprise Pro style.css, find:

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 720px;
}

and change the width to 640px:

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 640px;
}

Also in the @media only screen and (max-width: 1139px) { section, find:

	.site-header .widget-area {
		width: 600px;
	}

and change the width to 520px.

	.site-header .widget-area {
		width: 520px;
	}

In Author Pro, you don’t need to adjust the navigation width; it takes up what’s left, but you will need to make some adjustments for the fixed header. Remember that the new logo is 30px taller than the original, so that’s what we need to add to the selectors.
Find these selectors in the Secondary Navigation section:

.nav-secondary + .content-sidebar-wrap {
	margin-top: 100px;
}

.nav-secondary.shrink + .content-sidebar-wrap {
	margin-top: 70px;
}

.nav-secondary .genesis-nav-menu a {
	color: #000;
	padding: 42px 30px;
}

And change them to:

.nav-secondary + .content-sidebar-wrap {
	margin-top: 130px;
}

.nav-secondary.shrink + .content-sidebar-wrap {
	margin-top: 100px;
}

.nav-secondary .genesis-nav-menu a {
	color: #000;
	padding:  72px 30px 42px;
}

Now you should be able to add a retina logo to Genesis WordPress themes. Share a comment on how you added your logo.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.