A very common question we get from customers is how to edit the header image, what’s the best practices for sizing, and why is it so complicated. The truth is, it shouldn’t be. This isn’t a bashing of how Genesis is set up and they likely had good reasons for doing things their way, but the way it’s set up causes an unnecessary amount of support requests.
We’ll go over the issues we’re looking to solve, and present a solution.
Background vs. Foreground Image
Standard practice (and the behavior users expect) is to be able to click the logo to head back to the home page. Background images aren’t clickable, fore-ground images are.
Foreground images are also much more straight-forward and intuitive to customize with CSS than background images.
Genesis uses a background-image, which has unintuitive properties and is difficult to modify, so we’ll be changing this to a regular foreground image using the <img> tag.
As a best practice, the header image shouldn’t be statically positioned (scroll down the page with you). No one cares about the website’s logo when trying to read content.
Website Title Text
Skipping the history of website titles and how they’ve affected search engines and changed over the years, we’ll jump straight to what we’re seeing with modern websites:
Site-wide title text is basically irrelevant and ignored – it’s now a background item and largely unimportant as page-weight has surpassed domain-weight. We can drop title text and simply use an image instead.
This means that the H1 tag shouldn’t be used for the website title, since it’s purpose is to denote importance, and should instead be saved for the content for that specific page. Sidenote: This may not be a big issue, as search engines seem to be identifying what parts of the website are generic and unimportant (header, sidebar, footer) and applying their own down-weighing versus the actual content part of the page.
This is currently handled by Genesis by adding the site-title to the header and hiding it off screen using CSS. This is an explicit violation of Google’s Webmaster Guidelines.
Another benefit is that this will remove custom fonts people embed for just the title tag. These are problematic because:
- Embedding external fonts slows website load speeds
- Website visitors are really going to notice a custom font – this is for the website owner’s ego more than anything
- They may violate GDPR – no one is really sure right now but you can Google it (how’s that for irony)
One of the more frustrating aspects of customizing the theme is having to hard-code in the dimensions into the functions.php file – this not only gets overwritten in updates, but is also bad web practices. Stylistic decisions such as image sizing should be completely controlled by CSS, and not coding. This may be due in part to the above problem of using background-image instead of a regular <img> tag.
The solution here is simple: We’ll let customers upload their own image to the “Customize” admin screen, and display it at whatever resolution they upload it at. This means that the size decision is made before ever uploading
One thing we’ll need to factor in, is mobile-sizes – setting a max-width property based on the viewport should allow graceful downsizing.
As a best practice, we’ll also recommend customers use as small of a logo as possible. Generally speaking, the website owner is the only person who cares about the website’s logo, and it provides no value to the website visitor. Also, smaller images load quicker and require less bandwidth.
- All formatting should be controlled 100% in a single location by the stylesheets, no inline or embedded CSS
- Zero reason to require editing PHP files or hard-coding for changing headers
- Do not use Google Fonts – slows page loading, visitors do not care
- We’ll remove the title text from the header of the website (not to be confused with the <head> metadata)
- It’s no longer important to search engines, and hiding it off-screen using CSS is explicitly forbidden
- We’ll use a regular <img> instead of a background-image, with the title in the proper “alt” attribute
- As a best practice, this should be small since it provides little-to-no value to visitors
- We’ll link the header to the homepage
Considering all the above, the simplest course of action is to remove the Genesis functions handling the header/title and replace it with a simple image, able to be selected in the “Customize” admin panel. The image should simply display at whatever size the user uploads it at (whether that’s 150×150 or 1000×150), with max-width adjustments based on viewport (mobile).
This apparently has been addressed previously (in 2013 of all things) in this post by bhwebworks. We’ll use the blackhillwebworks code with a slight modification – using the header selected in the “Customize” panel.
Customizing The Theme
For older versions of the theme that use the old header behavior, customers will need to customize the theme. As a customization, customers should use the Feast Customizations Plugin to preserve the change when updating the theme, with the following code:
With the code portion changed, we just need to clean up the CSS. In Foodie Pro up to version 3.1.4 you’ll want to remove the following from the theme’s Admin > Appearance > Editor > styles.css:
Note: Because you’re removing this form the theme’s stylesheet, it will be over-ridden when you update the theme in the future. This is fine because it won’t be present in future versions of the theme anyways.
And finally, remove the inline CSS from that’s loading the background image:
This will become the default header behaviour for Feast themes beginning with:
- FoodPro v?
- BrunchPro v?
- CookdPro v?
- CravingsPro v?
- SeasonedPro v?