How To Add Dynamic Sidebars To WordPress

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Website Facebook Twitter LinkedIn Instagram YouTube

Widget areas (aka Dynamic Sidebars) are an essential part of working with WordPress.

Most WordPress themes come with one or two dynamic sidebars that allow drag and drop modules to be placed in them. These widget areas are found in the admin area under Appearance > Widgets. These default widgets are usually controlled by the sidebar.php template in your WordPress theme.

Some themes may have several widget areas for the sidebar area and the footer area. Each of these widget areas is a dynamic sidebar. What if your theme does not have these extra widget areas, and you want to add them?

Dynamic Sidebars can be added to your theme in the functions.php file, using the register_sidebar() function. In this tutorial, we will add a dynamic sidebar named new_sidebar. You may name your sidebars according to your needs.

<?php
add_action( 'widgets_init', 'my_register_sidebars' );

function my_register_sidebars() {

/* Register dynamic sidebar 'new_sidebar' */

    register_sidebar(
        array(
        'id' => 'new_sidebar',
        'name' => __( 'New Sidebar' ),
        'description' => __( 'A short description of the sidebar.' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
    )
    );

/* Repeat the code pattern above for additional sidebars. */

}

?>

Let’s analyze what’s going on here. register_sidebar() takes an array of arguments (the default value is $args).

id

The id should be unique for each sidebar. If you do not set an id manually, WordPress defaults to naming the sidebars sidebar-1, sidebar-2, sidebar-3… and so on for all registered dynamic sidebars. Not setting a unique id means that if a plugin or child theme registers additional sidebars, the count gets thrown off, and this can lead to styling problems, among other things.

You can also call dynamic sidebars in your theme using the get_sidebar() function, using either the id or name, but it is generally safer to use the id. In our example, we would write:

  'id' => 'new_sidebar',

Name

The name is the reader friendly identifier for each sidebar—each name displays above its sidebar in the admin view. Most of the time, the sidebar name corresponds to its location in the layout (like Store Sidebar, Upper Sidebar, Footer Area 1, Right Footer Area, etc.).

  'name' => __( 'New Sidebar' ),

Description

The description appears in smaller text below the name in the admin view. It tells whoever is working on the site what the sidebar is intended to do.

  'description' => __( 'A short description of the sidebar.' ),

Before Widget, After Widget

These are the opening and closing tags that contain the widget. These can be whatever element you wish, but a block-level element such as a div or aside is good for clearing elements above and below the widget. WordPress defaults to a li.

The one thing you should not alter is the id="%1$s" class="widget %2$s" in the before widget argument. This snippet of code is there to make sure that plugins work correctly with your sidebar widgets.

  'before_widget' => '<div id="%1$s" class="widget %2$s">',
  'after_widget' => '</div>',

Before Title, After Title

These are the opening and closing tags for the title of each widget in your sidebar. WordPress defaults to h2.

  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>'

Using A Dynamic Sidebar In Your Theme

WordPress uses a function called dynamic_sidebar() to call your sidebar into your theme. You may use either the id or name to identify which sidebar you want, but id is more reliable.

  <div class="sidebar new-sidebar">
      <?php dynamic_sidebar( 'new_sidebar' ); ?>
  </div>

If you do not name which sidebar you want to call, WordPress will call the first one that is registered in your theme.

Display Nothing If Your Sidebar Is Empty

We can use the function is_active_sidebar() to check if there are any widgets active. Like dynamic_sidebar(), this function accepts one parameter, $index. Be sure to use the ID of the sidebar in this parameter.

<?php if ( is_active_sidebar( 'new-sidebar' ) ) : ?>
    <div class="sidebar new-sidebar">
        <?php dynamic_sidebar( 'new-sidebar' ); ?>
    </div>
<?php endif; ?>

Display Default Content If Your Sidebar Is Empty

This time, instead of not displaying the empty sidebar, we add an else statement to run if there are no widgets active in the sidebar. You can place anything you like here, even another function.

<div class="sidebar new-sidebar">
   <?php if ( is_active_sidebar( 'new_sidebar' ) ) : ?>
      <?php dynamic_sidebar( 'new_sidebar' ); ?>
   <?php else : ?>
      <!-- Custom HTML or code goes here -->
   <?php endif; ?>
</div>

Using Sidebar Templates

The WordPress function, get_sidebar() grabs the template file sidebar.php and uses it for page layout. But you can take the code for any dynamic sidebar, put it in a template file and call it with get_sidebar() as well.

Simply name the template sidebar-[name of sidebar here].php. For our example, this would be sidebar-new-sidebar.php. Calling it in your theme would look like this:

  <?php get_sidebar('new-sidebar'); ?>

A theme can always be extended to include dynamic sidebars in the traditional sidebar or footer areas. Many theme foundries are already doing this, making it easier for end users and developers to quickly customize a theme.

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.