Sticky sidebars are those sidebars that stay on top of the page when you scroll down.
You can see them on several really big blogs, like Smart Passive Income, Chris Ducker’s website, or Videofruit.
Needless to say that those are some of the most experienced online marketers, so there must be a reason the big shots use sticky sidebars more and more these days.
If you're using WordPress to build and run an online business, you're all about maximizing your conversion rates and providing the best value possible to your audience, right?
If you just nodded, you're just like me.
That's why I adapted the sticky sidebars from entrepreneurs who are more experienced than me.
And that's why I've created this tutorial to show you how you can add sticky sidebars to your Genesis website as well.
When we think about it, sticky sidebars just make sense:
The blog posts get longer and longer, and the sidebar normally isn’t visible when your readers are scrolling through the content.
So why not show your visitors an optin form in a sticky sidebar and keeping it on top of the page while they’re reading the post?
At some point in the content, they might want to stay updated with your content or they want to get a compelling lead magnet that you're offering for new subscribers.
Then your sidebar is there, giving them the option to subscribe to your list.
Since I redesigned my website, I’m using Genesis as a framework.
So this tutorial is tailored specifically to Genesis and its child themes.
This tutorial relies on a few pre-requisitis:
Please note that it may work on other themes as well, but since each theme handles sidebars slightly differently, it most likely won’t.
However, if you’re using Genesis, enjoy!
The great thing about this tutorial is, that you’ll feel a bit like a developer when you finished it. Developers will be bored by this tutorial, but for everyone else it’ll be interesting! I’ll guide you through adding small code pieces to your site, so there’s no need to worry.
To get a sticky sidebar, we’ll need to include a new JavaScript library into your WordPress. That means when your website loads, it’ll load another file containing JavaScript code.
You can add that JavaScript library in two separate ways.
Unfortunately, the most common way to add new codes is to edit the “functions.php” file in your theme. Maybe you heard about this way already. The problem with this method is that you'll lose your changes when you update the theme.
However, this method is only applicable if:
If neither of these two points adheres to your site, I recommend installing a neat plugin that I created: Extend Your Site. You can just download it and install it by uploading the .zip file (See the video for a detailed walkthrough).
That plugin allows you to add the new codes to your WordPress site and still being able to update your theme and plugins.
Done? Great, let’s move on.
I want you to add the following code to either the functions.php file of your (child) theme or the plugin you just installed:
// Enqueue sticky sidebar scripts
function jk_sticky_sidebar_scripts() {
wp_enqueue_script(‘jk_sticky’, ‘//rawgit.com/leafo/sticky-kit/v1.1.1/jquery.sticky-kit.min.js', array(‘jquery’), ‘’, true);
}
add_action( ‘wp_head’, ‘jk_sticky_sidebar_scripts’ );
That code loads a JavaScript file that originally was created by Leafo when your website loads.
Loading that script is the main preparation to create a sticky sidebar, this tutorial won't work without this code.
Now that your website automatically loads the JavaScript library that enables sticky sidebars, you need to tell your website to make your sidebar sticky.
You can do so by adding JavaScript code to the header of your WordPress. Doesn’t that sound like you’re a developer?
Please go ahead and add this plugin to your WordPress: Insert Headers and Footers
I know that the plugin wasn’t updated since 2014, yet it’s created by WP Beginner. Syed and his team usually are very thorough in everything they do.
Again, a way to do this without a plugin is to add custom code directly to your theme. But then you’d have the same issues as I outlined above.
If you want to add that code directly to your theme, you have two options.
Either your theme gives you the option to add JavaScript code directly via the theme settings.
Or you need to create a custom.js file, upload that to your theme folder, and enqueue it in WordPress (if you want me to cover that process, leave a comment below!).
As the direct integration into your theme is a bit more technical, I’ll continue with using the “Insert Headers and Footers” plugin.
Please go ahead and add this code snippet to the “head” section of the plugin:
<script type="text/javascript">
jQuery(document).ready(function() {
if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var contentHeight = jQuery('.content').height();
var sidebarHeight = jQuery('.sidebar').height();
if (contentHeight > sidebarHeight) {
jQuery('.sidebar').height(contentHeight);
jQuery(".sidebar .enews-widget").stick_in_parent();
}}});
</script>
This is how it should look:
Insert the snippet into the "Header" section
You’re done!
The second code snippet tells your Genesis site to make your sidebar sticky in the parent container. That means, that the HTML element with the class “.sidebar .enews-widget” (hence .sidebar .enews-widget above) will be stick to the top when your visitors are scrolling down your blog post content, which resides in the HTML element with the class ".sidebar".
Go ahead and open your blog page or a single post and see if the sidebar is sticky.
