Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create a Sticky Floating Sidebar Widget in WordPress

Do you want to create a floating sidebar widget that sticks as you scroll down?

Floating elements that stick to your screen as you scroll are attention-grabbing and tend to have a higher click-through rate and conversion rate than static objects. This is why many websites make use of floating elements throughout their website.

In this article, we will show you how to create a sticky floating sidebar widget in WordPress.

How to Create a sticky floating sidebar widget in WordPress

Why Create a Sticky Floating Sidebar Widget?

A sticky floating sidebar widget stays on your user’s screen as they scroll down the page, giving your site visitors more opportunities to notice it and click. You can use it for building an email list, featuring product promotions, sharing popular posts, displaying recent Tweets or Instagram posts, and anything else that you like.

This helps you make your sidebar stand out even more and keep important information in front of your visitors.

For example, you can keep your newsletter signup form visible to users so they have more opportunities to sign up. Or you can show off your most important pages and keep visitors on your site.

If you have an eCommerce store, then you can use the sticky sidebar to display your top products or a promotional offers to increase sales.

That said, let’s look at how you can create a sticky floating sidebar on your WordPress site.

Adding a Sticky Floating Widget in WordPress

You can easily create floating widgets that stick while scrolling using the Q2W3 Fixed Widget for WordPress.

It’s a free WordPress plugin that’s very easy to use. The plugin helps you stick any widget on your website, so when a user scrolls the page up and down, the widget stays with them.

In this article, we’ll show you how to use both the versions block based widgets and the classic WordPress widgets.

Sticky Floating Sidebar in WordPress Block Based Widgets

If you’re using WordPress 5.8, then you’ll have block based widgets. The widget screen will use the block editor to edit or add new widgets on your website.

To make a sidebar widget sticky, you’ll need Q2W3 Fixed Widget for WordPress version 6.0 beta 3. Simply scroll down to the Changelog section and then click the ‘version 6.0.0, beta 3’ link to download the plugin. We tested the plugin on our demo website and it is working smoothly.

Download the beta version

Next, you’ll need to install and activate the Q2W3 Fixed Widget for WordPress version 6.0 beta 3 on your website. For more information, please refer to our guide on how to install a WordPress plugin.

Upon activation, you can head over to Appearance » Fixed Widget Options from your WordPress admin area.

Next, you’ll need to click on the ‘Test new version’ box to enable the option and then scroll down to click the ‘Save Changes’ button.

Enable test new version

After that, you can go to Appearance » Widgets from your WordPress admin panel and then click the ‘+’ plus button to add a widget block that you want to make sticky.

For our tutorial, we added a Custom Twitter Feeds by Smash Balloon in the sidebar widget area to display recent tweets from our Twitter channel. Smash Balloon is the best social media WordPress plugin and allows you to easily display social media content in WordPress.

You can check out our guide on how to display recent tweets in WordPress for more details.

Add a new widget

Next, you can select your widget and then change the ‘Fixed Widget’ settings in the menu on your right.

Simply select ‘Fix widget’ option to make the floating sidebar stick to the screen.

Set fixed widget settings

Next, you can visit your live site and scroll down on any page or blog post. Your fixed widget will now become a sticky floating widget.

Preview of sticky Twitter feed

Sticky Floating Sidebar in Classic WordPress Widgets

If you’re using a version prior to WordPress 5.8 or the Classic Widgets plugin, then this is the method you’ll need to use.

The first thing you need to do is install and activate the Q2W3 Fixed Widget for the WordPress plugin. If you need help, then please see our guide on how to install a WordPress plugin.

After activating the plugin, you can head over to Appearance » Fixed Widget Options from your WordPress dashboard and configure the plugin.

On this page, you can set the margins, add your HTML IDs, change refresh intervals, and even disable the fixed widgets on smaller screens like phones and tablets.

There are also options for enabling the plugin for logged-in users and other compatibility settings.

Fixed widget plugin settings

After making the changes, simply scroll down and click the ‘Save Changes’ button.

Next, you can navigate to Appearance » Widgets and then choose the widget that you want to make sticky.

The plugin adds a ‘Fixed Widget’ option in all of your widgets. All you have to do is check the Fixed widget box and click on the ‘Save’ button to store your changes.

Make Twitter feed sticky

That’s it!

We hope that this article helped you learn how to create a sticky floating sidebar widget in your WordPress website. You can also check out our guide on how to start a podcast and best payroll software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

61 CommentsLeave a Reply

  1. Well after working for hours last night and hours today I came across this plugin thinking that I have finally got the answer to sticky sidebar widgets. But no – when I installed the plugin it did absoutely nothing! I have the latest version of WP and a good working template that has no other problems working with all the other plugins so I have no idea why this will not work.

    Does anybody know how to get this plugin to work. I have just about given up on having fixed widgets. I have not won any lotteries lately to afford a developer to do it for me.

  2. ALL YOU GUYS DO IS USE PLUGINS FOR EVERY SOLUTION YOU PROPOSE! Please Change the titles of posts like this to: “How to Add a Sticky Floating Sidebar Widget in WordPress with Plugins”, as you are not actually “creating” anything. you’re just using a service someone else built.

    • Our users are mostly beginners with little to no coding skills at all. Using a plugin is the safest way for them to add functionality in WordPress. From time to time we do publish articles with plugins as well as manual methods to achieve some functionality. But if we feel that manual method is too complicated for our target audience, then we show the plugin method alone. You may also want to take a look at our guide on how many plugins should you install on your WordPress site.

      Admin

    • I don’t care if they use plugins for achieving the promised result.

      What I don’t like is finding that the plugins are outdated or the creator stopped updating it.

      So, what I would say is: please update your content and offer new options, or put a note explaining that it is an old plugin and may not work.

      • I think I smell a troll….if you don’t like their content, their are literally thousands of other sites around the web to do your “research”. ;)

        • It stucks the smooth scrolling of the website.. So I would say – it’s a NO use plugin. You can feel the difference when once you uninstall them

    • Yeah because people who “create” do it without using anything else, just out of thin air! Everyone else deserves no respect.

  3. Fantastically helpful – as always, tutorials extremely clear and easy to follow and incredibly useful. Very many thanks.

  4. Thanks for articled and the Good guides as usual , just wonderting if there is any alternatives as this plugin was not updated 2 years now and causinfg some conflict

    • Same problem here. It would be great with an update to this article. I am looking around for a similar plugin but there are only a few other options and the alternatives only focus fixed sidebars and not widgets.

      I really enjoyed the Q2W3 fixed widget but unfortunately it is no longer maintained.

  5. Hey guys,

    I also need this plug-in for one of my blogs, but I can’t get it to work with the Genesis theme. I just updated to the latest version that they released a couple of days ago. So I did play with the settings of the plug-in, changed the margins to different values, marked and unmarked the 4 tick-offs but it won’t work. Yes I did tick-off “fix” widget on the particular widget I want to stick. What happens is at the very bottom of my page it says:

    jQuery(document).ready(function(){ var q2w3_sidebar_1_options = { “sidebar” : “sidebar-alt”, “margin_top” : 110, “margin_bottom” : 120, “screen_max_width” : 0, “width_inherit” : true, “widgets” : [‘execphp-4’] }; q2w3_sidebar(q2w3_sidebar_1_options); setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 940); });

    Any help would be of great help – you can email me if you want me to show you my blog, as I don’t want to paste it here so it looks as if I am looking for a backlink :)

    Thanks in advance for any advice you might share

  6. Does anyone know any alternatives to this plugin? It causes all kinds of issues with the Divi and Extra themes by Elegant Themes. Bugs were reported to the dev months ago but they seem to have gone un-fixed. Time to find an alternative… suggestions?

  7. Conflicted with the Total WordPress theme when using the built-in sticky header in Total. When Fixed Widget was active on a page, it caused the sticky header NOT to work so my header scrolled off the page. I reported the bug to author.

  8. Can you make it scroll then at the bottom have it become part of the footer? For example on this page. When you get down to the widget section have it stop and be at the top of the widgets?

    Similar to how this site did there quote section. When you get to the bottom it becomes part of the footer.

  9. Hey there,

    Unfortunately I can not get it to work.
    How do I do exactly what you did on your page?
    So I would like to have a banner on the bottom end of the Page with a Text in it.

    Also I would like it not to show up on the phone. What is the pixel-number for that?

    Thank you!

  10. Thank you so much for the tutorial. I had been seeing this around the web and wondered how to accomplish the same effect. The margin bottom option worked GREAT because it was also getting into the footer! You guys are awesome!

  11. I was in search of this Thanks wpbeginner for your help. But I have one confusion. Let’s say I want to fix the top widget. But when I did it and scrolled down, it just hided the other one which was not in the position as I wanted. Can you help me for this? Like let’s suppose when I completely scroll down the page, after all widgets, then it should start being fixed. Is that possible?

    Thanks.

  12. Great, thanks. I just got my WordPress site off their domain and on to my own – so now I can even use all these great plugins. I’ll surely try this out sooner or later.

  13. I tried to combine this with the ad inserter plug in and it did not work. It does not allow for the option to make ad widget sticky. Any suggestions on a fix or work around?

  14. Hi, love the plugin, but it breaks my slideshows in my woothemes. They won’t load anymore. Is there a solution for this maybe?

  15. I have tried this plugin on my website. But its not working :( is there any alternative to this plugin?

  16. Thanks for sharing the info. about this plugin. Really made it a smooth sailing on my blog.

  17. Hi I have had this plugin for a while and it works great but whenever there is a page that is shorter than my sidebar, when you try to scroll down the sticky widget which I have gets all fidgety and doesn’t let you scroll down to the bottom. Does anyone know how to fix this?

  18. Is it OK to make Adsense ads sticky? I mean if I place Adsense ad code in a widget and make it sticky will it violate the TOS?

    • No that is not allowed by Adsense. The wording is tricky. They will allow it if the sidebar remains static and the content is the one that is scrolling. So if you have two scroll bars like The Next Web design has, then you can do it.

      Admin

      • Hi, could you could point out where, in terms of AdSense is explicitly stated that this is illegal? I haven’t found a word about it. 9gag and many others still using this kind of floating block.

        • Like we said earlier the wording is tricky, and in some situations you may be able to pull it off. But for smaller publishers it is always better to be safe than sorry.

      • I don’t understand, you said: “They will allow it if the sidebar remains static and the content is the one that is scrolling”

        Isn’t that exactly what we are trying to do here? Display AdSense in a static sidebar widget, and have our page content scrolling. Therefore you just clarified this IS allowed.

        The whole double-sidebar thing you mentioned is just weird, and terrible web design.

  19. Does anybody know how to get this working for the genesis framework??
    I’ve been trying with no luck.

  20. I tried this plugin on my MailChimp widget, and it doesn’t appear to do anything. It also automatically unchecks itself whenever I close the setup page.

  21. Everything works beautifully until the footer of the page comes! How can I get it to stop being a fixed object when it hits the footer? There is always this terrible, sloppy, and messy, overlapping. Thank you for your time!

  22. I am already implemented in my site and using it for improving the subscribers to my channel.

  23. YO

    Thanks for sharing this man I’ve been looking for an easy way to implement this effect.

    I’ll have to test it right away if it works it’s going live on my blog this week thanks bro.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.