Tag: widget area

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

    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