How To Add Custom Widget Above Header In Genesis Theme

elegant themes affiliate

If you want to add a custom widget above your header in genesis framework or child theme, then you will have to edit your theme’s default structure. And in order to do so, you will have to edit your theme’s function.php file.

One of the biggest advantages of using genesis is that you can modify almost every corner of your website with hooks and filters. Furthermore, you can even create your own child themes in which you can show your creativity and love for web designing.

In your case, you have to register a new HTML block just above the header section of your website. Now in order to customize this new HTML block with CSS, you will have to give it any specific class name. So your objective is clear and now let’s move ahead with editing.

Create Widget Above Header In Genesis Theme

Add Custom Widget Above Header

You have to just copy, exactly the same code which I have provided here into your child theme’s function.php file. Make sure that you don’t edit the parent framework as you will lose all your modifications once the framework get’s an update.

Now before pasting the code, I will suggest you create a backup of your theme’s function file. If you make any mistake while placing this PHP function your website will display some error and will become not accessible to your visitors.

add_action( 'genesis_before_header', 'wpvkp_bhw', 9 );
function wpvkp_bhw() {
genesis_widget_area( 'before-header', array(
'before' = '<div class="bh widget-area">',
'after' ='</div>',
) );


In this code, you will notice that I have used “add_action” as it’s essential to register any new function in WordPress. Now in order to register widget above header, I have used custom filter named “genesis_before_header“. Now you will notice that I have added an if conditional statement which helps me to filter the page on which this new widget will be displayed. You can obviously change the condition to show the widget on only posts, pages or can remove the condition to display it on every page and posts.

With the help of genesis_widget_area I have registered a new widget area which will be wrapped inside sub class “wrap” which is then enclosed within class “bh widget-area“.

Now if you want to display this custom widget area on just posts then you have to just change the if (!is_home())  to if (!is_single)).

Code To Register New Widget Area.

So now you have successfully registered a new widget in genesis child theme, but you also have to register a new sidebar area. This will help you to add any sort of widget like related posts, images, texts, videos, subscription box or just anything with drag and drop functionality.

genesis_register_sidebar( array(
'id' =>'bh',
'name' =>( 'Before Header', 'your-theme-slug' ),
'description' =>( 'Place your widgets here to display them above your header area', 'your-theme-slug' ),
) );

In this code snippet, you will notice that I have used the default hook “genesis_register_sidebar” to add new sidebar location. Then I have used keyword “array” since I want to store multiple values like HTML id, name and description. All these values make it easier for you to identify the required sidebar.

1 thought on “How To Add Custom Widget Above Header In Genesis Theme

  1. Hey, I was looking to create a full width header image in Genesis and came across this code. Unfortunately it broke my site. I was reassured by the hosting company that I had entered everything correctly. Do you have an alternative idea, maybe a plugin or another theme I could buy to achieve the same affect please?

Leave a Comment