Nowadays, it’s being debated whether or not sidebars have become useless, especially because most users have developed sidebar blindness.
The only way to find out what’s the best option for you is to do some A/B testing for a while and compare the results.
There’s one thing that could improve the effectiveness of your WordPress sidebar, though, and that’s to make it sticky.
By making it sticky means it will float on the side of your content while the users scroll up and down, without disappearing.
Thus, increasing the chances of users noticing whatever widgets you’ve added there.
So, in this tutorial, I’ll show you how to create a sticky sidebar in WordPress!
If you only want to make a specific widget sticky, then check out this tutorial.
Create a sticky sidebar in WordPress
You can either watch the video or read the post. If the sidebar won’t be sticky, then read the solution at the bottom.
After you install it, you can access its settings in Settings -> WP Sticky Sidebar.
As you can see, it doesn’t have a lot of settings, and it should normally work fine for most of you right after you’ve installed it.
The plugin’s options depend on your personal preferences.
You can disable the sticky sidebar on pages, categories, tags, etc.
You can also set the top and bottom margin and disable it on smaller screens.
Here’s how the sticky sidebar works on the default Twenty Seventeen WordPress theme:
Check your theme’s settings first to see if it has a feature that will allow you to make your WordPress sidebar sticky.
There’s no use adding a plugin if your WordPress theme already offers such a feature.
If the WordPress sticky sidebar won’t work
In most cases, you won’t have to change anything because most WordPress themes will usually use
#secondary as the sidebar CSS id, and
#primary as the content CSS id, which the plugin can guess by itself.
But, if your WordPress theme is using different, uncommon CSS classes or ids that the WP Sticky Sidebar plugin can’t guess, then you’ll need to find them and add them in Sticky Class and Container Class.
To do that, you’ll have to inspect your post’s and sidebar’s source code.
Right-click somewhere at the top of your post (not above it) and click on Inspect or Inspect Element (depends on the browser).
A box will appear at the bottom.
Scroll inside of it nice and easy (most likely up), while hovering your mouse cursor over each line of code.
You’ll notice that every line of code will add a blue-ish highlight on your post, depending on what section the code represents.
Scroll in there until your whole post is highlighted and until you’ll find something like this:
Since I’m using the default Twenty Seventeen theme as an example, everything is as it should be.
The post’s content id is
#primary, therefore the WP Sticky Sidebar plugin automatically recognized it, so I don’t need to add it in the settings.
Repeat the process for the WordPress sidebar. It should be easier to figure out because a well-coded theme will use the
<aside> tag for it.
Now, your code can look very different than the one in the screenshots, so it can be hard for your to figure things out.
In that case, I recommend asking for some WordPress help.
That’s a wrap
I hope you found the post useful and comprehensive, and you managed to make your sidebar sticky in your WordPress blog!
Don’t forget to share the post to help out others!
You can quickly subscribe to my newsletter by using this link or the subscription form.
If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.
My WordPress website or blog installation service is at your disposal!
On-going WordPress support and maintenance service is on the menu as well!