How to Display Multiple Sidebars with Kadence Elements

ByJulius Wasajja Published on Updated on

Introduction

Do you want to display different content in various sidebars across your site? This guide will walk you through using Kadence Elements to create and manage multiple sidebars. With Kadence Pro, you can use elements to control exactly what appears in your sidebar areas.

Video Guide

For a visual walkthrough of implementing multiple sidebars, watch our YouTube tutorial on how to show sidebars in WordPress with Kadence.

What You’ll Need

Understanding Multiple Sidebars

Traditional WordPress sidebars vs. Kadence Pro’s flexibility

By default, WordPress sidebars offer limited customization. Kadence Pro, however, allows for dynamic, content-rich sidebars tailored to specific pages or sections. With Kadence Elements sidebars, you can achieve the following benefits;

  • Targeted content display: Show specific content to a specific group of users.
  • Enhanced content control: Display relevant content based on the page’s context. You can also set other display conditions for your content, such as an expiry date.
  • Improved user experience: With this feature, you can display content based on user devices, hence improving the UX (User Experience) for your site visitors.

How to Set Up Multiple Side Bars

To use this setup, activate the Hooked Elements, a Kadence Pro Add-on, which enables conditional content placement across your site. After activation;

  1. Navigate to Kadence Elements: Navigate to Appearance > Elements in your WordPress dashboard.
  2. Create a new element for your custom sidebar: Add a new element and set “Content Section” as your Element type. Name the Kadence Element and add content to your sidebar using the WordPress block editor.
Navigating to Kadence Elements
Navigating to Kadence Elements
  1. Explore the Element Settings menu: Within your new element, familiarize yourself with these key options:
    • Content: The block editor where you set the element type as Content Section.
    • Preview Settings: Preview how your element will appear on different devices.
    • Placement: Define where your element will be displayed using hooks.
    • Display Settings: Control which pages, users, and devices will see your element.
An overview of the Kadence Element settings
An overview of the Kadence Element settings
  1. Configure Placement Settings: Use hooks under the placement settings to display content anywhere on your site. For this setup, we will select the “Replace Sidebar” option that replaces the default sidebar on the pages where our element/sidebar appears.
Set Replace Sidebar as the Placement option
Set Replace Sidebar as the Placement option

You can override existing content with your tailored content in any other these areas;

  • Headers: Add custom content above or below your header.
  • Footers: Replace or enhance your footer with custom designs.
  • Content sections (before/after): Insert content before or after the main page content.
  • Single pages and archive pages: Target specific pages or groups of pages and other areas
  1. Set Display Settings: Control sidebar visibility by tailoring the display based on individual pages, archive types, user status (logged in or not), and device type (desktop, tablet, mobile). Display settings also allow you to set expiration dates for time-sensitive content. Last but not least, you can set exclude settings to hide sidebars on specific pages or posts.
  1. Ensure Sidebar Visibility:
    • Access page settings within the WordPress editor: Go to the page where the custom sidebar is meant to display.
    • Enable the right sidebar layout: Click the page settings icon in the editor. Ensure the sidebar is enabled for that page.
Set the appropriate page layout
Set the appropriate page layout
  1. Customizing Sidebars in the WordPress Customizer:
    • To access the Customizer, go to Appearance > Customize.
    • Configure sidebar layouts for posts, pages, and custom post types: Adjust sidebar settings for specific archive and single post layouts for sidebar visibility.
Setting page layout inside the Theme Customizer
Setting page layout inside the Theme Customizer

Beyond having a variety of sidebars for specific pages, you can also achieve the following with Kadence Elements;

  • Create custom footers: Design unique footers for different devices.
  • Design device-specific content blocks: Create content optimized for mobile or tablet users.
  • Leverage hooks for precise content placement: Use hooks to insert content in specific locations.
  • Combine multiple settings for advanced content targeting: Use a combination of display and placement settings to achieve complex content strategies.

Final Thoughts

With Kadence Pro and its Hooked Elements add-on, you can create dynamic and highly customized WordPress multiple sidebars throughout your website. By following this guide, you can control content display and deliver a more engaging experience for your site visitors.

I am an aspiring WordPress Developer and a software engineering graduate. I have experience in web design, content creation, and SEO in WordPress.

Being at MRK has given me a chance to interact with a more experienced and diverse team in the digital marketing industry, greatly improving both my technical and soft skills.

As an IT enthusiast, my passion led me to found TechRafiki – a tech media startup that covers tech stories in Africa.

I spend most of my free time listening to music, tech podcasts, and doing sports activities.