Add a custom logo to your Genesis One-Click Theme Setup

Discover in this tutorial how to add a custom logo to the One-Click Theme Setup (OCTS), also known as Genesis onboarding, to a Genesis child theme.

The Genesis Framework 2.8 update added the One-Click Theme Setup (OCTS) or Genesis onboarding.

Its function? To reduce frustration when setting up a theme. 😉

As you saw in the tutorial on how to add it to any Genesis child theme, this process aims to reduce the gap between what you see in a child theme demo and what you find when you activate it in your WordPress.

In that tutorial you saw how to create all the basic One-Click Theme Setup, but in this one you will learn how to complement it by adding a logo.

I recommend that you first read and follow the instructions on how to create an OCTS in Genesis, because with this tutorial you modify and expand that code.

Steps to add a custom logo in Genesis onboarding

1. Place the logo image in the configuration folder

First, prepare the logo in the format and dimensions you want, and give it a name, for example, “logo.png”.

In the case of Genesis Sample, which we’re going to use as a reference in this tutorial (since it can be used as a starter theme), you must place the image in: /config/import/images/

You’re using another Genesis child theme and there’s no such folder?

Then create the folder /images/, place it inside /config/import/ and then insert the logo you want to use.

Make sure that the dimensions (and aspect/ratio) of the logo are in line with those defined by the child theme.

For example, in Genesis Sample the suggested dimensions are 700 by 120 pixels.

2. Add the logo when running Genesis onboarding

Then enter the following code at the end of the file functions.php:

In this snippet you combine the hook genesis_onboarding_after_import_content with the set_theme_mod function so that the logo image is added to the theme header right after the One-Click Theme Setup content is imported.

Of course you can use another name (or extension) for the image, you just have to change it accordingly in the get_stylesheet_directory_uri() path.

You’ve got it! You have managed to give your theme one more point of customization thanks to Genesis Onboarding.

Remember that to take advantage of this new feature you must use versions equal to or greater than WordPress 5.0 and Genesis 2.8.

Conclusions

Want to take advantage of the new Genesis One-Click Theme Setup and add a custom logo?

Now you know how to do it easily and 100% customizable.

Thanks to this, your Genesis child theme will import the logo image and place it directly on the header.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉