fbpx

How to Register & Display Sidebars in WordPress

[one_full last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””][fusion_text]Sidebar is a theme feature introduced with WordPress Version 2.2. This is one of the best features in WordPress that gave lot of flexibility in Theme and Dynamic Custom Site Development. Initially, sidebar were used only as a vertical column provided by a theme for displaying information other than the main content of the web page. But now sidebar usages has been expanded dramatically. It can be any part of your WordPress site and it’s an excellent way to display information.

The term Sidebar refers to two different things in WordPress:

  1. Dynamic sidebar: It is a dynamic widgetized area (container) where you can add single or multiple widgets from your WordPress Dashboard (Appearance => Widgets).
  2. Sidebar template: It is a WordPress template which display the content in the sidebar.

 

Registering a Dynamic WordPress Sidebar

First you need to register your dynamic sidebar to use the sidebar functionality. This part is very important and always use proper code to register your sidebar.

Registering a sidebar or multiple sidebar is fairly simple stuff. Most common approach is to add theregister_sidebar( $args ); function with widgets_init() action hook in your themefunctions.php file. The code shown below is an example of how to properly register a sidebar in WordPress.

<?php
/**
 * Register Sidebar
 */
function textdomain_register_sidebars() {

	/* Register the primary sidebar. */
	register_sidebar(
		array(
			'id' => 'unique-sidebar-id',
			'name' => __( 'Sidebar Name', 'textdomain' ),
			'description' => __( 'A short description of the sidebar.', 'textdomain' ),
			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
			'after_widget' => '</aside>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);

	/* Repeat register_sidebar() code for additional sidebars. */
}
add_action( 'widgets_init', 'textdomain_register_sidebars' );
?>

The register_sidebar() function accepts a single parameter named $args. $args is an array of arguments that define how the sidebar and its widgets should be handled.

  1. id: The id argument is the most important argument you can set for your sidebar. This unique ID will be used to assign widgets to a specific sidebar, and to call sidebar in your template. Each ID should be unique to the sidebar and must be in lowercase with no spaces in between. By default, WordPress sets this to sidebar-$i (where $i is a count of the registered sidebars).
  2. name: The name argument is the human-readable label for your sidebar used in the WordPress admin. Don’t make this name random and use proper name that you think best represents the name of your sidebar. It can be internationalized with __() function where the first parameter is the name and second parameter is theme textdomain.
  3. description: The description argument is the human-readable description for your sidebar used in the WordPress admin. It allows you to set a specific description for how the sidebar is used within your theme. This argument defaults to an empty string. It can be internationalized with __() function where the first parameter is the description and second parameter is theme textdomain.
  4. before_widget: The before_widget argument is a wrapper HTML element for widgets assigned to the sidebar. This argument has a couple of things that you should always set with specific code so that plugins can properly use them, which is the id (%1$s) and class (%2$s) attributes.
  5. after_widget: The after_widget argument is a closing wrapper HTML element for widgets assigned to the sidebar. You just need to close off the element you set for the before_widget argument.
  6. before_title: Most widgets display a title if the user sets one. The before_title argument is the opening wrapper HTML element for the sidebar’s widget titles.
  7. after_title: The after_title argument is to close the wrapper HTML element set in the before_titleargument.

 

Displaying Dynamic Sidebars

After completing the process of registering sidebar, you will need to call dynamic_sidebar() function to display it in your WordPress theme. The dynamic_sidebar() function takes a single parameter of $index, which can either be the sidebar’s id or name argument that you have set while registering sidebar. The best and safer was to call sidebar with id argument.

<?php 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; ?>

[/fusion_text][/one_full]