How to create a Dynamic Widget Area in WordPress

Dynamic Widget Area in WordPress is the most popular feature of WordPress. Widgets are executable scripts which you can drag and drop in your sidebars.

You can not imagine a WordPress theme without widgets.

WordPress developers use widgets to add custom elements to the theme’s sidebars.

This article is for the absolute beginners who are just starting to build a WordPress Theme.

Before Starting

Before we dive into creating the dynamic widget area in WordPress, We assume you have a working theme or a plugin installed on your WordPress installation.

Registering Sidebar or Dynamic Widget Area in WordPress

You can register one or many sidebars or dynamic widget areas in WordPress. Copy and paste below code in your theme functions.php file.

function webwhistles_widgets_init() {

    register_sidebar( array(
        'name' => __( 'Post Sidebar', 'webwhistles' ),
        'id' => 'post-sidebar',
        'description' => __( 'Sidebar to appear on the post page.', 'webwhistles' ),
        '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' =>__( 'Page Sidebar', 'webwhistles'),
        'id' => 'page-sidebar',
        'description' => __( 'Appears on the static page template', 'webwhistles' ),
        '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', 'webwhistles_widgets_init' );

In above code, we have registered two sidebars named Post Sidebar and Page Sidebar.

We have also given the unique id for each sidebar andpost-sidebarpage-sidebar respectively. Description text can be used to tell users where these sidebars will appear in the theme.

The webwhistles is the name of the theme, you should replace with the theme name you are working on.

If you now visit the Widgets page from WordPress admin, you will see something like below.

Image Here

Displaying Dynamic Widget Area in WordPress Theme

So far we have only registered two sidebars. Users can drag and drop widgets from Appearance > Widgets page.

Now, you have to call those sidebars or Dynamic Widget Area in WordPress template files, so you can see them in action.

To add Post Sidebar to your theme, edit single.php and add below code in it.

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

To add Page Sidebar to your theme, edit page.php and add below code in it.

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

In the above example, we have successfully created two Dynamic Widget Area in WordPress. You can register more widget areas and show them anywhere in templates.

Leave a Reply