Creating a Dynamic Sidebar with Conditional Tag for Your Sidebars

[pthumb][/pthumb]Sometime when dealing with dynamic content or sidebar, you need to change how or what the content or sidebar will show when visiting a certain pages or posts.

WordPress Sidebar Widgets allowed you to achieve this with the core dynamic sidebar. The common code for adding sidebar widgets into your WordPress theme will be like this.

a) Register a sidebar

[php]function mytheme_widgets_init() {
register_sidebar(array(
‘name’=>__(‘Sidebar’, TEMPLATE_DOMAIN),
‘id’ => ‘sidebar’,
‘description’ => __( ‘Sidebar widget area’, TEMPLATE_DOMAIN ),
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widgettitle">’,
‘after_title’ => ‘</h3>’,
));
}
add_action( ‘widgets_init’, ‘mytheme_widgets_init’ );[/php]

b) Create the dynamic sidebar location

this usually will be in your WordPress theme sidebar.php
[php]<?php if ( is_active_sidebar( ‘sidebar’ ) ) : ?>
<?php dynamic_sidebar( ‘sidebar’ ); ?>
<?php endif; ?>[/php]

Now in wp-admin->appereance->widgets, you will see a ‘Sidebar’ widget area in right hand side.
[sc:adsense300 class=’adscenter’]
But what if you want to have dynamic sidebar that change if you’re on WordPress pages or single post?

In this tutorial, i will show how to create dynamic sidebar with conditional tag for pages and single post. First you need to register a sidebar for pages and single post.

a) Register a sidebar, page sidebar and single sidebar

[php]function mytheme_widgets_init() {
register_sidebar(array(
‘name’=>__(‘Sidebar’, TEMPLATE_DOMAIN),
‘id’ => ‘sidebar’,
‘description’ => __( ‘Sidebar widget area’, TEMPLATE_DOMAIN ),
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widgettitle">’,
‘after_title’ => ‘</h3>’,
));
register_sidebar(array(
‘name’=>__(‘Sidebar for Pages’, TEMPLATE_DOMAIN),
‘id’ => ‘sidebar-page’,
‘description’ => __( ‘Sidebar for Pages widget area’, TEMPLATE_DOMAIN ),
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widgettitle">’,
‘after_title’ => ‘</h3>’,
));
register_sidebar(array(
‘name’=>__(‘Sidebar for Single Post’, TEMPLATE_DOMAIN),
‘id’ => ‘sidebar-single’,
‘description’ => __( ‘Sidebar for Single Post widget area’, TEMPLATE_DOMAIN ),
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widgettitle">’,
‘after_title’ => ‘</h3>’,
));
}
add_action( ‘widgets_init’, ‘mytheme_widgets_init’ );[/php]

b) Add this to top of sidebar.php

[php]<?php
if( is_page() ) {
$dynamic_sidebar = ‘sidebar-page’;
} elseif( is_single() ) {
$dynamic_sidebar = ‘sidebar-single’;
} else { //else default sidebar
$dynamic_sidebar = ‘sidebar’;
}
?>[/php]

c) Use this code to call the dynamic sidebar location

[php]<?php if ( is_active_sidebar( $dynamic_sidebar ) ) : ?>
<?php dynamic_sidebar( $dynamic_sidebar ); ?>
<?php endif; ?>[/php]

that’s it, now when you’re inside WordPress Pages, the dynamic sidebar will use ‘sidebar-page’ widget and when in single post, it will use the ‘sidebar-single’ widget.

Scroll to Top