One of the many reasons why I choose Genesis Framework 2.0 to power my blogs is simply because of just how simple, yet powerful and flexible it is to use for WordPress platform, and when it comes to customization Genesis theme framework makes it a pleasure to make your WordPress website totally unique and personal to you, without having to hog down your site using unnecessary plugins.
StudioPress child themes for Genesis are amongst the best premium WordPress themes available for WordPress that money can buy, and as I said there are many options for customizing your theme further without the use of excessive plugins, and one particular feature we’re going to look at is adding a custom header logo to your Genesis powered blog.
Many of the StudioPress and third-party themes come with options for adding your own custom header logo quite easily, however on a few number of child themes there isn’t an option for doing this.
So in this post we’re going to look at two simple ways in which you can add a custom header logo to your child theme for Genesis 2.0 with minimal effort, so let’s get started.
Adding a Custom Logo to Genesis Powered WordPress Blog
As I mentioned earlier some of the child themes, such as the News Child theme, already have a section in which you can upload and use your custom header quite easily. This is the first option we’ll look at.
First go to appearance > header as shown in the image below. Then simply upload your header logo and hit save changes. That’s the easiest way ever, but as I also mentioned not all child themes have this option.
Now let’s look at another way, and I’m going to use the (in)SPYR child theme as an example where an upload custom header option is NOT available.
First you’ll need to ensure that you have the Simple Hooks plugin enabled on your blog, you can find this plugin in WordPress repository. Once installed you’ll need to go to Genesis > Simple Hooks > Header Hooks, as shown in the image below.
Once you’ve opened the Header Hooks find the field titled:
Genesis_Header Hook – This hook outputs the header (the #header div)
Once located paste the following code into this box, see image below –
<div align="left"> <a href="http://siteurl"> <img src="http://imageURL.demo" style="float:left;" hspace="0" vspace="0" width="450" height="70" alt="site description"></a> </div>
- Replace the site URL with your own URL.
- Replace the image URL.demo with your own image URL, where ever your logo is stored.
- Replace the site description with your own site’s description
If you want to change the width and height of your logo, adjust the value of:
If you want to adjust the vertical and horizontal position of your logo adjust the value of:
Now check the box:
Unhook genesis_do_header() function…
and then check the box:
Execute shortcodes… and Execute PHP
Hit save an you’re all done…
If you’re using a cache plugin like WP Super Cache, just make sure you flush this before checking to see if your logo works correctly. I hope this tutorial has been helpful, if you have any questions of run into any problems please don’t hesitate to leave me a comment below.