How-to: Create Multiple Dynamic Sidebars for WordPress Widgets
In this post we will learn how to create multiple dynamic sidebars for WordPress widgets which will in turn help you customize your WordPress Theme even more.
Follow the under mentioned simple steps:
Edit functions.php for Multiple Dynamic Sidebars
The functions.php in a theme usually comes with a code to add at least one sidebar widget. We will now edit this functions.php to add multiple sidebar to the WordPress theme. All we need is to use the following function.
|
1 2 3 |
<?php register_sidebar( $args ); ?> |
The $args parameter supplied to the register_sidebar can have following values:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $args = array( 'name' => __( 'Sidebar name', 'theme_text_domain' ), 'id' => 'unique-sidebar-id', 'description' => '', 'class' => '', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>' ); ?> |
The parameters to the function are described below:
args: (string/array) (optional) Builds Sidebar based off of ‘name’ and ‘id’ values.
Default: None
- name – Sidebar name (default is localized ‘Sidebar’ and numeric ID).
- id – Sidebar id – Must be all in lowercase, with no spaces (default is a numeric auto-incremented ID).
- description – Text description of what/where the sidebar is. Shown on widget management screen.
- class – CSS class name to assign to the widget HTML (default: empty).
- before_widget – HTML to place before every widget(default: ‘<li id=”%1$s” class=”widget %2$s”>’) Note: uses sprintf for variable substitution
- after_widget – HTML to place after every widget (default: “</li>n”).
- before_title – HTML to place before every title (default: <h2 class=”widgettitle”>).
- after_title – HTML to place after every title (default: “</h2>n”).
In the example below you can see that two sidebars are registered with the name sidebar1 and sidebar2. The code now looks like this –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php if ( function_exists('register_sidebar') ) register_sidebar(array('name'=>'sidebar1', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h4>', 'after_title' => '</h4>', )); register_sidebar(array('name'=>'sidebar2', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h4>', 'after_title' => '</h4>', )); ?> |
After writing this code the the functions.php if you now visit your widgets area you can see the two sidebars appearing there. Now you can drag and drop widgets of your choice to both the sidebars and customize the options. Remember to Save Changes or else all customization is lost.
Add Dynamic Sidebars to WordPress Template
Now we need to place the code in the WordPress Theme template wherever we want the sidebars to appear in our template.
Sidebar1 code goes like this
|
1 2 3 |
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : endif; ?> |
Sidebar2 code goes like this
|
1 2 3 4 |
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : endif; ?> |
Save the template and watch your widgets go live. You can add any number of dynamic sidebars in any combination to your theme.
