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:

<?php
/**
* 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>',
)
);
/* Repeat register_sidebar() code for additional sidebars. */
}
add_action( 'widgets_init', 'my_register_sidebars' );
/************************** Display on frontend ********************************/
/**
* Add this where you want to display your widget area on frontend.
*/
if ( is_active_sidebar( 'after-page-content' ) ) {
dynamic_sidebar( 'after-page-content' );
}

view raw
sidebars.php
hosted with ❤ by GitHub

 

Video Explanation

How to Use Widgets in WordPress | WordPress | Tutorial for Beginners

I’ve made a video for this tutorial. Because that’s the easiest way to show how WordPress widgets work. And this is specially for the beginners. So please watch the video carefully and I am sure you will definitely clear about WordPress widgets.

And if you like the video then subscribe my channel and share this with others who want to learn WordPress.

How to use WordPress Hooks – Filters – Part 2 | WordPress | Tutorial for Beginners

I’ve made a video for this tutorial. Because that’s the easiest way to show how WordPress filter work. And this is for the beginners. So please watch the video carefully and I am sure you will definitely clear about WordPress filters.

And if you like the video then subscribe my channel and share this with others who want to learn WordPress.

How to use WordPress Hooks – Actions – Part 1 | WordPress | Tutorial for Beginners

I’ve made a video for this tutorial. Because that’s the easiest way to show how WordPress actions work. And this is for the beginners. So please watch the video carefully and I am sure you will definitely clear about WordPress actions.

And if you like the video then subscribe my channel and share this with others who want to learn WordPress.