[Resolved] Add New Widget Area Below Header

[Jackson]

Generally Widgets are meant for sidebars and usually displayed after the main content in responsive view.
I need a separate widget area below the header, so that, it is displayed before the main content in Mobile View. Is is possible?
Note: I don’t want to make modifications with existing Sidebars (Both Right and Left)
Thank You

[David]

Hi there,

you can register your own widget areas and use a GP Hook eg. generate_after_header to output your custom widget area:

https://codex.wordpress.org/Widgetizing_Themes

But that will require you defining the HTML and CSS for its display.

If you’re using the Block Editor, than this is one method i use:

1. Install the GenerateBlocks and Organic Widget Area Block plugins.
2. Create a New Block Element and set it to Hook > generate_after_header
3. Build your responsive layout and stying using the GenerateBlocks Grid Block etc. and add the Organic Widget Area blocks to them.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jackson]

Thank you very much David for mentioning available solutions. I may go with the first one…Probably

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[WebbPlatsen]

I want this too and I just want use Appearance > Widgets.

Specific Genesis code below works.
I understand “genesis_after_header” need to be replaced by “generate_after_header” and genesis_widget_area function can not be used.

// Register TopContent Widget Area
register_sidebar( array(
'id' => 'topcontent-widget',
'name' => __( 'Top Content', 'genesis' ),
'description' => __( 'Top Content Widget Area', 'childtheme' ),
'before_widget' => '<div>',
'after_widget'  => '</div>',
) );

// Hook
add_action( 'genesis_after_header', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
   genesis_widget_area( 'topcontent-widget');
}

[David]

Hi there,

you would use the core dynamic_sidebar function eg.

add_action('generate_after_header', 'add_custom_widget_area' );
function add_custom_widget_area() {
    dynamic_sidebar( 'topcontent-widget' );
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts