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:

Header for Website Template Reviews

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

Header-Small Business Blog

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:

.new-body-class #header #title-area {
background: url(images/new-logo.png) no-repeat transparent;
}

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:

Custom Header Body Class Reference

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.”

Comments

  1. vicky sadhu says:

    thanks for the tutorial, it helped a lot to me for my new blog which built on genesis! :)
    vicky sadhu recently posted..Add Static FBML to Facebook Fan Page Using IQ-FBML AppMy Profile

Leave a Comment

*

CommentLuv badge