Creating a sticky sidebar in WordPress used to be tricky, often requiring a CSS sticky sidebar code snippet a sticky sidebar WordPress plugin. But with block themes, it’s now dead simple.
In this easy-to-follow guide, we’ll show you how to make a floating sidebar in WordPress with just a few clicks.
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.
With the Blocksy theme, creating a sticky sidebar is incredibly simple. There’s no need for extra setup or plugins – it’s a built-in feature. Just head to the Customizer and enable it with a few clicks.
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
- Open the Site Editor and access the ‘Single with Sidebar’ template.
- Click on the list view icon to view the list of blocks the template is using.
- Access the Group block, then Columns, then the second Column. That’s the sidebar column.
- You’re going to wrap it in a Group block because you cannot apply position.sticky to a template part (sidebar template part).
- 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.
- You can apply a top margin and some padding for better visual appeal.
- That’s it. You have a sticky sidebar on scroll.
- Apply this edited template to a new post to see it in action.
In summary
Unlike classic WordPress themes, there’s no need to add code or install another plugin to create a sticky sidebar. With block themes, simply enable the position: sticky property. Thanks to the theme.json file, you can wrap the section in a Group block and adjust its position directly in the site editor.
How do you use sticky elements on your website?
