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 this a feature inside of Divi Booster? Im not seeing it there. Thanks
Hi Eric, yes it's in there. You'll find it under "Header > Main Header > Add new widget area below the navigation links". Enable that option and save. Then go to "Appearance > Widgets" in your WordPress admin and you should see the new widget area / be able to add widgets to it.
Hello,
I have added the above into the functions.php file and it has created the widget area in the header. I then placed the Qtranslate X widget into the header widget area, and it functions correctly – so thank you!!
I am having a slight issue with the size of the flags that are being displayed, I know this isn't your issue but I have tried to increase the size of the flags in the Qtranslate widget CSS but it is not doing anything. I was wondering if it was to do with a restriction from the code that inserts the widget area into the header.
Thanks
Hi Tom, I'm not quite sure why the Qtranslate widget isn't letting you increase the flag size, and there's nothing in the widget area code that would prevent it.
However, as a quick fix, I think you should be able to adjust the size by adding the following CSS into Divi's custom CSS box (under Divi > Theme Options > General Settings > Custom CSS):
.qtranxs_image img { height: 20px }
Dan, I have the paid Divibooster and have enabled the header widget area. It does create the widget area but no matter what widget I try adding they all display but none of the features are selectable. I added a breadcrumb plugin and a text sizer plugin and you can't click to make them function.
Hi Rob, it looks like a slight update was needed to get this working with the most recent Divi changes. I've released an update to Divi Booster (v2.1.6) which should fix this. I've also updated the post above. If for some reason you can't update Divi Booster, you should be able to fix the issue by adding the following CSS to your site:
#wtfdivi003-widget-area-wrap { position: relative; }Thanks! This worked perfectly with my child theme.
Sincerely,
John
JSH Web Designs
http://jshwebdesigns.com | 865-407-0006
John, what a beautiful website you have, I entered thinking I was going to find and example how the widget looked, but instead I found your website, nice!
Hello I have a membership site and on my main page I only what my main menu. But when a user logs into the members area (I use Membermouse) I would like to have a widget for the main header or just under the main header. I use a plugin to allow me to have different menus for my regular home page and a different menu for my members area. Membermouse has widgets that I would like to have on my top header or just under it and was not sure if the code above would make the widgets available to the complete site or would I have the flexibility if I purchased DIVI booster to have the widget area just on the pages I want? If not is their an option for me to do this?
Thank you
Hey Mark, at the moment Divi Booster will show the widget area on every page that shows the Divi header. While I want to make it possible to control this on a page-by-page basis, you can easily achieve the effect right now by combining Divi Booster and the free "custom sidebars" plugin. That plugin will let you selectively replace the Divi Booster widget area with other widget areas (including empty widget areas for pages where you don't want to see anything).
I would like to add a widget to the right of the logo on my website so I can put text in there. How do I adjust the code to do so? Is this an option in divi booster?
Hey Jason, it's not currently an option in Divi Booster, but it seems like it'd be useful so I'll look into it for a future version of the plugin and let you know if / when it is implemented.
With a clean install, and the code added to the bottom of functions.php, I'm still having an impossible time getting this to work. Any advice or assistance would be *greatly* appreciated!
Best Regards,
Mr. Mizner, Michael N. | Accounts Executive
Knoxville Internet | http://www.knoxweb.com
1630 Downtown West Blvd. Suite #116 | Knoxville, TN 37919
p: +1.865.588.2465 | m +1.347.443.8253 | : f: +1.865.558.8876
mizner@knoxweb.com | Skype: michaelmizner
Hi Michael. Sorry, WordPress visual editor munged up some of the code. I've fixed it now so it should hopefully work for you.
Hi!
When I add all of the code to the functions.php file, none of the widgets I add are showing up on the website. Did I miss something in where I should place the text?
I am using a child theme as well.
Thank you!
Hey Vanessa, sorry about that – the code got messed up and was displaying incorrectly on the post. You didn't miss anything. It should be working now if you want to give it another shot.
Thanks! That works perfectly now!
Fantastic! Thanks for letting me know, Vanessa!
Hi Dan,
I have followed all the steps, but still not showing up de widget… any clue?
Thanks in advance!!
Hey Fede, there was some code missing (WordPress was messing up the tags and not displaying it). I've fixed and updated the code so it should work now.
it doesn't seem to work for me.
should i set something in the divi theme options panel?
I created the widget area as per your instructions, and put in there a small text widget.
I tried with links enabled or disabled in the divi panel, but the text doesn't appear.
One difference when the links are disabled, is that the header doubles its height (maybe due t othe logo size on the left side).
So assuming we find a way to make it work, my second question is: how we control the header widget size? shouldn't we set a css class?
thanks
Hey Michael, I'm sorry it wasn't working. WordPress had stripped out some of the PHP code without me noticing. I've fixed that so hopefully it'll work for you now.
I've also improved the code so that it should fit nicely and automatically expand to the height of your widgets. If you need more control over the height of the widgets, the widget area can be targeted using its CSS ID: "myprefix-widget-area-wrap".
Hey dan!
Thanks for your post!
What if we want to keep the divi header links? How can we add the widget area?
Thank you so much in advance!!!
Hey Gabriel, I've updated the code so that the widget area is added below the navigation links, rather than replacing it. For anyone who does want to get rid of the header links, I've added a separate post with instructions.
I do not understand where to place this code. Is it all being placed in the functions.php file? Thanks for the help in advance.
Hi Don, yes it should be placed in the functions.php file. Ideally you should create a child theme and place it in the child theme's functions.php file, rather than the main divi functions.php file. This will ensure that your changes aren't overwritten if you install an upgrade for Divi.