How To Add WordPress Sticky Sidebar With GeneratePress Theme? (With & Without Plugin)

WordPress-sticky-sidebar

Do you want to make the WordPress sidebar sticky? Or wish to learn how to create a sticky floating sidebar widget in WordPress? Let me tell you the ways to execute both features through this article!

Before getting into the details, I would suggest you get GeneratePress, the fast-loading, flexible WordPress theme, to get the job done in seconds.

We started using this lightweight theme a couple of years ago, and its performance is amazing. Check the difference GeneratePress Free Vs Premium and understand the qualities of the paid version.

I have recently made the below sticky widget for specific blog posts to boost our sales & conversions. Look at the sidebar in the below image!

wordpress-sidebar-sticky

You can also make a nice one like this!

So, if you are not using the GeneratePress theme, I would advise you to get this superfast loading template and take your site performance to the next level. You will get a 10% discount as well! Grab it now!

Now, I can help you add a sticky sidebar while scrolling the WordPress site!

Let’s get into the topic now!

You might be in a dilemma about enabling WordPress sticky sidebar! Don’t worry; look at the benefits of doing it!

Why WordPress Sticky Sidebar?

The sticky sidebar is nothing but the sidebar’s fixed navigation throughout the page, and yes, it will not disappear when your visitors scroll down the page. It is considered as one of the essential structures of modern websites because of its anytime accessibility.

Its advantages are:

1. Improves User Experience

Through the sidebar of sticky type, you are offering your readers an opportunity to navigate your website easily. Sometimes, they may get the exact information with it, saving time and effort.

It works well on actionable sites like eCommerce since they intend to buy a product. You are making the readers oriented and giving them more control, which increases the customer experience.

2. Boosts Your Visibility

Branding is a recent trend in online businesses. It creates a memorable impression of your product/service among your customers.

By enforcing something like asking them to subscribe or requesting to read your eBook, you are creating brand awareness for your business website. You may add any valuable asset for your readers through the sticky sidebar, and yes, it would boost your visibility on the web.

3. High Conversions

When visitors get specific content permanently in front of their eyes, they will react. They would be keenly interested in grabbing the deal if you have a particular discount or exclusive offer related to the page they read.

As you increase the chances of people converting, it is more likely to increase the conversion rates and boost your revenue. A sticky sidebar/widget is the best element to promote a product and make sales.

How To Make A Sticky Sidebar In GeneratePress Theme Without Plugin?

I hope you know the merits of making the sidebar sticky in WordPress. Let me tell you how to execute it without any third-party plugin.

Yeah! Most site owners care about the site loading speed and don’t want to install several plugins as they could affect the speed performance.

If you are also looking for the Sticky sidebar WordPress CSS code for the GeneratePress theme, get those codes now!

To Make Sidebar Sticky With GeneratePress Theme

Just add the following code to your Site Custom CSS section

@media (min-width: 769px) {
 #right-sidebar {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 }

To Make Sidebar Sticky In Single Posts of GeneratePress

@media (min-width: 769px) {
 body.single-post #right-sidebar {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 }

To Make the Last Widget Sticky In the Sidebar Of GeneratePress

Add the Following code to your Site’s Custom CSS section,

@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: 70px;
 }
 }

How To Activate WordPress Sticky Sidebar & Widget With Plugin?

The non-tech savvy users might hesitate to add or edit the codes and look for the best plugin to do the job efficiently in minutes.

For them, I have found two helpful sticky sidebar plugins for WordPress. These extensions are compatible with all WordPress themes, including GeneratePress.

1. WPSticky

WPSticky is a blazing-fast sticky sidebar plugin for WordPress that is highly compatible with all themes, plugins, and page builders.

No single line of code is required to make sticky elements – everything can be visually picked from the screen. You can set up a sticky menu, sticky header, widget, or any other element you prefer in only a few clicks.

More than 100 thousand users use this plugin because of its user-friendliness and dedicated support from Webfactory Ltd.

Best Features

  • It makes any element sticky on your WordPress site
  • No need to add or edit the codes
  • Straightforward backend settings
  • 7 days money back policy
  • 50% launch discount available

2. WP Sticky Sidebar

WP Sticky Sidebar is an excellent plugin that helps you make your floating sidebar menu permanently visible when scrolling.

It has a premium version with additional features. When writing this article, this WordPress sticky sidebar plugin had crossed 10,000 active installations and earned 100 5-star reviews.

Best Features

  • Easy to install and use
  • Offers CSS class and ID of the sidebar element to be sticky
  • The top margin in pixels can be added to the floating sidebar.
  • It gives the “Disable” option if the screen width is small
  • The menu height of the sidebar can be updated; a troubleshooting option is given.
  • Contains more “Disabling” options (Pro version)
  • Create and add your custom sidebar (Pro version)
  • Support and updates are available for one year (Pro version)

I would advise you to use its free version first, and if you feel satisfied with the settings & features, you may update to the Pro version of WP Sticky Sidebar.

3. Q2W3 Fixed Widget For WordPress

To fix the last widget sticky to your site’s sidebar, install the Q2W3 fixed widget for the WordPress plugin. It is a great extension to create sticky widgets that stay visible when the page gets scrolled up or down.

However, you may get a compatibility issue and check their theme requirements. It has 100,000 active installations till now.

Best Features

  • Define the top and bottom margin to prevent overlapping with the footer
  • Suitable to add sticky ads for user interaction and enhances CTR (Click-through-rate)
  • Possible to fix multiple widgets
  • 100% free (No Pro version available)
  • Disable the plugin on mobile devices

Frequently Asked Questions

1. What Is a Sticky Sidebar?

Ans. The sidebar of any WordPress theme is static by default. It will disappear when the visitor scrolls down the page. It is not the case with the Sticky sidebar! It remains visible and offers constant navigation for your readers, which gently pushes them to respond to your CTA.

2. How do I make my WordPress sidebar sticky?

Ans. You can use either a third-party plugin or add the CSS code given in this article to get the task done. I would suggest you use the GeneratePress theme.

3. Does the sticky sidebar work with the GeneratePress theme?

Ans. Yes! You may add the CSS code given or install the plugin mentioned in the blog post.

4. Is the sticky sidebar a distraction element?

Ans. Yes, almost! Because it scrolls side-by-side! However, you can make it attractive and straightforward to win your readers’ hearts. Also, make sure that it does not overlap the footer.

5. Where should I activate the WordPress sticky sidebar?

Ans. It would be better to enable conversion-focused articles than informative articles. If you have any special discount for the product you are promoting, you may add the offer details to the sidebar, make it sticky, and display the matter in the relevant blog posts.

As you are using the GeneratePress theme for your business site, I would suggest you check “How To Display Last Updated Date In GeneratePress Theme” to reap the SEO benefits.

Conclusion

After adding a few sticky widgets to our blog, WPGlossy, I have been receiving inquiries from my readers and followers to make their doubts clear about activating the sticky sidebar for their website. Thus, I have decided to write a tutorial and accomplish it!

I have clearly explained the benefits of enabling the WordPress sticky sidebar and hope you agree. I should admit that it is a distractive element. However, when it is done precisely & straightforwardly, you will surely make the leads, sales, or subscribers.

So, which method would you like to implement? Adding the CSS codes or installing the plugin to your GeneratePress theme? Share your viewpoints in the comment section; let’s discuss.

Also, if you need help enabling the sticky sidebar or making the last widget sticky, leave your message, and I’ll assist you in fixing things! And finally, I would suggest you get the GeneratePress theme to do the job faster.

by Sakthi
Sakthi is a thoughtful guy who specializes in WordPress Setup & Design. He is interested in designing the functional & attractive WordPress themes for the Digital marketers & Bloggers and helping them attain their goals with a tailored site. Look his ThemeForest Portfolio.

25 thoughts on “How To Add WordPress Sticky Sidebar With GeneratePress Theme? (With & Without Plugin)”

  1. Sakthi, this is some sweet coding here buddy. I love the look of a sticky sidebar. Makes things a bit more professional if done the right way. I reckon going sticky can boost conversions for specific ads too. Keep those eyes glued to it during the entire trip to your blog. Smart.

    Ryan

    Reply
  2. Hey Sakthi

    Indeed, a useful post.

    I am using 2 widgets on the right sidebar but both are not fixed.

    Will try to implement the above techniques to make them sticky.

    Thanks

    Reply
  3. Hello Sakthi,

    Another useful post from you.

    We followed your previous tips about the last updated date and it was very useful. Now, this post helped me in adding a sticky sidebar without a plugin.

    Previously, I was using Q2W3 Fixed Widget and now I have uninstalled it.

    Your code did the trick easily.

    It would be great if you can share another tutorial about showing the author bio on Generatepress without a plugin. I tried a few codes from Google but none worked.

    Thanks in advance.

    Reply
  4. Hi Sakthi,

    Thanks for the wonderful article.

    The sticky sidebar will make user interaction and user experience even better.

    I use Wp Sticky Sidebar, it’s a very nice plugin and it’s simple to customize the options.

    I have another blog where I can implement the Q2W3 Fixed Widget plugins.

    Thanks & Regards
    Sai Mithun

    Reply
  5. Hi Dear
    Thanks for sharing this awesome tips to sticky widget in generatepress theme. I’m using your last widget sticky css code for my website sidebar… Now it’s looks professonal.

    Great job.
    Trivanks

    Reply
  6. I love CSS code that you provide. Many times plugins can slow website speed. CSS code is good. Thanks for sharing.

    Reply
  7. Very useful post. I have looking for this sticky sidebar for more than two days. Now it became clarified to me. Anyway thanks for this fantastic post.

    Reply
  8. Sticky sidebar enhance the chances to get clicks on your desired content. CSS Approach to make the sidebar sticky is really helpful. Using css than a plugin is better in sense of website page speed.
    Overall good article. I enjoyed that.
    Thanks

    Reply
  9. Hello,

    It is working with the right sidebar, but when I use the same with the left-sidebar, the widget gets over the main content. Can you please help me fix this?

    Reply
  10. Such an excellent Blog! I like your content. I would Thanks for sharing this wonderful content. Its very useful to us.

    Reply

Leave a Comment