If you want to know how to make a sticky sidebar widget in WordPress without plugin, this guide will show you exactly that.
You may consider the sidebar widgets are not important, but I will prove it’s the complete opposite.
Every website has a different design and you may not even use a sidebar, that’s totally fine.
However many people use sidebar widgets to display recent posts, short author introduction, links or buttons to social media, WordPress quiz, ads, opt-in forms and other. In other words additional information to take the next step in most cases.
Yes, that’s true: more people are surfing the web using mobile devices, yet I see 40-50% coming from desktop devices on my analytics. That being said, audience coming from those devices will definitely see whatever you add to the sidebar.
Sidebar widgets are more important for desktop visitors than mobile. Why?- Because desktop users will see the sidebar straight away once the page loads. While mobile users will see them if only they scroll all the way to the end of every blog post/page visitor reads.
But what if you create a long form content?- Most likely people will read the content, scroll down completely skipping your sidebar widgets. In this case we can make one last widget sticky for visitors to see it all the time while reading it.
How to make a sticky sidebar widget in WordPress without plugin
As you know I try to use as few plugins as possible and we’re lucky this can be done just using a little bit of CSS code.
Copy the code below and paste it to your style.css file if you’re using WordPress child theme.
Or you can add the code by going to Appearance=> Customize=> Additional CSS (don’t forget to click on publish).
/* Make last sidebar widget sticky*/
@media (min-width: 769px) {
.site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar aside:last-child {
position: -webkit-sticky;
position: sticky;
top: 50px;
}
}The code will trigger only people using desktop/laptop devices and specifically targets right sidebar. you can modify the code if you know a little bit of CSS.
Wrapping up
Congrats on one more modification to your blog, now you know how to make a sticky sidebar widget in WordPress without plugin. By adding a sticky widget you have added a more visible call to action on whatever you want visitors to click.
