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.

BEST PLUGIN for WordPress Developer – ACF Settings page | Part – 2

This video shows how to create a settings page for ACF fields in the #WordPress site. SUBSCRIBE NOW: https://lnkd.in/gs3i6Me Links: Code to add submenu: https://gist.github.com/BhargavBhandari90/0342f92192aab75bf853b77cb7ef2bd6…

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…