How To Add Custom Header Logo To StudioPress Premium WordPress Themes

One of the reasons why I choose Genesis to power my blogs is because of just how powerful and flexible it is for WordPress, and when it comes to customization Genesis theme framework makes it a pleasure to make your WordPress website unique and your own, without having to hog down your blog with unnecessary plugins.

StudioPress child themes for Genesis are amongst the best premium WordPress themes available for WordPress, without a doubt. There are many options for customizing your theme further without the use of excessive plugins.

Many of the themes come with options for adding your own custom header logo, however on a few number of child themes there isn’t an option for adding your own custom header logo.

In this post we’re going to look at two ways in which you can add a custom header logo to your child theme for Genesis.

Adding a Custom Logo to Genesis Powered WordPress Blog

Option 1

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.

Custom Header Genesis Child Theme

Option 2

Now let’s look at another way and I’m going to use the (in)SPYR child theme as an example where a upload custom header option is NOT available.

First you’ll need to ensure that you have the Simple Hooks plugin enabled on your blog. Then you’ll need to go to Genesis > Simple Hooks > Header Hooks, as shown in the image below.

Custom Header

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

Custom Header

<div align="left">
<a href="http://www.SITE-URL.demo">
<img src="http://www.IMAGE-URL.demo" width="460" height="70" alt="SITE DESCRIPTION">
</div>
  1. Replace the SITE URL with your own URL.
  2. Replace the IMAGE URL with your own image URL, where ever your logo is stored.
  3. 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 these located:

width="460" height="70"

Check the box:

Unhook genesis_do_header() function…

and check the box:

Execute shortcodes… and Execute PHP

Hit save an you’re all done…

If you’re using a cache plugin, make sure you flush this before checking to see if your logo works. I hope this tutorial has been helpful, if you have any questions please don’t hesitate to ask.

About Fabrizio Van Marciano

Fabrizio Van Marciano is the founder and editor of Magnet4Marketing Blogging and Online Business Tips. You can learn more about him here and follow him on -
Google+ | Twitter | Facebook | LinkedIn |

Comments

  1. Hi, thank you for this. I have a followup question. I put in your customized code and the only thing is when I load it the header does not come up. Rather it comes up as a red X. When I click on it, it says website not found. However if I put the url in another browser it comes up fine. Can you please advise ? Thanks .

    • Fabrizio Van Marciano says:

      Hi Charles thanks for your comment and question. This could be down to several reasons, first of all which browser isn’t loading your blog header? and what size is the header logo? Also where is your logo hosted i.e. wp-content or flickr etc. Try and remove the < div align = center > at the top of the code and the < / a > at the bottom and see if it loads after this. If you still have no luck email me via the contact page and I’ll take a look at it for you if you like.

  2. I’m running the Prose child theme which allows for an uploadable header, but it is not clickable. Your tutorial is the only thing I’ve found that comes close but it still doesn’t work.
    Is there something i can do to override the theme and use the simple hooks?

    • Fabrizio Van Marciano says:

      Hi Ryan, I’ve had similar problems with some StudioPress themes before. If you use the uploadable header and you have the simplehook plugin active on your theme make sure that the Unhook genesis_do_header() function from this hook? box is left unticked. If you use the simplehooks plugin to upload your header code as shown above make sure that the code you’re using is not broken or mistyped. Also ensure the Unhook genesis_do_header() function from this hook? is ticked on this occasion. This worked for me on several other blogs using Prose Child.

  3. Thank you so much for this tutorial. I searched for 3 days, trying to figure out how to add a custom header to my blog without any luck. The actual header needs some work, but at least I know what to do!

    Again, thank you!

    • Fabrizio Van Marciano says:

      Hi Beth, I’m glad you found the tutorial useful, thanks for stopping by and commenting :)

  4. Darleen says:

    Hi – I cannot get this to work at all with SLEEK child theme. How do I find out the size the image is expected to be and change if needed. The SLEEK theme also has Posts And Comments nav
    I am thinking may be easiest to simply overwrite the logo.png image in the images folder.

    Thanks

    • Fabrizio Van Marciano says:

      Hi Darleen, thanks for stopping by. First of all how are you adding your header? If your theme has a customizable header it will give the size of the image to upload either on the theme settings page or in the header section under appearance. If you’re using SimpleHooks all you need to do is resize the image in a photo editing software to add to one of the header hooks. Using a .png image works best.

      • Darleen says:

        Uploading to Media within WordPress and using SimpleHooks
        Going to upload to images folder and try that. There is no customized header and trying to change just the logo

        Thanks

      • Darleen says:

        I have entered code into the genesis_header Hook and it does unhook the original image but I am not able to display the new image.
        .header-image #header #title-area {
        background: url(images/logo.png) left top no-repeat;
        }

  5. hi,
    I tried this method and using Simple Hook. And its Not working at all.

    Are you sure this method words ?

  6. The reason above code doesn’t work is that you are not closing the image tag. It will be like this:

    And also if any one copy this code then he need to remove the double quotes and put again and it will work.

    Cheers

    • Hi Jawad, thanks for bringing this to my attention. I’ve now updated this post as of the date stamp of this comment. The code has been fixed, my fault so I apologise, this should now be working a treat, do let me know otherwise :) Thank you all once again.

      • Mark Smith says:

        This string has been a great help to me. I’m using the Focus child theme. I copied and inserted your code and managed to display my logo in my header. At first, it was centered, but I changed the position from center to left by making that minor tweak to the code. (Yea!)
        Problem is that now if I try to add my contact info by using a text widget in the right-side-of-header position on the appearance -> widget page, it doesn’t work. The text doesn’t appear.
        Do you have any thoughts?
        Thanks!

        • Hi Mark thanks for dropping by, glad the code somewhat works with a little tweak :) . I use to use the Focus theme and noticed that if a custom logo is added as I described above, it disabled the right side header widget for some unknown reason which is why I changed theme. I’ll upload the theme to my test blog in a couple of days time to see if there is any way around it and if there is I’ll post it on here.

  7. I just wanted to say thanks for reminding me about genesis simple hooks. I had forgot how nice that was to help me make edits and I was trying to figure out how to put an image in my header… 2 mins later plugin installed and problem fixed. Now I can actually go to bed!

  8. vicky sadhu says:

    Thats great help for my new blog which built on genesis news theme. awesome!! thanks for the post!! :)

    • Hi Vicky thanks for stopping by, glad you found the post helpful. Will be creating some more new Genesis tutorial posts in the coming months, I noticed you’re using the same News theme as I am, it’s a great theme don’t you think?

  9. Hi Fabrizio,

    Great guide thanks worked well.

    I did have a problem though with the syntax from your post. Was working fine but I was getting alt text under my logo.

    alt”Your Blog Title”>
    became

    Works great. My real first play with hooks. Thanks again.

  10. Fabrizio, you just saved my life!

    Thanks to your advice I finally could upload my logo with Option 2.

    Thank you so much!

  11. Say, in Genesis, does this ‘custom hook’ feature allow to have multiple headers? For example, to have a different header for each specific blog category, or to assign specific headers to a various blocks of pages?? Can it be applied using a custom variable? Thanks for any info on this…

  12. Thanks for this awesome Tutorial . I was searching for the same thing – Clickable images on Header in Genesis, and you have explained in a very simple manner. Great !

  13. Wow! Actually went smoothly! Thank You!!!!!!!!!

  14. This Tutorial is working 100% I was successfully. Thank You This step by step guide..!

  15. Yeah it work me. Thanks mate. Nice tutorial, I’ve been suffering a while for logo uploading.

  16. Thanks so much for this tutorial! I spent hours research instructions (and trying to figure out why my header image wasn’t clickable) for doing this with the Genesis Lifestyle theme, and this worked in minutes. You’ve definitely gained a new fan!

Speak Your Mind

*