[Resolved] Add New Widget Area Below Header

Home Forums Support [Resolved] Add New Widget Area Below Header

Home Forums Support Add New Widget Area Below Header

  • This topic has 5 replies, 3 voices, and was last updated 8 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1531663
    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

    #1531931
    David
    Staff
    Customer Support

    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.

    #1532820
    Jackson

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

    #1533004
    David
    Staff
    Customer Support
    #1978143
    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');
    }
    
    #1978263
    David
    Staff
    Customer Support

    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' );
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.