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.
is there a way to get it to sit to the right hand side of the divi menu?
Hey stefan, the layout of the html makes it a bit tricky, but one way to do it would be to just push the Divi menu to the right and move the widget area up, with something like this CSS:
#et-top-navigation { margin-right: 200px; } #wtfdivi003-widget-area-wrap { margin-top: -80px; }You'd need to adjust the values to suit the size of your widget area.
If you're able to show me an example page with your menu and the widget area in place I might be able to suggest some refinements.
Hello,
Oh oh oh oh !
I did a copy / paste code in the file function and it triggers a fatal error!
At least on this date after the last update
An idea of the problem ?
Hi Hubert,
First, hopefully you were able to undo the error – just removing the code you pasted in should be enough. But if you're having any problems undoing it, let me know.
The code in my reply to stefan is CSS code (unlike the code given in the post which is PHP code), and needs to be added differently. The easiest way to add the CSS code is to paste it in the "Divi > Theme Options > General > Custom CSS" box.
It could alternatively be integrated into the code given in the post, by adding it after the line with the <style> tag. That would keep everything in one place, but there's a bit more of a chance of triggering an error than when adding it into the Custom CSS box.
Thanks!
Will this work for the Divi Extra theme too?
Hi Andrea, it won't, unfortunately. Though they look similar, the Extra header is actually implemented quite differently from Divi's and will need a bit of a different solution. I don't have such a solution to offer you at the moment, sorry, but if I work out how to do it I'll update here. Thanks!
Hi, I added the widget and place a banner but it seems like the banner is not position in the right center. How can this be fix?
Hi Wong, are you able to share a link so that I can take a look? The right of the widget area should line up with the right of the header links. Are you looking for it to be centered under the header links instead? Or centered in the header as a whole? Thanks!
wow, I bought your plugin and you erase my comment? Can I ask why? I was just asking support for a code not working?
Hi Emilia Agency, your comment was never erased. It was still in my moderation queue as I hadn't had a chance to answer it yet. I've just posted a reply now. Thanks!
Hi, I tried the slide-in menu code but unfortunately that didn't work for me, don't get why…the widget content just don't appear…
Hi Cristiano, sorry I'm just getting back to you on this. Are you able to send me a link to the site you've added the code on, so that I can take a look? I checked on the site linked in your comment, but there is no sign of the slide-in menu code on the front end – which would suggest that either you don't have the code on that site at the moment, or there was some problem with how the PHP code has actually been added (in which case this post might help https://divibooster.com/adding-php-code-to-the-divi-theme/). Thanks!
well. it works. but if i need to create more than one Widget Area Below the Divi Header Navigation Links, how may i do?thanks
Hi giacometta, you should be able to do it by making a second copy of the code and replacing every instance of "myprefix" with something else, e.g. "myprefix2". You might also want to change "Header" in the fourth line to give your second widget area a different name (e.g. "Header 2"). Hope that helps!
It would be great to see a version of this for the slide in menu! I've been trying to play around with your code but unfortunately no luck 😅
Manage to fix that issue on the slide in if anyone else needs it (adjust CSS as per requirements)
// 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($){
$("#mobile_menu_slide.et_mobile_menu").after($("#myprefix-widget-area-wrap"));
$("#myprefix-widget-area-wrap").show();
});
</script>
<style>
#myprefix-widget-area-wrap {
display:block;
float:left;
max-width: 300px;
clear:right;
position:absolute;
padding-left: 10px;
padding-bottom: 35px;
bottom: 0;
margin-bottom; 50px;
margin-left: 5px;
}
#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');
Thanks so much to Dan for the original code!
Awesome, thanks for sharing that, Lana! WordPress seemed to have stripped out some of the HTML tags from your code, so I added them back in. Hopefully I did it correctly, but give me a shout if anything looks amiss. Cheers!
Hi Dan, thank you so much for this code! I'm trying to use this to add a logo below the navigation, and it shows up (hooray) but it's floated all the way to the right and I want it centered (boo). I tried modifying that CSS that's in the code you gave but so far haven't figured it out. Tried making the float none and doing align: 0 auto etc., but so far nothing. Any ideas? Thank you so much!!
Sorry meant margin: 0 auto not align ;)
Nevermind! I figured it out. float: none and display: inline-block did it — thanks!!!
I'm glad you figured it out, Meg, and thanks for sharing what worked :)
Awesome Meg!! Worked for me, thanks for sharing! And Dan. You da man. :)
I added the widget for an ad, but it's way off to the right and only halfway on the page. Can I center it somehow? Thanks!
Hi Gina, sorry to hear that. Is there any chance you can send me a link to the site you're working on? That way I can see how things are set up and give you the best advice. Thanks!
Hi Dan, I would like to add the widget area above the Divi Header Navigation Links instead of below. Kindly let me know what to do.
Regards,
Ephrem
Never mind. I figured out how to do it.
Regards, Ephrem
Hi there! Thanks for this snippet!
I was wondering if there's a way to place it below the menu, but not as part of the menu? I use an svg for my logo, and this widget makes the logo huuuge. It's not a bug:). It happens because the widget resizes the .logo_container area to fit the widget. Which makes the logo resize to the new size as well. Svg's in Divi logo don't respond well to width and height constraints….
any ideas?:) Thanks!!!!
Sorry, never mind! I found a different post that does a sticky widget and I got it to work that way. Thanks for your snippets anyways!
Okay, cool. I'm glad you found something that worked for you, a. Nonetheless, I'll look into updating my code in the future to address this type of scenario. Cheers!
Hi Dan, I just added the widget and a button (ET shortcode) in this widget. Please tell me what to do to make it disappear on tablets&mobile as the widget increases the height of the header on those devices and I want to avoid this increase. I guess it's a piece of CSS but I can't figure it out. Thanks.
Hi Mihai, I think this should do it (for both the code above and Divi Booster):
@media only screen and (max-width: 980px) { #wtfdivi003-widget-area-wrap, #myprefix-widget-area-wrap { display: none !important; } }