The new Genesis 2.0 HTML 5 enabled Sample child theme is not only free, its become very popular. Its a fairly minimalistic theme however you can add support for more functions fairly easily.
Update : Here’s the new solution if using the new version of the Genesis Sample theme.
One feature it doesn’t include, is a built in Custom Header page which many other child themes built on Genesis already include by default.
In many cases, you don’t really need a custom header uploader to add an image however i’ll provide the code which adds one to this theme as another option.
Upload Logo or Header To Images Folder
Firstly, lets look at the easiest way to add your logo or another image in the header of the Sample child theme.
On Line 889 on this themes style.css file you’ll find the CSS which effects the logo image already included in the images folder.
.header-image .site-title > a {
background: url(images/logo.png) no-repeat left;
float: left;
min-height: 60px;
width: 100%;
}This makes adding your own logo super easy. Simply upload your image to your images folder and overwrite the default image named logo using a .png extension.
Also make sure you have selected image logo in your Genesis > Theme Settings > Header settings.
The default size for the logo is 360px width by 164px height.
No CSS or PHP coding needed.
How about if we change the size and use a image which is 320px width by 164px height.
Works fine also.
And it even works o.k for a logo which is less than 164px in height.
But how about if we use a full width header image which is 1139px width x 164px height? Still works well as long as the header image is named logo with a .png file extension.
Lets now look at using PHP code to add a Custom Header page for logos and header images.
Change Header Height
If your header image height is larger than the default, you will need to modify the value for the height in the CSS code on Line 1086 on your child themes style.css file.
.header-image .site-title a {
float: left;
min-height: 164px;
width: 100%;
}You’ll need to do this regardless of whether you use the pure CSS method or PHP code to add your header image.
Add Custom Header Using PHP Code
//* Add support for custom header
add_theme_support( 'custom-header', array(
'flex-height' => true,
'width' => 1200,
'height' => 200,
'header-selector' => '.site-title a',
'header-text' => false,
) );The dimensions used in this code need to match the width and height of the image you upload or the function will force you to crop the image before uploading.
Lets look at a very simple example. If you changed the values in the above PHP to 1139 x 164 and try to upload an image which is 1139 x 100px, this is what happens.
add_theme_support( 'custom-header', array(
'default-text-color' => 'ffffff',
'header-selector' => '.header-image .site-header .wrap',
'height' => 164,
'width' => 1139,
) );So that’s an easy fix as you simply make sure the image is exactly the same size as the values in the PHP code for width and height.
How about if you want your logo to display on the far left of your header? You can do this by editing the CSS code in your style sheet or use PHP code in your child themes functions file.
If you remove the line of PHP code which includes the headers like these:
'header-selector' => '.header-image .site-header .wrap',Then you can move your logo over to display from the far left of your site.
add_theme_support( 'custom-header', array(
'default-text-color' => 'ffffff',
'height' => 164,
'width' => 320,
) );And here’s the result:
How about adding a full width header image which extends from one side of the site to the other?
If you upload an image to your images folder which is wider than 1139px it won’t display full width. Here’s an image which is 1600px x 164px that i added to the images folder and named it logo.
To make this work, you can use this PHP code and change the value for the width as well as removing the line of code for the header selectors:
add_theme_support( 'custom-header', array(
'default-text-color' => 'ffffff',
'height' => 164,
'width' => 1600,
) );And here’s the result when adding the new full width image using the Custom Header page which the code creates.
The only problem with this method is you’ll need to make sure the logo or header image text in your image is aligned center so it looks perfect when viewed on different sized screens.
Learn more about How To Add Full Width Images In Any StudioPress Themes.
How About Different Header Images Of Different Sizes
You can also use different header images on different pages of your site even if they’re not the same size.
Video
This video shows you how to add a custom header image in Genesis child themes.
Seems there is a limit to how many times I can reply. My logo is 1200X200 (if I want a full one, trying around with different solutions). I have an afterheader menu so I can not have the title and description under it.
Rita. You can reply as many times as you like. Thanks for the clarification. I’ll write a tutorial soon to provide this solution.
Before i write this tutorial, please confirm the exact size.
Try this new tutorial
I’m aware that this is an old tutorial, but I have looked through a lot of your tutorials and I haven’t found my answer there either, perhaps I haven’t fount the right one.
The current Genesis sample have support for header. I want a header like the one in your example with 1134×164 above. Not that exact measurements but about so.
I have changed the numbers in function.php to 1080 and 254 and that gives me the possibility to load an image that size but it doesn’t show up any bigger on the actual site. I have tried to find the right spot in the style.css but it seems I can not find it. Do you have a suggestion?
Hello Rita
Looks like you have the PHP modified correctly.
The line numbers have change with the new theme version so i have updated this tutorial with the new line numbers.
The 2nd step is to modify the value in the CSS under the Site Header section. Try line 1086 and change the value for the min-height
Clear caching if needed.
Also, did you want the height to be 164px or 254px?
Yes that works. Haven’t decided which height I want yet. But as I test it is jus to adjust.
Another question.
Can I get the site-title and description to show as well? On top of the header image?
Try this tutorial and related links otherwise i’ll need to write a new tutorial next week.
No – couldn’t get that to work – header-image ‘disappeared’ when i change false to true. Maybe I can have the Title above the image, but I need the description aswell. Wrote a question in that tutorial.
How about after the logo before the title and tagline like this :
Also, what size is your logo?
EDIT: Do you think there’s any easy way to make the theme keep both the background and image logo in the header [not background]?
Brad, thank you for the tutorial. I’m using 2.1.2 Genesis Sample Theme with support for genesis.custom.header so I can upload the logo file directly in the admin area. In my next step I’m trying to add background to the header area only from an image file in CSS (I can’t do that from the admin area – background options are limited to the entire site). I’m doing this by adding the last line of code with the background property.
With this code background doesn’t display. Oddly, it does display when I change header from image to text in the admin area. Do you think there’s any easy way to make the theme keep both the background and image logo in the background?
Let me just mention that I tried removing support for genesis.custom.header so that I could control both logo and header background from CSS. With my limited skills I could only get as far as displaying the background – I also tried the code from this tutorial to get the logo to show up but with no effect. How would you go about this problem?
#header only works for I.D selectors
.site-header is the new class for the header.
SP Pro themes now use class selectors rather than I.D selectors.
That’s the only problem with your CSS.
Also, you don’t need to use the full URL to your image. You can use url(‘images/image.png’);
As far as using 2 images, i would need to test that to find out what the solutions are.
Here’s is what works:
Thank you for a quick reply. I went ahead and added this code to CSS file on a fresh install before touching anything else (including functions.php which has built in support for genesis-custom-header). It fails to display either header or background. What am I missing? This is what the header section looks like now:
update: My code also fails to display both header image and background after removing support for genesis-custom-header from functions.php
Your code doesn’t work because, as previously mentioned, I.D # selectors do not work on HTML 5 themes.
As far as displaying both your logo and header background image after removing support for the custom header, read this and you’ll see that’s correct either.
Thank you Brad – I really appreciate your answers and the new tutorial. Still – I couldn’t make it work on the fresh install of 2.1.2 Genesis Sample Theme just by following your steps.
It looks like I’m trying to bite more than I can chew with this customization. Or there is something (possibly obvious to a trained eye) along the way I’m missing. This is really frustrating and makes me doubt if I really want to stick with Genesis if relative simple jobs require such heavy lifting.
Don’t stick with Genesis if you don’t like it Michael.
There are other platforms like Divi which don’t require coding.
Or WordPress.com as long as you don’t want to place advertisements on your site.
However, most people i know who move from on from Genesis come back, including myself.
Brad, thank you for your generous offer. I decided to let it sit and come back to the problem further down the road. It’s not that I don’t like Genesis. I’m just struggling on a steep learning curve is all.
Hey Brad,
I tried the 1600×164 logo to display on my site by adding the code you provide into the custom css plugin but it doesn’t display correctly, it’s to narrow and not wide enough.
Thanks in advance
The screenshot shows exactly what the code produces.
If it doesn’t in your case, the problem is at your end, not with my code.
Don’t be offended, i didn’t mean that your code is at fault, i just addressed it so i could get some help. I’m new to CSS and a little lost 🙂
Thierry.
Making it clear so there’s no confusion so you can resolve the issue as quickly as possible.
Tnx Brad, i send you my site.
The CSS you have added/modified in your style sheet is this:
The CSS i provided in this tutorial is this:
You also need to modify the values in the CSS for the height to match your header image.
It does not work. I’ve replaced the logo.png file with my own logo with same file name, and the header option in the admin panel is set correctly to Image Logo. This should work, but the default genesis logo still shows up. I’ve cleared my browser cache and turned off my site caching, and still it doesn’t work. Working with Studiopress is proving to be counterintuitive and counterproductive.
Hello Jeremy.
Firstly, your email is invalid as i tried to send you an email and it does not exist according to Google.
The method in this post works perfectly as the screenshot proves. You must have missed something.
If you have other code or a plugin which effects the logo or header, it maybe interfering with the standard method of changing the logo.
Not sure how the default logo would display if you have deleted it and replaced it with your own.
How do you add a smaller image (300×100) without having so much white space above the image and the nav?
You can also reduce or remove any padding and margins.
Hi Brad,
Thank you for this easy to use demo.
I too am using the Genesis Child theme. I have tried numerous ways to get my logo to appear.
If I do it your way, it “disappears” but something is there because when I hover over it, I can click to my homepage, in Firefox. In Safari and iPhone, it shows Genesis default logo.
If I insert my logo as a URL (other blogs suggest this) it appears on Firefox but not in Safari or iPhone.
When I first tried the URL method, I was using a SVG file and thought may have be the porblem. Then I used a PNG version of my logo…
Could you please help?
Tyler
The screenshots in this post are based on the exact instructions in this post so they all work perfectly otherwise i wouldn’t be able to display the different image sizes in the header.
If you modify the code incorrectly, it will not work.
Looking at your CSS, i see you have changed the file name of your logo
I never mentioned changing the file name Tyler.
Not sure what else you have changed.
Please reverse all your code changes and follow the instructions on the post as they are tested and work exactly as the screenshots prove.
Thank you Brad, I changed everything back as you suggested:
And now it’s back to showing Genesis default logo.
In my media library, I uploaded my logo which was saved as logo.png. And to confirm, I did switch to logo in Genesis theme settings.
I must be missing something super obvious.
Thanks again. Really appreciate it!
The 1st solution simply requires you to remove the default logo’s from your images folder and replace them with your own using exactly the same file name and extension.
Otherwise you can add support for a custom header and use the new page added under the Appearance menu.
When i checked your site, your site title and description where displaying meaning you have either added support for a custom header using PHP code or failed to change the Theme Settings > Header > Use for site title/logo > Dynamic Text to Image Logo.
Try it on a fresh install. Rename the theme folder and theme name in the style.css file before activating.
And don’t forget, you may not see any changes unless you flush your plugins and/or any server side caching as well as your browser cache.
Hi there. I’m using the Genesis Sample Child theme. I’d like the bottom of my header logo and bottom of my header sidebar widgets to line up and sit closer to the top of the primary nav bar. The WP site is: http://openlearning.upenn.edu/; however, it’s currently under construction with a redirect to the existing site). I have tried various php and/or css snippets found elsewhere on this excellent resource (it’s already answered several other challenges for me), but this one is proving to be a real head scratcher for me.
Thank you for your help!
I am using the Genesis sample theme, yes. I am now all sorted though, it turned out to be a caching issue.
hahaha.
Should have mentioned that.
Good to hear Lee.
I am having the same trouble as Lee and DanT. I named my logo ‘logo.png’ and remembered to change the Genesis settings to display logo. It still is not showing up.
Are you using the Genesis Sample theme?
Where did you add the the image.
Link to your site please.
Same here – I have ‘Image logo’ selected in my Genesis settings and I’ve overwritten the default ‘logo.png’ file in my child theme images folder, but it’s not showing my logo at all…
Using the Sample theme or another Lee?
I’m like Kevin…. a little. I did it and my logo will not show up on my page. I deleted all the other logos/images in my images folder and named my logo “logo.png” . The Sample Genesis logos disappeared but my logo will not come up.?
Dan.
Make sure you have selected image logo in your Genesis > Theme Settings > Header settings.
Never mind Brad. I of course failed to remember to switch Genesis settings to display logo instead of text. Maybe something to mention to forgetfull ding dongs like myself. Thanks for your great work.
Sounds like you fixed it Kevin.
I opened Filezila and replaced the existing logo.png with mine and nothing happened. How can I be missing what seems so simple?
Kevin
Make sure you have selected image logo in your Genesis > Theme Settings > Header settings.
In your screenshot it seems like you have a header menu next to the logo. This doesn’t come by default with the Genesis, Sample theme. How do would you set this up?
Use the header right widget area with a custom menu widget
Thanks Brad, I kept researching and got that to work. I’ve had a look at the layout of your site here and realised Im actually trying to acheive something similar with how you have the menu except I want a logo in my header. Ive been able to add the logo but at the moment it floats to the left and the header position seems static altogether, while the content below moves.
On your site the logo is ”centred” over the content and sidebar and everybody moves together in harmony, when the page is resized while the menu still adjust down when the window is narrow. Ive been trying to adjust the margins and padding in different places, but everyone isn’t quite moving together as I like. I’m guessing that maybe I have to put the menu and content in the same div? or something like that?
Thanks for your help so far!
Hi Justin
I would need to taker a look at your site and code to see what you have done already so i can test a solution which works on your theme.
Cannot accurately provide a solution based on the information you have left in the comments.
This was so useful, just what I was looking for, many thanks!
Thanks Cristina.
This is the best tutorial for header image.
There are many people who faced problem with header image while updating to genesis 2.0.0!
Brad if you could find out a way to upload different header sizes for different devices (responsive ) it would be great.
Nick has developed a plugin but i couldn’t get it to work.
Hi Amit
You can add CSS to change how your images display on different devices which is personal choice.
Different people want different parts of their site to display differently on different devices.
Responsive design is customization based on how you want your site to look when it resizes.
Its personal choice and varies for each person.
Not many people use a theme right out of the box so they customize it. Responsive design is the same
If you don’t like the default responsive design, simply change the CSS in the media queries to suit your needs.
Hi Brad!
Thanks again! Very instructive!
Although it works fine for a logo which is less than 164px in height, the header keep being 164px height. How can I reduce this value? If I try to change the site-header height then the navigation bar height increases.
Where are you changing the site-header height?
In style.css. You can see it here:
As you can see, the image is 96px height, but the header is 164px. If I change the site-header to 100px, the navigation bar gains those 64px.
That’s right.
You can easily fix that by modifying the values for the different header classes in your style sheet.
This works fine, when you only have a logo. However when making use of the header widget I can’t get the size to change. Can’t figure out what in the CSS controls this space: http://i.imgur.com/HYHi3za.png
Hello Nelson
All the values are under the Site Header section in the style.css file.
Simply change the header right widget width and adjust the title area by the same amount.
Thanks, don’t know why I didn’t see .header-image .site-header .widget-area
Looks good Brad. I will take a look at it later when I get home and see if it’s better than what I did to replace the title with an image. I’m pretty sure your’s is better. 🙂
Hi Rick
Yes, its very easy with the Sample child theme.
No real need to edit any code.