How To Create a Sticky Sidebar in a WordPress Block Theme

Last Updated on June 7, 2024

Block themes offer endless options to customize your website design through the site editor. With this, creating a smooth and user-friendly website is always a work in progress.

A sticky sidebar is one of those design enhancements you can add to your WordPress site. It ensures continuous access to vital content while scrolling.

In this post, let’s learn how to add a sticky sidebar in a WordPress block theme.

What is a sticky sidebar?

Picture this: you’re browsing a website, and as you scroll down, the sidebar magically stays floating, offering quick access to essential information, such as a notice, a search button, a call-to-action section, or an ad.

That is a a sticky sidebar. It’s like having a loyal companion that follows you wherever you go on a webpage, providing easy access to important information and links without any effort on your part.

Benefits of a sticky sidebar

Enhanced engagement

With key content kept within easy reach of the reader, there’s prolonged engagement because the user does not need to scroll elsewhere on the page to search for vital information, such as a subscription form.

A boost in conversion rates

Enhanced engagement leads to higher conversion rates – it’s a simple equation. When your call-to-action (CTA) buttons, subscription forms, and product links are consistently visible, conversion rates are going to increase.

Users are more likely to take action when the next step isn’t hidden, eliminating the need for them to search

Improved navigation

A sticky sidebar is a virtual guide that aids the reader in navigating your website effortlessly. Simply place your key navigation elements in the sidebar so visitors can quickly explore your content without feeling overwhelmed.

Optimized Ad visibility

A sticky sidebar provides prime real estate for displaying ads if your blog relies on advertising revenue. Ads that remain visible while users scroll can significantly increase their visibility and click-through rates. This strategic placement ensures that your ads capture users’ attention throughout their browsing experience, potentially maximizing your advertising revenue.

What content should you put in a sticky sidebar?

A sticky sidebar is ideal for displaying important content that is frequently accessed, so you want to keep visible as users navigate through your website.

This can include items such as navigation menus, subscription forms, call-to-action buttons, social media links, advertisements, or any other relevant information you want to highlight.

The steps:

Before you add a sticky sidebar, ensure your WordPress theme supports the site editor. That is, you should have a block theme installed and activated.

WordPress block themes provide a more intuitive way to design and customize your site, and they seamlessly integrate with the site editor.

For this tutorial, I’m using the Twenty Twenty-four theme.

Step 1: Identify the template with a sidebar

Start by identifying the template that contains a sidebar. In most block themes, sidebars are often contained in a 2-column layout in a posts template.

The sidebar itself may comprise multiple content blocks or a single content block. You can place any content in the sidebar; it is up to you.

You can also create multiple custom templates with different sidebars. When creating a post or page, select the appropriate template with the sidebar that applies.

In the theme Twenty Twenty-four, there’s already a pre-built template that has a sidebar section – the Single with Sidebar template. We’re going to edit this template and make the sidebar sticky on scroll.

Step 2: Activate position sticky

  1. Open the Site Editor and access the ‘Single with Sidebar’ template.
  2. Click on the list view icon to view the list of blocks the template is using.
  3. Access the Group block, then Columns, then the second Column. That’s the sidebar column.
  4. You’re going to wrap it in a Group block because you cannot apply position.sticky to a template part (sidebar template part).
  5. Once you’ve wrapped the sidebar template part in a Group block, change position from Default to Sticky in the settings panel on the right.
  6. You can apply a top margin and some padding for better visual appeal.
  7. That’s it. You have a sticky sidebar on scroll.
  8. Apply this edited template to a new post to see it in action.

In summary

Unlike classic WordPress themes, adding a sticky sidebar in block themes does not need coding or installing yet another plugin.

Thanks to the settings.position.sticky property defined in the theme.json file, all the magic happens right within the site editor, just by wrapping the appropriate section in a Group block and changing its position setting.

How do you use sticky elements on your website?