Advertisements

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.

How to create sticky blocks in the GeneratePress sidebar

I’ve been impatiently wanting to create a new sidebar for this website using the fancy new block elements since the ability to do so was introduced in GeneratePress Premium. I was certain that being able to build a GeneratePress Element-based sidebar using GenerateBlocks would allow me to make my websites look (even ?) better.

I started by replacing my footer widgets with a block element and since then, I’ve been wanting to take it one step further and replace all of my widgets with block elements. One thing has been holding me back, though. I couldn’t use my trusted sticky widget plugin in block elements as its function was limited to just widgets.

That all changes today. Because as it turns out you can make any block in a GeneratePress Block Element sidebar sticky with just a few lines of CSS. I can finally start designing my sidebars with GenerateBlocks!

Designing a sidebar using blocks

The first thing you will want to do is design your sidebar. To do that simply add a new block element and select right or left sidebar as the block type. My sidebar is rather simple (it’s the one you can see to the right of this article).

The option to create a new sidebar using GeneratePress elements

The boxes are simply GenerateBlocks containers with appropriate margins and paddings. I then filled those containers with the blocks I needed. A few buttons here, a few ads there and my new sidebar was done. I’ve spent more time cutting my toenails than designing my sidebar in GeneratePress.

Click on the container of your last block, in my case it’s an ad (I have to keep the lights on somehow) but it could be literally anything. Next, open up the block settings. Expand the Advanced accordion and enter the CSS class sticky-block. That’s all you have to do to that block.

The advanced options of a block in the GeneratePress sidebar

With the class added to the last block in our GeneratePress Block Element sidebar, we can move on to the custom CSS code. The few lines we will be adding is what will make our block sticky.

Making a sidebar block sticky using CSS

The CSS code was helpfully provided by David from the GeneratePress customer support. In your WordPress menu select Customise under Appearance. In the menu that subsequently opens you the last item should be titled Additional CSS. Click on it and enter the following into the text field:

@media(min-width: 768px) {
    .right-sidebar .site-content {
        display: flex;
    }
    .inside-right-sidebar {
        height: 100%;
    }
    .sticky-block {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

Removing a plugin is never a bad thing

In WordPress communities, you will often read the advice that you should only ever install plugins you really need. Similarly, I have had WordPress veterans tell me to always keep my plugins to a minimum. And that is something I definitely always try to do. As GeneratePress is meant to be a lightweight and fast theme, I don’t want to slow it down by using too many plugins.

Using the few lines of code noted above I could completely replace a function which was previously provided by a plugin. I’m not saying the sticky widget plugin I previously used is bad but every plugin is a potential security risk and can slow down your website.

About Liam Alexander Colman

Liam Alexander Colman has been working with GeneratePress for over two years and has built countless WordPress websites using it. In his personal setting, Liam maintains six websites. While not a developer, he has created innumerable GeneratePress Elements and is well versed in customizing the theme to his liking. Visit this link for more information and a showcase of his work.

4 thoughts on “How to create sticky blocks in the GeneratePress sidebar”

  1. What would the padding, margins size etc be for a sidebar?

    “A few buttons here, a few ads there and my new sidebar was done. I’ve spent more time cutting my toenails than designing my sidebar in GeneratePress.”

    I’m new to it but it’s taking FOREVER and I still haven’t got my head around it. Do you know of any decent tutorials that would give me an idea of how to do it faster?

    Reply

Leave a comment

Advertisements