How to create a custom WordPress sidebar

The sidebar is one of the popular features on the website. Often, it uses for blogs or news pages. Some WordPress themes provide the ability to add a new custom sidebar for the theme. But some don’t.

If your current theme doesn’t provide the ability to add a new sidebar on your site, you have two options to do.

Option 1: Using the plugin. You can use the Custom Sidebars plugin which is free.

Option 2: Add the new custom sidebar without any plugins which I will show you here. You can add the code to your child theme or create a new sidebar plugin.

Add the new sidebar to your child theme

Register the sidebar

Adding a new sidebar on your theme, you can add the PHP code into functions.php on your child theme.

Your child theme folder may look like this:

• functions.php
• style.css
• screenshort.jpg – optional

At functions.php, add the code below in order to register a new sidebar.

/**
 * Added by Apple Rinquest
 * Added on 4/2/2020
 * desc: add custom sidebar widget
 */
add_action('widgets_init', 'ar_news_sidebars');
function ar_news_sidebars()
{
	register_sidebar(array(
		'name' => __('News Sidebar'),
		'id' => 'ar-news-sidebar',
		'description' => __('Show news on sidebar'),
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	));

        /** 
        // add another new sidebar
        register_sidebar(array(
		'name' => __('Another New Sidebar'),
		'id' => 'ar-another-sidebar',
		'description' => __('Another New Sidebar'),
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	));
        */
}

In the code above, we register the new sidebar with the unique ID as “ar-news-sidebar”. I add the extra HTML code in the before_widget, after_widget, before_title, and after_title properties for matching the current theme. You don’t need to add the extra HTML code if you don’t need it.

We register only one new sidebar. You can register more sidebars as you like. Simply, register another new sidebar. Please see the code above in the comment.

We use the “widgets_init” action which fires after all default WordPress widgets have been registered. The callback function name must be unique. In my case, I name it “ar_news_sidebars“.

Display the sidebar on the theme

In order to display our new sidebar on the frontend, we just add the simple PHP code in the template. In my case, I want to add the new sidebar to my custom news archive template(archive-news.php). I will add the PHP code below to the template.

<?php
if (is_active_sidebar('ar-news-sidebar')) {
     dynamic_sidebar('ar-news-sidebar');
}
?>

Add the new sidebar to your theme via Plugin

If you don’t use the child theme and don’t want to use it. You can add the new sidebar via the plugin.

• First, create a new folder under the Plugins folder. You can name the folder whatever you want. I name it “ar-sidebars”.
• Then create a new PHP file names “ar-sidebar.php” which is the same name as the folder name and this file will be the main file for our plugin.
• Next, copy the PHP code below into the “ar-sidebar.php”

<?php
   /*
    Plugin Name: Custom Sidebar Plugin
    description: create new sidebar
    Version: 1.0
    Author: <a href="https://applerinquest.com/">Apple Rinquest</a>
   */  

// add new sidebar
add_action('widgets_init', 'ar_news_sidebars');
function ar_news_sidebars()
{
	register_sidebar(array(
		'name' => __('News Sidebar'),
		'id' => 'ar-news-sidebar',
		'description' => __('Show news on sidebar'),
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	));

        /** 
        // add another new sidebar
        register_sidebar(array(
		'name' => __('Another New Sidebar'),
		'id' => 'ar-another-sidebar',
		'description' => __('Another New Sidebar'),
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	));
        */
}

• Save the file then activate the plugin
• On the frontend, you don’t see the sidebar showing yet. Because we need to add the PHP code for showing the sidebar on the template. Add the PHP code below to the template you want to show the sidebar.

<?php
if (is_active_sidebar('ar-news-sidebar')) {
     dynamic_sidebar('ar-news-sidebar');
}
?>

That’s it. If you want to improve your code when you create the plugin, you should check my post here.

Child theme vs Plugin

I prefer the Plugin option which I can disable the plugin anytime without touching the code again.