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 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.

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.

make sticky sidebar in generatepress theme with plugin and css code
GeneratePress free vs premium sidebar options
Left- GeneratePress free Sidebar options | Right- GeneratePress premium Sidebar options

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.

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

bluehost hosting banner

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

sticky sidebar scroll up and down
A Sticky Sidebar is always within the viewport making itself visible to users

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.
Q2W3 plugin for sticky sidebar in GeneratePress theme
Q2W3 Sticky Widget 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.
Q2W3 fixed widget options page
  • 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.
WordPress Widgets section
  • Select Fixed Widget under widget setting and click on Save.
  • Now, check the result on your website.
Q2W3 fixed widget on website
Q2W3 sticky sidebar widget

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:

Create Sticky Sidebar In GeneratePress Theme Via Code

Here we will be seeing how to create sticky sidebars 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.

Sidebar Layout options are available on both, GeneratePress free and premium versions

Sticky Sidebar CSS Code for Entire Website

This CSS code will showcase the Sidebar 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.

@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 the 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 */
  }
}
Last Widget Sticky in GeneratePress Theme

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;
    }
}
sticky sidebar not shown on blog section
Blog Section on BloggingIdol without Sidebar

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.

sticky sidebar can be seen on single post
Sticky Sidebar visible on Single Post

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.

Two Sticky Sidebars on GeneratePress Theme

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

How do I make a Sticky Widget

Well, a sticky widget like a sticky sidebar can be created using a WordPress plugin or applying CSS code that display’s Sticky Widget on the entire website or only on few sections of the site.

How do I make Sticky Sidebar without plugin in WordPress

For making a Sticky Sidebar without using a WordPress plugin, you will need to create it using CSS code. Apply a Widget to the left or right sidebar from the Widget section, and then add the code to Additional CSS, in the theme customizer.
I have created a sticky sidebar without plugin in GeneratePress theme. The techniques are more or less the same and apply to almost all other themes in WordPress.

How to Make my Sidebar Sticky?

Some themes come with a setting of making Sidebar sticky, within the Theme Customizer. But, GeneratePress does not give a sticky sidebar options. You can use a Sticky Floating Sidebar Widget Plugin to do so, simply use any of the above 5 different sticky sidebar CSS codes, to do so.

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.

Must Read:

Increase Conversion and CTRHow To Create Sticky Floating Footer Bar In GeneratePress

Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol

Leave a Comment