Widget section in site header in Genesis

This tutorial provides the steps to add custom widget section in site header in any theme based on Genesis Framework.

One can add custom widget in different location, before and after of any default container. This is also helpful when you want to open and close the conatiner in additional div.

Here are some of the possible ways to add the widget section.

Let’s first register a widget area in child-theme/functions.php

//* Register a `custom-box` Widget area in functions.php
genesis_register_widget_area( array(
	'id'          => 'custom-box',
	'name'        => __( 'Custom Box Section', 'designody' ),
	'description' => __( 'This is a custom box widget area.', 'designody' ),
) );

and some options (use only one) you can use in child-theme/functions.php

1. Default Location

//* Add the `custom-box` widget using Genesis Hook and Display it for me.
add_action( 'genesis_header', 'dy_custom_box_widget_content' );

function dy_custom_box_widget_content() {

  genesis_widget_area ('custom-box', array(
        'before' => '<div id-"custom-box-default" class="custom-box in-header"><div class="wrap">',
        'after' => '</div></div>',
  ) );

}

2.  Before Title Area

//* Add the `custom-box` widget using Genesis Hook and Display it for me.
add_action( 'genesis_header', 'dy_custom_box_widget_content_5_9', 5 ); //before title-area priority 5-9

function dy_custom_box_widget_content_5_9() {

  genesis_widget_area ('custom-box', array(
        'before' => '<div id-"priority-5-9" class="custom-box in-header"><div class="wrap">',
        'after' => '</div></div>',
  ) );

}

3. Default Header Right

You can also Enable Default Header Right widget in Genesis.

//* Add the `custom-box` widget using Genesis Hook and Display it for me.
add_action( 'genesis_header', 'dy_custom_box_widget_content_10', 10 ); // default header right, or priorty value.

function dy_custom_box_widget_content_10() {

  genesis_widget_area ('custom-box', array(
        'before' => '<div id-"priority10" class="custom-box in-header"><div class="wrap">',
        'after' => '</div></div>',
  ) );

}

4. After Nav Primary

//* Add the `custom-box` widget using Genesis Hook and Display it for me.
add_action( 'genesis_header', 'dy_custom_box_widget_content_12_14', 14 ); // after nav primary.

function dy_custom_box_widget_content_12_14() {

  genesis_widget_area ('custom-box', array(
        'before' => '<div id-"priority-12-14" class="custom-box in-header"><div class="wrap">',
        'after' => '</div></div>',
  ) );

}

5. Before Site Title

//* Add the `custom-box` widget using Genesis Hook and Display it for me.
add_action( 'genesis_site_title', 'dy_custom_box_site_title', 5 ); // before site title

function dy_custom_box_site_title() {

  genesis_widget_area ('custom-box', array(
        'before' => '<div id-"before-site-title5" class="custom-box in-header"><div class="wrap">',
        'after' => '</div></div>',
  ) );

}

6. After Site Description

//* Add the `custom-box` widget using Genesis Hook and Display it for me.
add_action( 'genesis_site_description', 'dy_custom_box_site_description' ); // after site description

function dy_custom_box_site_description() {

  genesis_widget_area ('custom-box', array(
        'before' => '<div id-"after-description" class="custom-box in-header"><div class="wrap">',
        'after' => '</div></div>',
  ) );

}

It is always recommended to read Custom widget areas in site header and Navigation Bar in Genesis for more options and choices.