How to Add a Custom Sidebar in Hello Elementor Theme (Step-by-Step Guide)

0 commentsTopic: wordpress

If you’re using the Hello Elementor theme, you might have noticed that it doesn’t natively support sidebars. Unlike themes like Astra, which offer built-in sidebar options, Hello Elementor follows a minimalistic approach—meaning fewer default features.

But what if you need a sidebar for widgets, ads, or additional navigation?

In this guide, I’ll show you how to add a fully functional custom sidebar in the Hello Elementor theme using a simple PHP code snippet.

Why Doesn’t Hello Elementor Have a Sidebar?

Hello Elementor is designed as a lightweight, performance-optimized theme for Elementor users. Since Elementor allows drag-and-drop page building, the theme intentionally avoids extra features like sidebars to keep it fast and clean.

However, many users still need sidebars for:
✔ Blog layouts
✔ E-commerce filters (WooCommerce)
✔ Advertisement spaces
✔ Custom widget areas

Luckily, we can manually add a sidebar with a few lines of code.

Method: Add Sidebar Using Code Snippets Plugin

Since editing theme files directly can lead to data loss during updates, we’ll use the Code Snippets plugin for safe implementation.

Step 1: Install Code Snippets Plugin

Go to WordPress Dashboard → Plugins → Add New.
Search for “Code Snippets” and install it.
Activate the plugin.

Step 2: Add the Sidebar Registration Code

Go to Snippets → Add New.
Give it a title (e.g., “Custom Sidebar for Hello Elementor”).
Select “PHP Snippet” as the code type.
Paste the following code:

function custom_sidebar() {
    register_sidebar( array(
        'name'          => __( 'Custom Sidebar', 'post_sidebar' ),
        'id'            => 'custom-sidebar',
    ));
}
add_action( 'widgets_init', 'custom_sidebar' );

Click “Save Changes and Activate.”

Step 3: Check Your New Sidebar

Go to Appearance → Widgets.
You should now see “Custom Sidebar” available.
Drag and drop widgets into it.

How to Add Multiple Sidebars

If you need more than one sidebar, modify the code like this:

function custom_sidebars() {
    $sidebars = array(
        'custom-sidebar'     => __('Custom Sidebar', 'custom-sidebar'),
        'footer-sidebar-1'   => __('Footer Sidebar 1', 'custom-sidebar'),
        'footer-sidebar-2'   => __('Footer Sidebar 2', 'custom-sidebar'),
        'blog-sidebar'       => __('Blog Sidebar', 'custom-sidebar'),
    );

    foreach ($sidebars as $id => $name) {
        register_sidebar(array(
            'name'          => $name,
            'id'            => $id,
        ));
    }
}
add_action('widgets_init', 'custom_sidebars');

Now, you’ll have two sidebars in Widgets → Appearance.

If you want to use code snippet suggested by Elementor itself as explained here. Use code given below:

if (function_exists("register_sidebar")) {
  register_sidebar();
}

if you want to create multiple sidebars using this method than use this code:

if (function_exists("register_sidebar")) {
  register_sidebar();
  register_sidebar();
  register_sidebar();
}

How to Display the Sidebar in Elementor

Edit a page with Elementor.
Drag the “Sidebar” widget from the panel.
Select your custom sidebar from the dropdown.

✅ Done! Your sidebar will now appear on your page.

Final Thoughts

While Hello Elementor doesn’t include sidebars by default, adding them is easy with a few lines of PHP. Using the Code Snippets plugin ensures your changes stay safe during updates.

FAQs

❓ Can I add different sidebars for different pages?
Yes! Use conditional logic plugins or Elementor Pro’s Theme Builder to assign sidebars dynamically.

❓ Will this slow down my site?
No, the code is lightweight and won’t affect performance.

❓ Can I style the sidebar?
Absolutely! Use Customizer → Additional CSS or Elementor’s styling options.

Watch the Full Video Tutorial

By following this guide, you can unlock full sidebar functionality in Hello Elementor without switching themes!

-53%
-14%