• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Widget section in site header in Genesis

Last Updated on September 8, 2020 Favorited: 3 times

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.

Related Posts

  • Simple Social Icons and Search widget after primary Navigation in Genesis Sample

Categories: Free Content, WordPress Tutorials Tags: header widgets, site header widgets

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service