How to Change the Logo in Genesis Child Theme

All of us want to be able to customize our website’s theme as we please. For an organization or a company, the logo is very important. We want the logo to be placed in a prominent position in our website, right in the header.

In your Genesis child theme, you can change the header to add the logo, if there is an option under the theme Appearance, to edit the Header. But if you do not have this option in your Genesis child theme, you will have to follow the below steps, to add the logo in the header.

 

Change the Header Settings for your Theme

Go to Genesis-> Theme Settings in your dashboard. Locate the option for Header and change the option ‘Use for site title/logo’ to ‘Image Logo’.

 

Remember to Save the Settings upon making any changes. The Save button is present at the bottom of the Theme Settings Page. Upon refreshing your homepage, you should see the default Genesis logo, in the header.

Note: The Genesis default logo is placed under the child theme->Images as logo.png. If no such file exists logo might not be shown.

[space]

Change the Default Logo

• The default logo displayed in the header is located under Images folder of your child theme, and is named logo.png.

• Thus, to change this logo, you can create your own logo.png file and replace the default file.

• Your logo image will be applied automatically by the theme. You should be able to see the change upon refreshing the page.

• If you do not want to replace the logo, upload your new logo (eg. mylogo.png), in the Images folder.  You will have to make an additional change in style.css of your child theme.

• Look for ‘.header-image .site-header .wrap’. Replace logo.png with mylogo.png.

  /* Logo, hide text */
  .header-image .site-header .wrap {
      background: url(images/mylogo.png) no-repeat left;
      padding: 0;
  }
  

Note: The header-image, site-header, wrap classes will be present only if your Genesis child theme style.css is created by copying the contents of Genesis theme’s style.css and not using @import. This is as per the Genesis guidelines to create the child theme.

 

Add HTML5 Support

Even after making the above changes, there maybe a case where the logo is still not displayed. This could be because you need to specify HTML5 support, in your child theme functions.php.

//* Add HTML5 markup structure
add_theme_support( 'html5');

This will tell the child theme to render the content using HTML5 instead of XHTML.

[space]

And done! You should see the needed changes. Do let me know if you have any questions in the comment section below.