Okay
  Public Ticket #1325846
Widgets at top of page
Closed

Comments

  •  1
    a01japat started the conversation
    October 6, 2017 at 3:42am

    How do you place widgets in the header/at the top of the page.

    I tried adding the following (snipped below) to functions.php but the widget didn't show up in the header.

    function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Header Widget',
'id' => 'header-widget',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
  • [deleted] replied
    October 6, 2017 at 7:13am

    Hi,

    In addition to that code you need to output the widgets in header (before menu):

    function kalium_before_header_show_top_header_widgets() {
    if ( ! is_active_sidebar( 'header-widget' ) ) {
        return;
    }
    ?>
    <div class="header-top-widgets">
        <?php dynamic_sidebar( 'header-widget' ) ?>
    </div>
    <?php
}
add_action( 'kalium_before_header', 'kalium_before_header_show_top_header_widgets' );

    So it will show header widgets if you have assigned any in Appearance > Widgets > Header Widget

  •  1
    a01japat replied
    October 6, 2017 at 7:25am

    Hi, Thanks  but I've added this snippet into functions.php and it doesn't work. Still doesn't show widget in header.

    Do I have to put the  code at a specific place in the functions.php document?

  •  1
    a01japat replied
    October 6, 2017 at 7:27am

    I put both code snippets at the end of  functions.php

    // Add widgets to header

    function wpb_widgets_init() {
    register_sidebar( array(
    'name' => 'Header Widget',
    'id' => 'header-widget',
    'before_widget' => '<div class="hw-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="hw-title">',
    'after_title' => '</h2>',
    ) );

    }
    add_action( 'widgets_init', 'wpb_widgets_init' );

    function kalium_before_header_show_top_header_widgets() {
        if ( ! is_active_sidebar( 'header-widget' ) ) {
            return;
        }
        ?>
        <div class="header-top-widgets">
            <?php dynamic_sidebar( 'header-widget' ) ?>
        </div>
        <?php
    }
    add_action( 'kalium_before_header', 'kalium_before_header_show_top_header_widgets' );

  • [deleted] replied
    October 6, 2017 at 7:36am

    Hi again,

    Can you please share your WP credentials here, because I need to login to your site and test this issue. Your information is safe here (private) in this thread.

    To include your credentials click Insert Credentials button in editor toolbar. (See how)

  •   a01japat replied privately
  • [deleted] replied
    October 6, 2017 at 8:19am

    Hi,

    I have slightly modified the code you have added:

    // Add widgets to header
    function wpb_widgets_init() {
    register_sidebar( array(
    'name' => 'Header Widget',
    'id' => 'header-widget',
    'before_widget' => '<div class="hw-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="hw-title">',
    'after_title' => '</h2>',
    ) );

    }
    add_action( 'widgets_init', 'wpb_widgets_init' );


    function oxygen_before_header_show_top_header_widgets() {
        if ( ! is_active_sidebar( 'header-widget' ) ) {
            return;
        }
        ?>
        <div class="header-top-widgets">
            <?php dynamic_sidebar( 'header-widget' ) ?>
        </div>
        <?php
    }
    add_action( 'oxygen_before_header', 'oxygen_before_header_show_top_header_widgets' );


    And now the widgets are being shown in the header:


    (view large version)

    You need to add the proper CSS to style these widgets in the header.

  •  1
    a01japat replied
    October 6, 2017 at 9:43am

    Thanks!

    Sorry to be annoying but do you know how to get the widget to be displayed on the right of the header. The default seems to be on the left.

  • [deleted] replied
    October 9, 2017 at 6:45am

    Can you please let me know how do you want these header widgets to be shown, probably draw a sketch to illustrate it.

  •  1
    a01japat replied
    October 9, 2017 at 8:03am

    Image attached. I just want it on the right corner of the page.

  • [deleted] replied
    October 9, 2017 at 8:08am

    Hi,

    Can you please add this CSS:

    .header-top-widgets {
        position: absolute;
        right: 120px;
        top: 10px;
        z-index: 1000;
        width: 80px;
    }

    .header-top-widgets select {
        width: 100% !important;
    }

    This should work for you:


    (view large version)