LogoLoading Please Wait...

How to add Custom sidebar in wordpress?

By divine_admin_infosys

sidebars allow you to display widgets inside your theme.

And yes, despite the name, you can use “sidebars” to display widgets anywhere you want.

By default, themes come with at least one sidebar.

In this post, I’m going share with you a quick way to add a custom sidebar to your WordPress theme.

Step #1. Create a child theme

If you’re using a custom theme, skip this step. However if you’re using a theme maintained by someone else that may be updated in future, I recommend you create a child theme to leave the original intact.

Install the Child Theme Configurator plugin and copy the required template files such as single.php and page.php into the child theme. The step 4 explains this part.

Step #2. Edit the functions.php file

  • Go to Appearance > Editor > functions.php.
  • Choose functions.php from your child theme.

custom sidebar wordpress

Add this code into functions.php in order to register your custom sidebar:

function my_custom_sidebar() {
    register_sidebar(
        array (
            'name' => __( 'Custom', 'your-theme-domain' ),
            'id' => 'custom-side-bar',
            'description' => __( 'Custom Sidebar', 'your-theme-domain' ),
            'before_widget' => '<div class="widget-content">',
            'after_widget' => "</div>",
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'my_custom_sidebar' );
  • Click the “Update file” button when you’re done.

Step #3. Edit the template files

I want to render the custom sidebar in single posts only, so I’ll edit the “Single post” file.

<?php if ( is_active_sidebar( 'custom-side-bar' ) ) : ?>
    <?php dynamic_sidebar( 'custom-side-bar' ); ?>
<?php endif; ?>

I placed the code above in the location where I want the sidebar to be visible, then I save the changes.

custom sidebar wordpress

Step #4. Check the end result

  • Go to Appearance > Widgets to see if the new sidebar available.
  • Add the widgets you need.

custom sidebar wordpress

  • Preview a single post to see your sidebar in action. The widgets loads as expected in our custom sidebar. Note, some CSS design tweaks will probably be required.

custom sidebar wordpress

Divine Infosys