Add Widget Area Below the Divi Header Navigation Links

This post may contain referral links which may earn a commission for this site

Several people have asked me whether it's possible to add a widget area to the right hand-side of the Divi Theme header bar.

Here's the code to do so. It adds a widget area just below the Divi header navigation links (if you want to replace the Divi header navigation links with the widget area, you can hide the header links). The code below creates the widget area, moves it into place and then adjusts the margins around it to fit in well (and to look right on mobiles). It should be added inside php tags within your functions.php file. Note that editing PHP can break your site if you don't do it correctly, so be sure to back the site up before you use the code.

// Create the new widget area
function myprefix_widget_area() {
    register_sidebar(array(
        'name' => 'Header',
        'id' => 'myprefix-widget-area',
        'before_widget' => '<div id="%1$s" class="et_pb_widget %2$s">',
        'after_widget' => '</div> <!-- end .et_pb_widget -->',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>',
    ));
}
add_action('widgets_init', 'myprefix_widget_area');

// Create the widget area and then move into place
function myprefix_footer() { ?>
    <div id="myprefix-widget-area-wrap">
        <?php dynamic_sidebar('myprefix-widget-area'); ?>
    </div>
    <script>
        jQuery(function($){
            $("#et-top-navigation").after($("#myprefix-widget-area-wrap"));
            $("#myprefix-widget-area-wrap").show();
        });
    </script>
<?php 
} 
add_action('wp_footer', 'myprefix_footer');

// Adjust the layout so that it fits into the header better
function myprefix_css() { ?>
    <style>
    #myprefix-widget-area-wrap { 
        display:none; 
        float:right; 
        max-width: 500px; 
        clear:right;
        position:relative; 
    }
    #myprefix-widget-area-wrap .et_pb_widget { margin-right:0px }
    #myprefix-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 18px; }
    .et-fixed-header #myprefix-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 10px; }
    @media only screen and ( max-width: 980px ) { 
        #myprefix-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 0px; }
    }
    @media only screen and ( max-width: 768px ) {
        #myprefix-widget-area-wrap .et_pb_widget:first-child { margin-top: 18px; }
    }
    </style>
<?php
}
add_action('wp_head', 'myprefix_css');

Once you've added the code, go the widget area of your WordPress admin and you'll see a new widget area called 'Header'. Drag widgets into it and they should show up in your Divi header.

Hundreds of new features for Divi
in one easy-to-use plugin

59 Comments

  1. Thank you! If you need the widget on the same line as the menu, change this line:

    $("#mobile_menu_slide.et_mobile_menu").after($("#myprefix-widget-area-wrap"));

    To

    $("#mobile_menu_slide.et_mobile_menu").before($("#myprefix-widget-area-wrap"));

    Reply
    • Thanks for the tip, Ryan! And thanks for the great work you guys are doing over at trumani 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *