Make a Fixed or Sticky Sidebar in WordPress

Aug 22, 2018 | WordPress Wednesday

Kori Ashton shows you a solution to add a fixed or sticky sidebar on your WordPress website. It’s a free plugin that you can configure to help your sidebar stay on the screen as your visitors scroll the page.

Brought to you by Pressable.

Full Transcript

Hey y’all, I’m Kori Ashton and it’s another WordPress Wednesday. Today I’m going to be showing you how to add a fixed sidebar into your website. So let’s say that you have your website and it’s a lot like mine where your pages and your posts can have a whole lot of content running over here then all of a sudden, your sidebar obviously isn’t as long as the rest of the content, right? So you wonder, well, is that missed opportunity, is that dead space, it just kinda looks weird. But not every post, not every page, is gonna be that same amount of content. I’m gonna show you a fix for it right now.

Hey y’all, so thanks for tuning in. This is sponsored by Pressable. If you’re looking for a hosting company for your WordPress website that will actually answer your WordPress questions, this is the team for you. Get away from all those other companies that whenever you call them up and you say, hey I need help, they go, well, that’s a WordPress issue, we don’t know how to help you there. This company will never do that because they offer amazing WordPress hosting as well as support.

All right, let’s look at the solution I have for you guys because I have looked at two different options to create a sticky or fixed sidebar. One of ’em is this solution here called WP Sticky Sidebar and as of today, of course, it is up to date with the current version, 4.9.8 of WordPress, so if you’re looking at this video later on down the road be sure that it’s tested with your current version of WordPress. And then, of course, you want it to be sure it has quite a few active installs and it has good reviews, right, good ratings. But I tried this one and to be very honest with you, I wasn’t that impressed. It was actually a little cumbersome, a little difficult to install. So this is just average for me.

Q2W3 Fixed Widget

Q2W3 Fixed Widget

The solution that I found is this one, Q2W3 Fixed Widget. It’s kind of a funky name but it’s a perfect solution to fix the issue on your website. Notice how many more active installs it has, and of course, it’s tested with great ratings. I’m gonna give it a review as well. Let me show you how to install it in your dashboard.

Installation of Fixed Widget Plugin

So you’ll head into your WordPress dashboard and you’ll go over here to plugins, and just click Add New, of course. Once you get to this screen, you’re gonna do a quick search for the Q2W3, here it is right here. And of course, again, you always wanna be sure, best practices, it has great reviews, a lot of active installs, and it’s up to date and compatible with your version.

Click Install Now. It just takes literally a couple of seconds. And then, of course, you wanna click Activate. Once that’s activated, now, you actually have a new area inside of your dashboard over underneath appearance.

Designating Fixed Widget

So you’re gonna go over in appearance, fixed widget options. So that’s the space here. Now this might seem a little bit of tricky for ya, but don’t worry about it, it all actually already works.

q2w3-fixed-widget-checkmark

Even without having to come in here and make some changes, it’s already been effective into your website. So here’s what you’ll wanna do. You’ll wanna go in your widgets area and whatever widget you want to actually be sticky, or fixed, you’ll open it up and you’ll click the little box that says fixed widget. This is now a brand new area that exists because you’ve installed this plugin. So then you check that box and click Save. And you do that to every single one of the areas that you want to be sticky, or to stay on that page.

Then you come back over to the front side of your website, click refresh, and then as you scroll, you’re gonna see it stay put. Do you see it live there on that right side now? Beautifully positioned. And as I scroll down, there it is. I want you to see something, though. This is a little error that’s happening on my website. It’s actually going underneath my footer area right here and it doesn’t know that I’ve got content that lives here.

Fixing Issue with Footer Overlap

And you can see it kinda playing peek-a-boo with my last widget all the way down here at the very bottom. So how do you solve that issue? It’s actually really smart. The plugin developer gave you an area to fix that. You’re gonna come back over here into your fixed widget options.

And you’re looking for this stop ID area. So this just says, Here you need to provide the HTML tag ID or the position, basically the HTML element, that will determine the margin-bottom value, or the stopping point, of where you need the fixed area to just stop. So for a lot of you, on your theme, it’s gonna be your footer area. So you would just look in here underneath your inspect element and figure out what your author coded this footer area. Right? That’s all you would do.

But I’m using the Divi theme, so I can actually do this all myself. So check this out. I’m gonna go ahead, just for now, and say stop. That’s the word I’m gonna use here for my stop ID. You can put any word here if you’re creating your own HTML ID. But if your author has a different one you’ll have to find that using your inspect element. For me, though, I’m gonna put that in there and click save changes. And then on the front side of my website, I’m using a global setting inside of Divi. And again, this is only relevant if you’re using Divi.

But this down here, this one area, is a global element. So inside of my Divi tools, I’m gonna go to my Divi library. And my global settings is my Ask form here. And see the global here? That little icon means it’s a global module or section. Inside of this, you can actually set a custom ID, if you wanted to.

You go into the advanced area. And the CSS ID, I’m just gonna put that exact spelling, same cap and everything, stop, right here. And click save and exit. So, and then, of course, you would click update, save and exit.

And now, when you go back to your website, it already put that in there for us. Let’s go to one of these individual ones. I’m gonna go to one of my individual blog articles here. And you’ll see now that it no longer overlaps, it knows where to stop. Stays fixed with me, and then there’s all of my beautiful widgets perfectly lined up. And it stops at my stop div.

Pretty fun, huh, you guys? It’s a great solution and it’s certainly one of the better ones in the budget of free that I have found out there. If you have questions about it, though, I’m hoping that you’ll come over here to their actual landing page for the plugin, come over in the support area and you can find all sorts of questions here, you can submit your own questions and get support from the developers directly, because they’re the geniuses behind how all of it works.

I hope that helped you, I hope you have a great WordPress Wednesday. Be sure to subscribe because every week I’m creating a video just like this to help you improve your online marketing. I’ll see you next time. Bye y’all.