How To Create Custom Widgets Area In WordPress | Tutorial for Beginners

To create your custom widget area, please follow these two steps.

Step – 1 ( Create a widget area in Backend )

Add below code to your theme’s functions.php or any other PHP file where you want to add code for your all custom widget area.

/**
* Create custom sidebars.
* Add this into your theme's php file where you want put all the custom 
* widget area code.
*/
function my_register_sidebars() {

    /* Register the 'primary' sidebar. */
    register_sidebar(
        array(
            'id' => 'after-page-content',
            'name' => __( 'After Single Page Content' ),
            'description' => __( 'This will shows widget after single page content.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'my_register_sidebars' );

 

Step – 2 ( Display widgets from custom widget area on frontend )

 

Add below code to your template file where you want to display the widgets from new custom widget area.

/**
* Add this where you want to display your widget area on frontend.
*/
if ( is_active_sidebar( 'after-page-content' ) ) {
    dynamic_sidebar( 'after-page-content' );
}

 

Sample code:

https://gist.github.com/BhargavBhandari90/8a5218d486d9842daf9a53bdfa1b0d3e

 

Video Explanation