A "sticky" widget area lets you add widgets to your theme and have theme remain on display while the user scrolls down the page. Here's how to add a "sticky" sidebar widget area to the Divi Theme.
What is a "Sticky" Widget Area?
A sticky widget area gives you a place to put widgets that you want to stay in place on the screen as you scroll down. This is great for keeping social media icons on display, for example, though it has plenty of other uses to. For example, could include a bio, a newsletter signup, or details of a limited time offer.
How do I add a Sticky Widget Area to Divi?
First, we'll register a new widget area called "Sticky Sidebar", by adding the following to functions.php (ideally in a child theme):
// Create the new widget area
function myprefix_widget_area() {
register_sidebar(array(
'name' => 'Sticky Sidebar',
'id' => 'myprefix-widget-area',
'before_widget' => '<div id="%1$s" class="myprefix_widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'myprefix_widget_area');
// load jQuery
function myprefix_load_jquery() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'myprefix_load_jquery');
I've also asked WordPress to make sure jQuery is available, which will simplify things for us later.
Now we want to add the sidebar into the theme. In order to do it without editing the Divi Theme directly, we'll add it into the footer, and then move it into place at the start of the Divi main area. This can be done by adding the following into functions.php:
function myprefix_add_floating_sidebar() { ?>
<div id="myprefix-widget-area-wrap"><?php dynamic_sidebar('myprefix-widget-area'); ?></div>
<script>
jQuery("#et-main-area").prepend(jQuery("#myprefix-widget-area-wrap"));
</script>
<?php
}
add_action('wp_footer', 'myprefix_add_floating_sidebar');
With our sidebar in place we now need to style it to stay in place, staying on the screen at all times. Here's the CSS to achieve it:
@media only screen and ( min-width: 981px ) {
#myprefix-widget-area-wrap {
z-index:1000;
display:block !important;
float:left; position:fixed;
background-color:white;
margin-top:2px;
}
.myprefix_widget {
padding:16px;
}
}
@media only screen and ( max-width: 980px ) {
#myprefix-widget-area-wrap { display:none; }
}
A couple of things to note about this. First, I've used media queries to prevent the widget area from showing on smaller screens (less than 980px). Second, the widget area takes its size from the widgets it contains so if there are no widgets, the widget area will not display. Finally, #myprefix-widget-area-wrap is the id of the full area, while .myprefix_widget is a class which can be used to style individual widgets within the sticky widget area.
Notes on the Sticky Widget Area
Using the Sticky Widget Area with Divi Builder
There is no need to place the sticky widget area into a Divi sidebar module (and it won't work). Instead the sidebar adds itself to the site directly without interacting with the pagebuilder. That's why you can will see it shown on the homepage even though you didn't explicitly add it there.
Moving the Widget Area around
If you want to move the widget area down 20px and to the right by 10px, for example, you can use the following CSS:
#myprefix-widget-area-wrap {
margin-top: 20px !important;
margin-left: 10px !important;
}
Or if you are using Divi Booster to add the widget area:
#wtfdivi012-widget-area-wrap {
margin-top: 20px !important;
margin-left: 10px !important;
}
Hi!
I am new to all this, so forgive my probably stupid question :) With DIVI Booster, is there a way to have the widget appear in the middle (left) of the page instead of at the top, below the menu ?
Thanks
Mimi
Hi Dan,
I've added Sticky Widget with Booster and it works fine. My question is can I add two different Sticky Sidebars for two different pages on the same website?
Thanks
Hey Boris, there's not a way to do it in Divi Booster at the moment, I'm afraid.
One thing you could try is to add all the widgets for both pages to the same sidebar, and then on each page hide the ones you don't want with a bit of CSS.
Alternatively, you could follow the instructions to add a sticky widget given in this post, alongside having the Divi Booster feature running. Divi Booster's code differs slightly, so I think you should be able to use them at the same time. Then you could hide one or the other widget areas by using the appropriate of the CSS snippets below:
/* Hide the manually added widget area */ #myprefix-widget-area-wrap { display: none !important; } /* Hide the Divi Booster widget area */ #wtfdivi012-widget-area-wrap { display: none !important; }Hopefully that gives you some pointers, but feel free to ask questions if you are struggling to get something working. I'll try to address this better in Divi Booster in the future. Thanks!
Hey Dan, thank you for your prompt and detailed reply. I'll try to add the CSS you have suggested. Keep up the good work!
I'm using the divi booster version… don't suppose you have a quick chunk of code that will hide the widget until expanded??
Hey Kelly, just so I'm clear, are you able to explain what you mean by "hide the widget until expanded"? Do you mean you want the widget area to be completely hidden if they are no widgets in it, and then when you add a widget it shows up as normal… or have I misunderstood? Cheers!
Hi! If I were to purchase the Divi Booster, will I still need to code this in or would it essentially be like a plug and play?
Hi Courtney, it's plug and play :) You won't need the code above, all you'll need to do is enable the following option on the Divi Booster settings page:
Site-wide Settings > Layout > Add "sticky" widget area to left of screen
Then you're good to go. Just head over to the Appearance > Widgets page in your WordPress dashboard and add the widgets you require to the new "Sticky Sidebar" widget area added by Divi Booster.
I am trying to make the sticky widget appear below my full width header but even when I added the suggested settings to my css file in my child theme
#wtfdivi012-widget-area-wrap {
margin-top: 20px !important;
margin-left: 10px !important;
}
Nothing moves, I change the top to 100px and the left to 0
Any thoughts why its' not moving?
Hi Jay, are you adding the widget area using Divi Booster, or are you using the code in the post above? If it's the code in the post above, you'd need to use this instead:
#myprefix-widget-area-wrap { margin-top: 20px !important; margin-left: 10px !important; }Thanks for this.
Don't want to go wee-wees on your strawberries, but there's a really neat plugin that does the same job – it's called Sticky Menu (or anything else)
Very easy to use. No coding, No CSS
Oops, I apologise, it looks like my first comment didn't show… I wanted to know if the left sidebar can in fact be on the right, and if the sticky widget can float at the bottom right hand corner… Excuse my ignorance & totally understand if you're too busy for this :) (http:www.solarlinkcommercial.com.au)
Hi Lynn, your comment was awaiting approval, hence why it didn't show. I just replied to it, but here's the code again for moving the Divi Booster sticky widget area into the bottom right hand corner of the page:
#wtfdivi012-widget-area-wrap { position: fixed; right: 0; bottom: 0; }And another thing… how do I get this widget to show up on an iphone screen size?
Hi again, Lynn,
This custom CSS should keep (the Divi Booster version of) the widget area showing up on mobiles:
#wtfdivi012-widget-area-wrap { z-index:1000; display:block !important; background-color:white; margin-top:2px; } .wtfdivi012_widget { padding: 16px; }Brilliant… Love it when things just…work!
New user (just today!) of Divi Booster.
Please forgive my ignorance and this is by NO MEANS A COMPLAINT or a criticism. I am only a couple weeks into Wordpress having added it to years of Joomla expertise. I'm just curious about the information provided here for the sticky widget.
(sounds British doesn't it? "Sticky Widget". "That's a fine Sticky Widget you got us in now!")
Before I attempt this, I am a bit confused. In your explanation above there seems to be a quite a lot of hand coded modifications, custom scripting, custom CSS… I am wondering why then is there a check box in Divi Booster to add the Sticky Sidebar to Divi, when from my experience, this could be added with just a bit MORE custom coding and styling with out using Divi Booster? Or possibly some other type of plugin that simply adds one of those to the site.
Once again just curious. I haven't even attempted to use the sticky widget.
(site in comment info is still Joomla. Our new WP site is in progress. Not dumping Joomla just adding WP to our skills list).
Hahaha, okay, whack me on the head with a "sticky widget" I get how it works now. :) hahahahah. I feel silly.
Ha ha! I'm glad you figured it out, Vernon :)
Basically, whenever I come up with a Divi customization I write a post about it (as I've done here). These posts contain all the custom code, etc, that I needed to use to get the customization to work. Hopefully this info is useful who are either technical enough to repeat my customization themselves or extend it further. I then take the code from the post and put it all into my plugin so that anyone can enable it with the click of a button. So if you have Divi Booster, there is no need to pay any attention to the customizations in the post – you just activate the feature in Divi Booster and you're done. Hope that makes sense!
Oh, and all the best in your quest to learn WP!
Hi – I just bought divi booster based on the above "check box in divi booster to add the sticky sidebar to divi" quote but I can't find the option, am I being daft!?
Thanks,
Chris.
Hi Chris, you'll find the option on the Divi Booster settings page under "Site-wide Settings > Layout > Add "sticky" widget area to left of screen". Thanks!
sorry for submitting twice .. realized i put this as a reply to someone rather than a comment on the post!
hey dan.
I’m trying to get this to work on my Divi page.
The widget area is showing up fine and I can customize it in the Widget area.
However, it will not stick as i scroll down the page, and the custom CSS doesn’t seem to effect it (tried changing margin-top and background-color to test).
I am using a sticky nav bar in my header. Is it possible that this is stopping it from scrolling with the page?
Hi Matt, no problem – I'll remove that first comment.
I don't think the sticky nav bar should be stopping it. Most likely, either there is a CSS error somewhere (in the copied CSS or any CSS you have before it), or it is a caching problem and your site is just serving up an old version of the CSS. If it's a caching error, this post should help out:
https://divibooster.com/divi-booster-and-caching/
If that doesn't help, are you able to share a link to the page so I can check for any CSS errors, etc?
plugin – Stcky Menu (or anything else) does the trick, no fuss
If it helps, here is my original functions.php
__( 'Sidebar', 'divi_child2' ),
'id' => 'sidebar-1',
'before_widget' => ",
'after_widget' => ",
'before_title' => ",
'after_title' => ",
) );
}
// Uncomment the to add a new widgetized area
// add_action( 'widgets_init', 'divi_child2_widgets_init' );
/**
* Register our scripts (js/css)
*
* @since 1.0
*/
function divi_child2_enqueue_scripts(){
// Uncomment the line below and add a
// scripts.js file to your child theme
// to add custom javascript to your child theme
// wp_enqueue_script( 'divi_child2-scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '20140101', true );
}
// Uncomment this to add a additional scripts
//add_action( 'wp_enqueue_scripts', 'divi_child2_enqueue_scripts' );
And here's what it looks like after
__( 'Sidebar', 'divi_child2' ),
'id' => 'sidebar-1',
'before_widget' => ",
'after_widget' => ",
'before_title' => ",
'after_title' => ",
) );
}
// Uncomment the to add a new widgetized area
// add_action( 'widgets_init', 'divi_child2_widgets_init' );
/**
* Register our scripts (js/css)
*
* @since 1.0
*/
function divi_child2_enqueue_scripts(){
// Uncomment the line below and add a
// scripts.js file to your child theme
// to add custom javascript to your child theme
// wp_enqueue_script( 'divi_child2-scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '20140101', true );
}
// Uncomment this to add a additional scripts
//add_action( 'wp_enqueue_scripts', 'divi_child2_enqueue_scripts' );
// Create the new widget area
function myprefix_widget_area() {
register_sidebar(array(
'name' => 'Sticky Sidebar',
'id' => 'myprefix-widget-area',
'before_widget' => ",
'after_widget' => ",
'before_title' => ",
'after_title' => ",
));
}
add_action('widgets_init', 'myprefix_widget_area');
// load jQuery
function myprefix_load_jquery() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'myprefix_load_jquery');
function myprefix_add_floating_sidebar() { ?>
jQuery("#et-main-area").prepend(jQuery("#myprefix-widget-area-wrap"));
jQuery("#myprefix-widget-area-wrap");
<?php
}
add_action('wp_footer', 'myprefix_add_floating_sidebar');
Is that what it should look like after? Sorry, I'm not that good with coding yet
It looks like the various HTML tags got stripped out when you posted the comment. Apart from that, everything looks okay. As I mentioned in my other reply, if you are able to share a link, I'll hopefully be able to spot the problem. Cheers!
http://www.amchamuganda.co.ug. I assume all the pages should have it?
Hey Brian, I've figured it out… My PHP tags were getting eaten by WordPress ;)
I've updated the second block of code above to correctly display the PHP code for actually including the sidebar content in the page. (I also tidied up the jQuery a bit as one of the calls was actually unnecessary). If you update your functions.php file with the new code, everything should hopefully work.
Note that the widget area displays in the same part of the page where you have the Monarch social buttons, so you may want to disable (or move) one or the other to avoid an overlap.
It worked; Thanks! :)
Hey, thanks for the post. I've added the first two scripts into the functions.php file of the child theme, and the third script into the stylesheet.css
I found the sticky sidebar widget area in widgets and added a widget to it, but nothing displays when I view the site. I dont know whether I should have put both of the first scripts into the functions.php file (one after the other) like I did? What were you saying about adding to the footer and then moving…?That part is a little confusing.
"…ow we want to add the sidebar into the theme. In order to do it without editing the Divi Theme directly, we’ll add it into the footer, and then move it into place at the start of the Divi main area. This can be done by adding the following into functions.php:"
Hey Brian, it looks like you're doing everything correctly, so I'm not sure quite why it's not working. Are you able to share a link to the page you're working on so I can take a look for you?
Hi. I used the above code and I have the "sticky sidebar" in the widget area in my theme (Enigma), but when I added a text widget to it (with some general words) nothing is showing. Am I missing something? Thanks for your help.
Oh and I put the 3rd code in my Custom CSS, not the style.css in the theme.
Hi Chris,
The code above is designed for the Divi Theme by Elegant Themes, and is unlikely to work on other themes. I'm afraid I don't know Enigma at all, so can't offer much in the way of advice on how to get it working for that theme. It will add the "stick sidebar" widget area as you've seen, but the problem comes when the code tries to attach itself at the correct place in the page. Specifically, this line of code:
jQuery("#et-main-area").prepend(jQuery("#myprefix-widget-area-wrap"));Inserts the widget area before the "#et-main-area" element (an element in Divi that contains the main content). If you are able to identify a similar element in Enigma, changing this line might get it working. But taking a quick look at your site, Enigma doesn't seem to have anything equivalent…