How To Add A Header Or Logo In Genesis

Some StudioPress child themes offer a built in header page where you can simply upload an image and you’re done.

Some themes do not offer this feature so you’ll need to work out how to add your header image or logo to your theme using another method.

There’s several ways to do this which we’ll take a look at now.

Add Support For Custom Header

This method simply involves adding some PHP code to your child theme functions.php file.

Install Header Plugins

There’s a few plugins you can install to a dd a header or logo to your Genesis child theme:

• Genesis Simple Headers
• WP Display Header – Add custom headers to specific pages

The Genesis Simple Headers plugin simply adds a header page under your Appearance menu tab in your Dashboard the same way the above PHP works. This is a good solution if you want to add a logo to your header area.

The Genesis Responsive Headers plugin enables you to add several header images or logo’s which are different sizes and therefore achieve a responsive display based on those sizes.

The WP Display Headers plugin enables you to display different headers on different pages which can also be a different height.

Here’s a tutorial about how to display different header images on category archive pages.

Add Header Logo Manually

You can easily upload your header or logo image using FTP, File Manager in cPanel or your WordPress media library.

You’ll then need to add CSS code to your child themes style.css file.

You can modify your existing CSS cde or add more to your style sheet.

This code assumes you are aliging your logo to the left.

#header { background: url('images/header-logo-demo.png') left no-repeat; }

You can change the alignment from left to right or even centre your image based on your own preferences.

Using Hook Plugin

If you’re smart and use the Genesis theme framework with a StudioPress child theme, you also have the option of installing the Genesis Simple Hooks plugin. Other themes like Thesis also offer a hooks plugin as well.

Simply upload and insert your header or logo image into a new post draft and align it centre, left or right.

Grab the HTML from your text editor and paste it into the header hook field provided by your hooks plugin.

Here’s a tip about how to change the height of your header area if using one of the free default themes for WordPress. The tutorial also includes a link to change the header height in Genesis child themes.