How to Easily Create a Sticky Sidebar in WordPress

>How to Easily Create a Sticky Sidebar in WordPress
  • pin sticky clouds floating

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.

To make a sidebar float in WordPress as the users scroll through your post, you’ll have to install a plugin called WP Sticky Sidebar.

After you install it, you can access its settings in Settings -> WP Sticky Sidebar.

wp sticky sidebar plugin settings

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 #main, #main-content or #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.

Step 1

Right-click somewhere at the top of your post (not above it) and click on Inspect or Inspect Element (depends on the browser).

firefox inspect element

Step 2

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:

post id source code

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.

sidebar id wordpress

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.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

My WordPress website or blog installation service is at your disposal!

On-going WordPress support and maintenance service is on the menu as well!

WP Rocket - WordPress Caching Plugin
By |2018-10-14T16:39:55+00:00October 7th, 2018|Plugins|0 Comments

Leave A Comment

SUBSCRIBE BEFORE YOU GO?

- Get guides and offers right into your inbox -

The type of emails that you would like to receive (multiple selection allowed):

You can unsubscribe at any time by clicking the link in the footer of the emails. For more information, please check the privacy policy.

I use MailChimp as my emailing service. By subscribing, you understand that your email and preferences will be transferred to MailChimp. Learn more about MailChimp's privacy practices here.

close-link