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

Related Articles

How to Create Child-theme in WordPress Step by Step very easy

Video for who doesn’t like to read ;). And if you like the video then subscribe my channel and share this with others who has…

Add custom filter for searching post or users in WordPress backend

For this, two parts are important. Part 1: Adding select dropdown Below is the action by which we can add a new search filter for…

Install wp-cli on windows

WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, configure multisite installs and much more, without using a web browser.

So I am going to tell you short, simple and easy way that how to use wp-cli on windows system.

How To Create Custom Post Type In WordPress | Tutorial for Beginners

To create your custom post type, please follow these two steps. Step – 1 ( Open custom plugin’s any php file ) Open your plugin’s…

The last day ( છેલ્લો દિવસ )

Hi there, The last day, yes I am talking about the last day of the year 2016. Another year passed and I became 26 in…

Responses

Leave a Reply