A Beginner’s Guide to Creating Sidebars in WordPress

One of the best aspects of WordPress CMS is the amazing collection of pre-built themes (both paid and free) it offers. Whether you want to setup a WordPress powered blog or any standard website, you can easily get access to the theme perfectly suited to your needs.

However, there are some disadvantages of using a pre-built theme, the most obvious being you’re using a theme that might be used by several other people. And so, you will need to make the necessary edits to the theme based on your needs.

While you can style your WordPress theme in several different ways based on your liking, however, in this post I’ll cover some simple steps to make you understand how to add additional sidebars in your theme.

Sidebars in WordPress – An Overview

In WordPress, “sidebar” is the section in the form of a vertical column that is usually jam-packed with plenty of information about that website.

Sidebars are often referred to as widget-ready areas in a WordPress website that contains information other than main content.  For example, you might have a sidebar in your blog page that displays the list of most popular and recent blog entries.

What’s more? You can even display any 3^rd party advertisements and other items, by dragging and dropping them into your sidebar(s). For this purpose, you’ll need to navigate to Appearance → Widgets menu in your website admin panel.

Each WordPress theme comes with at least one sidebar on the left or right side of the theme. However, you can choose to have multiple sidebars in your site as well.

Step by Step Process to Add a Custom Sidebar in WordPress

To illustrate how you can add your own custom sidebars in WordPress, I’ll be using the default Twenty Fifteen WordPress Theme. After installing the theme, I’ll be following the below steps to add a sidebar of my liking in the theme:

Step 1 – Register your sidebar

The first thing that you’ll have to do is to get your custom sidebar registered using the default WordPress function: register_sidebar(). So, open up your theme functions file (i.e. functions.php() file). If this file doesn’t exist, create one before proceeding further.

Note: If you’re unable to find a functions.php file, you can choose to add the function call exactly where you like. But, in case your theme contains even a single sidebar, there’ll be at least one functions.php file that you’ll need to find.

Below is a simple code snippet that will add a sidebar in the Twenty Fifteen WordPress theme:

/**
 * Register two sidebars (widget areas).
 *
 * @since Twenty Fifteen 1.0
 *
 * @return void
 */
function mytwentyfifteen_widgets_init() {
 
  register_sidebar( array(
 
    'name'          => __( 'Main Widget Area', 'mytwentyfifteen' ),
 
    'id'            => 'sidebar-first',
 
    'description'   => __( 'Will come in the footer section of the website.', 'mytwentyfifteen' ),
 
    'before_widget' => '
 
<aside id="%1$s" class="widget %2$s">',
 
    'after_widget'  => '</aside>
 
',
 
    'before_title'  => '
 
<h3 class="widget-title">',
 
    'after_title'   => '</h3>
 
',
 
  ) );
 
 
 
  register_sidebar( array(
 
    'name'          => __( 'Secondary Widget Area', 'mytwentyfifteen' ),
 
    'id'            => 'sidebar-second',
 
    'description'   => __( 'Will be applied to posts and pages in the sidebar.', 'mytwentyfifteen' ),
 
    'before_widget' => '
 
<aside id="%1$s" class="widget %2$s">',
 
    'after_widget'  => '</aside>
 
',
 
    'before_title'  => '
 
<h3 class="widget-title">',
 
    'after_title'   => '</h3>
 
',
 
  ) );
 
}
 
add_action( 'widgets_init', 'mytwentyfifteen_widgets_init' );

Step 2 – Add (or display) the custom sidebar in your theme

So, now that you’ve successfully registered the sidebar, it is important for you to tell WordPress where the new sidebar should appear. Obviously, this is something that can vary depending on the type of WordPress theme you’ve installed and other considerations. However, I’m writing a code snippet that will add the sidebar under the title of a post.

<div id="secondary" class="sidebar-block" role="complementary">

	<div class="widget-area">

		<?php dynamic_sidebar( 'first-sidebar' ); ?>

	</div><!-- .widget-area -->

</div><!-- #secondary -->

The WordPress Twenty Fifteen theme will use the above code in the “sidebar-main.php” file for displaying the sidebar: sidebar-first. As you can see in the code above, I’ve made a function call to dynamic_sidebar. Wondering why? Well, in case not even a single widget is assigned to the sidebar in your theme, then you can achieve the same by using the below line of code:

<?php dynamic_sidebar( $index ); ?> 

In this code, index contains either the name or the id of the dynamic sidebar.

You can view your newly created sidebar underneath the Appearance → Widgets menu.

Adding widgets to the sidebar

As discussed previously, sidebars usually contain widgets that are tools that help to drag-and-drop elements in widget-ready areas (ideally a sidebar). Wondering why you should consider adding widgets to the sidebar?

A website is bound to grow with time, and hence, you’ll most likely need to add additional functionality that default WordPress widgets can’t. For instance, you may want to add widgets in the sidebar that help in displaying your choice of custom data.

After adding the new sidebars to the theme, you can begin with adding widgets. Here’s a piece of code that will help create custom widgets:

function dashboard_widget_function( $post, $callback_args ) {
echo "My Own Custom Widget";
}
function add_dashboard_widgets() {
wp_add_dashboard_widget('dashboard_widget', 'Dashboard Widget Example', 'dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'add_dashboard_widgets' );

First off, we create a function that will output the contents present inside the dashboard widget. Next, we are using the WordPress action_action hook to tell WordPress about our new custom dashboard widget. Besides, as you can see the add_dashboard_widget() function contains some arguments, such as:

• Widget slug: helps determine slug (i.e. URL) for your new widget.
• Widget title: it specifies the custom widget name.
• Display function: this parameter helps display the contents of the widget.

Let’s Wrap Up

Have you been thinking of displaying additional sidebars in your WordPress theme? Well, then this post will serve as a resourceful guide to help you understand the process of creating and adding sidebars in a WordPress site.