Sridhar Katakam

Genesis and WordPress Tutorials

Widgetized Header in Genesis

by 3 Comments

In the members-only forum a user asks:

I have a client that wants to essentially make a “text” header, meaning the header would be a solid background with 3 large words as the header. Originally they created a png for the header but this isn’t really responsive since it “shrinks” too much. I created a 3-widget area above the header with 1 word in each. Cleaned it up with CSS and then “display:none;” on the header. This seems very “patchy” as far as I am concerned.
What I want is to be able to “widgetize” the header area itself so I can put the widgets in the header itself.
I am sure that it is possible to do this but I am wondering if it is practical?

the only thing I have at this time is an image of the page. I have uploaded it to a test site of mine:
http://gravityforms.noworryweb.com/front-page.png
The client wants to create an image to put in the header ( “Night at the Auction” ) but as you know it will just get squished in a smart phone. Since it is all text I was going to create a 3-widget area and put “Night” in one,”at the” in another, and “Auction” in the last. This way it will “fold” for smaller form factors.

In this article we shall

  1. remove the header right widget area
  2. register header widget area
  3. remove site description
  4. replace Header Site Title with header widget area output
  5. enter our desired text in a text widget in this widget area and style it

widgetized-header-genesis

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • >