How to Create Additional Custom Headers in the Genesis Theme Framework

This Genesis Framework tutorial sets out how to insert additional headers/logos within the same website built on the Genesis Framework (it’s a WordPress theme) for a particular post or page.

Let me show you what I mean by illustrating this website. This site is about two main subjects:

1. Website Templates
2. Small Business Blog (I run a small offline business and blog about my marketing activities).

Here’s my header for the Website Templates sections:

Here’s my header for the Small Business Blog sections:

UPDATE: As you can see, I’ve changed my website theme (to Magazine theme by StudioPress).  I also changed my logo to something more generic, which is now used on all hubs within my site.  That said, the steps in this tutorial still work.

Steps Required:

1. Create a new image logo and upload it to your child theme images folder. Create a name for it different than your existing logo image.

2. Create a new body class in your CSS style sheet. For example for the new header I created, I simply inserted the following CSS code:

3. Then in your “Add Page” or “Add Post” panel, go to the “Genesis Layout Options” section. In that section is a field for “Custom Body Class”. Put in your new body class. In my example it would be “new-body-class”.

Screenshot:

4. Update your page or post. That’s it. You’ve created a new logo/header for that page/post.

Creating a new header/logo for archive pages such as Category pages is a little more complex. Check out this article on the StudioPress website called “How to Create Dynamic Body Classes.”

Related posts:

1. How to Set Up SEO in the Genesis Framework WordPress Theme
2. How to Set Up StudioPress’ Genesis Theme Simple Sidebars
3. Genesis Theme User Profile Widget – This is Fantastic for Website Conversion
4. Amped Child Theme Review – a WordPress Theme
5. The Best Free Blog and Website Headers Generator Available