Add a Sidebar in Two Steps

Adding a sidebar to WordPress is quite fast and easy, and it usually requires more work to style and position it than to technically add it to the theme. If you need to add a sidebar to a specific page or section of the website you need to know how the template hierarchy works. If you are not sure of which template file WordPress is using for a certain page or your theme has customized the template hierarchy then a plugin like What The File can be of great help.

I actually definitely don’t like the name ‘sidebar’ given to this element. That name is clearly due to historycal reasons because in origin a sidebar was always placed on either the left or right side (or both sides) of the page. This is not true anymore, many themes offers sidebars that stand…across the page, at the top, in the footer, into the header, everywhere. So, I prefer to define it ‘widget area’ which I find more appropriate but it’s just a matter of personal preference.

So, after you’ve identified which template file must be modified, the sidebar can be added in two easy steps:

  1. Register a new sidebar in the functions.php file
  2. Add the sidebar to the template file.

Let’s go in order.

Register a New Sidebar

Registering a new sidebar consists in telling WordPress what’s the name of the sidebar, and a few other parameters. You can find information about registering a sidebar in the codex website. Actually, there are two functions available, one is for registering a single sidebar, the other is for registering multiple sidebars. As you can imagine, they are almost identical. The problem with registering multiple sidebars are the limitations that you have in giving names and IDs to the elements. For that reason, most of the times theme developers prefer to use the single sidebar function multiple times to register multiple sidebars.

Here is how sidebars are registered in the Twenty Thirteen theme

/**
 * Register two widget areas.
 *
 * @since Twenty Thirteen 1.0
 *
 * @return void
 */
function twentythirteen_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
        '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', 'twentythirteen' ),
        'id'            => 'sidebar-2',
        'description'   => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
        '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', 'twentythirteen_widgets_init' );

The names of the fields in the array are self explanatory but if you want a detailed description you can refer to the codex pages that I have linked above.
As you can see, the function that registers the sidebars is then added to a WordPress action hook through the

add_action()

function. I haven’t written yet anything about action and filter hooks. This is one of the things that it took a while to fully understand, I will write a few articles in future about WordPress hooks.
Now that the sidear(s) is registered, we are ready for the second step: adding it to one or more templates.

Add the sidebar to the template file

Now that we have our sidebar, we want it to appear somewhere. Therefore we need a function to make the sidebar show up. Adding a sidebar is a consolidated practice, so it doesn’t make sense to reinvent the wheel. Let’s look for some already written piece of code to do the job.
This is taken from the Twenty Thirteen theme. The code checks if the sidebar is active throught thte function

is_active_sidebar()

to decide whether to print the html tags. If the sidebar contains any widget it is active, otherwise it isn’t.

<?php
/**
 * The sidebar containing the footer widget area
 *
 * If no active widgets in this sidebar, hide it completely.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
	<div id="secondary" class="sidebar-container" role="complementary">
		<div class="widget-area">
			<?php dynamic_sidebar( 'sidebar-1' ); ?>
		</div><!-- .widget-area -->
	</div><!-- #secondary -->
<?php endif; ?>

It’s common practice in many themes to show a few default widgets or a static sidebar if the main sidebar has not been configured by the user. To do this, we use the

dynamic_sidebar()

function.
This is the suggested use taken from the function description in the codex page.

<ul id="sidebar">
<?php if ( ! dynamic_sidebar() ) : ?>
	<li>{static sidebar item 1}</li>
	<li>{static sidebar item 2}</li>
<?php endif; ?>
</ul>

This is how the Responsive theme solves the problem.

<?php if( !dynamic_sidebar( 'home-widget-1' ) ) : ?>
				<div class="widget-wrapper">

					<div class="widget-title-home"><h3><?php _e( 'Home Widget 1', 'responsive' ); ?></h3></div>
					<div
						class="textwidget"><?php _e( 'This is your first home widget box. To edit please go to Appearance > Widgets and choose 6th widget from the top in area 6 called Home Widget 1. Title is also manageable from widgets as well.', 'responsive' ); ?></div>

				</div><!-- end of .widget-wrapper -->
			<?php endif; //end of home-widget-1 ?>

			<?php responsive_widgets_end(); // responsive after widgets hook ?>

If you wonder how this line of code

<?php if ( ! dynamic_sidebar() ) : ?>
...
<?php endif; ?>

could possibly show a sidebar, you’re not alone. No one among the WordPress community and coders has ever felt the need to explain this mistery. Until someone asked in the support forum, and finally even the laymen had the answer. Actually, it’s very obvious…once you read the explanation.


So, what do you think ?