Widget in the header

Hi,

I'd like to add a widget to my header.
1) Is this plugin working only for sidebars?
2) What is the proper way to add a widget in the header (not necessarly to the menu)?

I need help for this!!!

Thanks in advance!

Cheers

  • Adam Czajczyk

    Hello ubiznessme,

    I hope you're well today and thank you for your question!

    The "Custom Sidebars Pro" plugin works with sidebars only. If there's no sidebar/widget area already available in your site's header it will not help you with this.

    Sidebars/widget areas availability is a matter of a theme. Therefore, in order to add a widget in your theme you will want to adjust your site's current theme. First step would be to create a basic child-theme (as it's not advised to modify theme directly). It's a simple task and this article explains how to do this:

    https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    You will then want to copy the "header.php" file from your parent theme to the child-theme folder and this will let you start working with it.

    Next step would be to register a new sidebar. To do this you will want to add following code to the "functions.php" file of your child-theme:

    if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
    'name' => 'My Header Sidebar',
    'id' => 'my-header-sidebar',
    'description' => 'A widget area in header',
    'before_widget' => ' ',
    'after_widget' => ' ',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    }

    Activate the child-theme and if everything goes fine at this point your site should look and work exactly the same as it was but in the dashboard on "Appearance -> Widgets" page you should now notice a new sidebar called "My Header Sidebar".

    You can now drag and drop any widget(s) you wish onto that sidebar.

    Last step is to make it appear in the site's header. This may be slightly tricky because it depends on the code of your header. Basically, you should add following code to the "header.php" file of your child theme:

    <div id="header-sidebar">
    <ul>
    <?php
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('my-header-sidebar') ) :
    endif; ?>
    </ul>
    </div>

    In case you had any further questions on this, let me know please.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.