Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Add a Custom Header Image in Genesis Sample Theme

September 1, 2014 Leave a Comment

The Genesis Sample theme does not have a custom Header option in the Appearance sub-menu in WordPress Dashboard unlike all the other Genesis themes.

genesis-no-custom-header

Custom Headers are a native WordPress function that can be added to any theme including the Sample theme. This option can be easily added via a code snippet into your functions.php file.

//* Add support for custom header
	add_theme_support( 'custom-header', array(
		'flex-width'      => true,
		'width'           => 400,
		'flex-height'     => true,
		'height'          => 150,
		'header-selector' => '.site-title a',
	) );

The above code is added in to your functions.php file.

genesis-removed-header

Genesis header option is removed.

Once the code is added the Genesis header setting is removed from the Genesis Settings in the Dashboard and then the Header option under Appearance is enabled and takes over.

genesis-custom-header

After function added, teh Header is option available

So the function above adds in support for uploading a Custom Image with a preferred size of 400x150px but having a flex-width and flex height setting so a user can actually use any size. If you don’t want want the flex setting just remove it from the parameters.

The other parameter is the value for ‘header-selector’ which above is set to ‘.site-title a’. This is the preferred option here as it will be a clickable home link surrounded by SEO gems for site title and description schema structured data.

genesis-custom-header-markup

You can set the header-selector to any HTML element used in the mark up.

Also note in the above source view that there already is a a logo.png referenced in the above CSS as a background for .header-image .site-title > a, this is a default setting in the Sample theme and the image uploaded will override – however it is still good practice to remove that from the CSS as it still is a server request. Or if not using the custom header functionality simply put your header/logo in the images directory and name it logo.png.

CSS

The final thing to do is adjust any CSS markup in the case of Genesis Sample theme these rules need to be adjusted.

.title-area {
width: 360px;
}

.header-image .site-title > a {
min-height: 60px;
}

These are the styles already defined – adjust them to suit your header size.

For other Genesis themes that already have this feature, that size can also be changed in the function to the desired image size.

Cats: CSS, WordPress

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Discuss

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls
Get DesktopServer

Lynda

Lynda.com Online Training Videos

TreeHouse

smlinks

Learn WordPress
osx-modify-shell-path

How to Add to the Shell Path in macOS Big Sur and Catalina using Terminal

October 19, 2019

virtual-hosts osx 10.10 yosemite

Set up Virtual Hosts on macOS Catalina 10.15 in Apache

October 19, 2019

Installing Homebrew on macOS Catalina 10.15, Package Manager for Linux Apps

October 18, 2019

Where is the bash shell in macos Catalina?

October 12, 2019

Refine your search

  • All
  • Modules
  • Themes
  • Documentation
  • Forums & Issues
  • Groups

RSS ars technica

  • Google hits back after Apple exec says AI is hurting search
  • Apple: “Hundreds of millions to billions” lost without App Store commissions
  • Matter update may finally take the tedium out of setting up your smart home
  • Cue: Apple will add AI search in mobile Safari, challenging Google
  • Apps like Kindle are already taking advantage of court-mandated iOS App Store changes

RSS mac surfer

  • Tot is new text editor for Mac, iPhone, and iPad focused on constraints and ease of use
  • TiPbITS: Google Drive Sorting Can Hide New Documents
  • How to take a screenshot on a MacBook Pro
  • How To Create Simple Animation With Mac Keynote
  • Last Week on My Mac: Virus pandemics

Donate

Copyright © 2025· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2025 · gee on Genesis Framework · WordPress · Log in