How To Make A Sticky Sidebar In GeneratePress Theme

If you’re one of them who knows the essentials of a sidebar and wants to make a GeneratePress sidebar sticky, then I have this article for you. Wherein, you will be learning how to make a sticky sidebar in GeneratePress theme.

Sidebars are one of the most important parts of any website, especially the blog section of a website. They can get so engaging with your audience, that they can drastically decrease your bounce rate and increase click-through rates on the most important sections of your site.

There are two ways to make sticky sidebar in GeneratePress

1. Use a plugin like Q2W3 Fixed Widget for WordPress themes
2. Write CSS code in GeneratePress Theme Customizer >> Additional CSS

Both, GeneratePress free and premium versions have a good amount of options in Sidebars. But fail to provide a sticky sidebar option or last widget sticky option in their theme customizer.

GeneratePress free version has Sidebar Layout option, for Blog Sidebar, and for Single Posts Sidebar option. Whereas, GP premium extends a bit further and offers Width Control for both left and right sidebar and Padding between the Widgets.

Nevertheless, GeneratePress is a lightweight, fast performing, multi-purpose WordPress theme. Offering tons of customization and layout options, GeneratePress has become one of the most used WordPress themes.

If you want to check the detailed comparison between GeneratePress free and premium versions, please go through my article GeneratePress free vs premium. It will give you an acute understanding of what’s there and not there in both versions of the theme.

You can create a GeneratePress sticky sidebar by using a plugin like Q2W3 or by simply writing some CSS lines of code. We will look at both the ways.

Before we get into the details of a sticky sidebar in the WordPress website, let’s look into what is a sticky sidebar.

What Is A Sticky Sidebar?

Sticky Sidebars are also called Fixed or Floating Sidebar Widgets. They are widgets on a website that get locked into one place, even when the user keeps scrolling down the page. One can see them on the Right or Left side of the webpage. Any type of information found on the sticky sidebar is always accessible for the user/reader.

Use it to show your content, boost your email sign-ups, and offer any deals or promotions. Do not overdo the content on a Sidebar, and keep a neatly balanced design of the entire web page

Using sidebars is a very good web designing practice, making the website easy to navigate. In fact, research done by ContentSquare reveals that 38% of website shoppers are likely to shop again on sites that are easier to navigate.

Meaning, the ones which showcase nav menus and proper sidebars.

What Can You Get From A Sticky Sidebar Widget?

It is a great way to grab user’s attention on a sticky sidebar widget. Especially, if you have the required content. For example, a person who wants to start blogging might find it beneficial if you showcase all the required content and resources on a sticky sidebar.

Thereby, that even increases your content’s visibility, bringing in more subscribers, which adds to higher conversions.

• Always Visible: Sticky Sidebars or creating last widget sticky are always there in front of your readers eyes. That is the best place to keep content that is helpful for users.
• CTR Boost: Helpful content is always read and appreciated. Making it one of the easy ways to increase its CTR.
• Enhances User Experience: Fixed Sidebars offer an easy chance for users to navigate your site. If the website is easily navigable, there is a high chance of users to return back.
• More Subscriptions: Keep an email Opt-In on your Sticky Sidebar and see the number of people that would get to subscribe. Of course, the content should be helpful and enjoyable.
• Increase in Conversions: Call to action of signing up or making people purchase, works very well on a floating sidebar widget. But, your content should be appealing and problem-solving, for the conversions to take place.
• Additional Income Stream: A sticky sidebar proves great for selling Ad Space or promoting affiliate deals and/or promotions.

Let us now look into creating a sticky sidebar in the GeneratePress theme. First, we will see how it’s done using a plugin, and later we will look into manually adding CSS code to create the last widget sticky.

How To Make A Sticky Sidebar In GeneratePress Theme Using Plugin

As of Sticky Sidebar Plugin, there is one most popular plugins on WordPress, called Q2W3 Fixed Widget plugin.

It is not only a GeneratePress sticky widget plugin but works on any WordPress theme.

• Go to your WordPress Dashboard, hover your mouse on Plugins, and click on Add New.
• Search for Q2W3 in the search box provided.

• You will see Q2W3 sticky sidebar WordPress plugin
• Click on Install Now and then Activate the plugin.
• Now, go to your WordPress dashboard, hover on Appearance, and click on Fixed Widget Options.

• Adjust the Top and Bottom Margin according to your theme.
• Go back to your WordPress Dashboard, hover your mouse on Appearance, and this time click on Widgets.

• Select Fixed Widget under widget setting and click on Save.
• Now, check the result on your website.

Note: If you still cannot see the Sidebar, open GeneratePress Theme Customizer from WordPress Dashboard>>Appearance>>Customize. Go to Layout, then Sidebars and select Content/Sidebar (for Right Sidebar).

I personally feel it is not right to install a plugin, for managing such a simple thing.

Most of the Plugins on WordPress use JQuery. JQuery has a reputation for hurting the website’s performance. Therefore, it is best to read someone’s article and follow the method via coding. That way, your site has less dependency on plugins.

Also Read:

• How to Remove Built with Generatepress

Create Sticky Sidebar In GeneratePress Theme Via Code

In the following section of this article we will look at how to make a sticky sidebar in GeneratePress theme without a plugin. Purely using CSS.

Learn how to make sidebar position sticky for;

• The Entire Website
• Single Post
• Last Widget Sticky
• Excluding a Single Page
• Right and Left Sticky Sidebar

For performing all the above mentioned, you will need to go to Additional CSS in GeneratePress Theme Customizer.

Note: You will also need to go to Sidebars under Layout Options in the GeneratePress Theme Customizer and select the appropriate sidebar options.

Note:- Keep the GeneratePress sidebar width to 25%

GeneratePress Sticky Sidebar CSS Code for Entire Website

This CSS code will show sidebar position sticky on the right-hand side of the entire website.

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

The code has “right sidebar” mentioned so in GeneratePress Theme Customizer Layout Options for Sidebar, select Content/Sidebar under Sidebar Layout, Blog Sidebar Layout, and Single Post Sidebar Layout.

Sticky Sidebar CSS Code for Single Post Only

If you’re only interested in creating Sidebar for Single Posts and do not want it to showcase on other parts of the website, then follow the code mentioned below.

Same code applies for sticky left sidebar; just replace #right-sidebar with #left-sidebar

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

The single post body class does the trick over here.

Also, do not forget to choose Content/Sidebar for Single Post, under Sidebar Layout options in the GeneratePress Theme Customizer.

Sticky Sidebar CSS Code To Create Last Widget Sticky In GeneratePress Theme

You might have seen, some sites showcasing multiple sidebars with sticky widgets and/or last widget sticky. That last widget stays sticky and moves along with the page, irrespective of the other sidebar widgets above it. There is a CSS code for that too.

Using that, you can easily create last widget sticky in GeneratePress and any other WordPress theme, for that matter.

@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: 40px; /*Adjust position */
  }
}

Excluding Page/Post

If you want to include a certain type of page/post, you can even do that with a small change in CSS class. All you have to do is use the :NOT class.

Isn’t all of this fun…

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

The :NOT class used for Blog will exclude the Right Sticky Sidebar on Blog section, but will show on other parts of the site such as Single Post, etc.

Not only on Single Post or Pages, the sticky sidebar will also be visible on other parts of the site.

This trick can be applied to Exclude Sidebars from Home Page or other Sales Pages that promote products or services.

Also Read: Display Last Updated Date in GeneratePress Theme

Right & Left Side Sticky Sidebar In GeneratePress Theme

Just in-case if you needed a CSS code that displays two Sticky Sidebars in GeneratePress theme, at the same time then use the following code.

@media(min-width: 1024px) {
    .both-sidebars .site-content {
        display: flex;
    }
    .both-sidebars .site-content > div {
        left: unset !important;
    }
    
    #left-sidebar {
        order: -1;
    }
    
    .inside-left-sidebar, .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

Note: For two sidebars to display properly keep container width 1300px and above.

I have used Table of Contents as a Widget in my left sidebar.

Since, table of contents is only required for a blog post. I’ve deliberately made changes to Single Post Sidebar Layout and kept the settings as Sidebar/Content/Sidebar.

So, that is it. I have tried and tested each and every code on this website, and it works like a charm.

Use any of the above 5 CSS codes to make sticky sidebar in Generatepress theme and add some CSS for beautification with respect to your theme style and color.

FAQs

Conclusion

This guide will help you in adding a sticky sidebar in GeneratePress theme.

I have personally tried using the plugin and tested all 5 different CSS codes on BloggingIdol.

If you are uncomfortable using codes, just download the plugin and it will do all the work for you. But, if you feel applying some CSS and then further adding some colors and drop shadows will really beautify it. Then I would encourage you to do so. Plugins are anyways going to hurt the performance of your site, down the road.

Thank you for taking the time to read the entire article.

Few GeneratePress Customization Tutorials

• How To Create Sticky Floating Footer Bar In GeneratePress
• Display Last Updated Date in GeneratePress Theme
• Sticky Footer Bar in GeneratePress
• Remove GeneratePress Copyright Message
• Add Author Box in GeneratePress Theme
• Sticky Sidebar Using GenerateBlocks