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").append($("#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.
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"));
Thanks for the tip, Ryan! And thanks for the great work you guys are doing over at trumani :)