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:
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.
You must be logged in to post a comment.
Dustin W. Stout
Mai 7, 2015Hey Jan! Great post! Looking at possibly doing this for one of my sites and this will be very helpful. Hoping this doesn’t conflict with any of the current Javascript powering the floating header in some Genesis child themes.
Jan Koch
Mai 11, 2015Hey Dustin,
if it does, I hope people get in touch with me. Usually this should be resolvable with some CSS 🙂
Dustin W. Stout
Mai 7, 2015Hey Jan! Great post! Looking at possibly doing this for one of my sites and this will be very helpful. Hoping this doesn’t conflict with any of the current Javascript powering the floating header in some Genesis child themes.
Jan Koch
Mai 11, 2015Hey Dustin,
if it does, I hope people get in touch with me. Usually this should be resolvable with some CSS 🙂
Phillip Sims
August 4, 2015Hello, when I embedded the javascript library into the .php file of the extend your site plug in, I received this error:
Parse error: syntax error, unexpected ‚}‘ in /home6/diathlet/public_html/wp-content/plugins/extend-your-site/extend-your-site.php on line 29
It went ahead and deactivated the plugin.
Do you have any ideas about how I can fix this?
I am using the wintersong pro theme with genesis framework. Perhaps I can paste mine into the theme .php file?
This is what was pasted into the plugin’s .php:
// 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’ );
Jan Koch
August 5, 2015Hey Phillip,
Please make sure that you have single quotes in the code (‚) and not apostrophes (`)
Phillip Sims
August 5, 2015This is exactly what I pasted in so I don’t think it’s the apostrophes or backticks is it?
// Enqueue sticky sidebar scripts
function jk_sticky_sidebar_scripts() {
wp_enqueue_script(‘jk_sticky’, ‘//rawgit.com/leafo/sticky-kit/v1…, array(‘jquery’), ‘’, true);
}
add_action( ‘wp_head’, ‘jk_sticky_sidebar_scripts’ );
Phillip Sims
August 4, 2015Hello, when I embedded the javascript library into the .php file of the extend your site plug in, I received this error:
Parse error: syntax error, unexpected ‚}‘ in /home6/diathlet/public_html/wp-content/plugins/extend-your-site/extend-your-site.php on line 29
It went ahead and deactivated the plugin.
Do you have any ideas about how I can fix this?
I am using the wintersong pro theme with genesis framework. Perhaps I can paste mine into the theme .php file?
This is what was pasted into the plugin’s .php:
// 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’ );
Jan Koch
August 5, 2015Hey Phillip,
Please make sure that you have single quotes in the code (‚) and not apostrophes (`)
Phillip Sims
August 5, 2015This is exactly what I pasted in so I don’t think it’s the apostrophes or backticks is it?
// Enqueue sticky sidebar scripts
function jk_sticky_sidebar_scripts() {
wp_enqueue_script(‘jk_sticky’, ‘//rawgit.com/leafo/sticky-kit/v1…, array(‘jquery’), ‘’, true);
}
add_action( ‘wp_head’, ‘jk_sticky_sidebar_scripts’ );
Fletcher Horton
September 3, 2015This is a great post! I’m currently working on a Genesis Child Theme and I’m trying to make all sidebars sticky. I’ve got this to work for the primary sidebar, but can’t seem to get it to work for the secondary sidebar. The theme I’m building needs to set both sidebars to sticky, not just a widget in the sidebars. I’m not well versed in java yet, can you point me in the right direction in implementing the „Many Sticky Items“ via $(„.sticky_column“).stick_in_parent(); from http://leafo.net/sticky-kit/?
Any help would be greatly appreciated.
Fletcher Horton
September 3, 2015This is a great post! I’m currently working on a Genesis Child Theme and I’m trying to make all sidebars sticky. I’ve got this to work for the primary sidebar, but can’t seem to get it to work for the secondary sidebar. The theme I’m building needs to set both sidebars to sticky, not just a widget in the sidebars. I’m not well versed in java yet, can you point me in the right direction in implementing the „Many Sticky Items“ via $(„.sticky_column“).stick_in_parent(); from http://leafo.net/sticky-kit/?
Any help would be greatly appreciated.