How to Change the Logo in Genesis Child Theme

    Ankita Raikundalia
Listen to this article

Genesis Logo in ThemeAll 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’.

 Genesis Header Setting

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.

Genesis Header with Logo

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.


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.


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

Ankita Raikundalia

Ankita Raikundalia

2 Responses

  1. Hello, I was having the same issue and I followed the steps above down to ‘Add HTML5 Support’. Now my site is down with ‘http error 500’. Can you help me figure out how to get my site back?

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads