What is a WordPress Widget

Basically all in built and custom created WordPress widget you can see under wordpress admin dashboard > Appearance (Left sidebar) > Widget option resided. See below attached screenshot.

Of course, WordPress accompanies a standard arrangement of widgets that you can use with any WordPress theme. WordPress widgets make it simple for you to add extra functions to your site through a basic simplified interface. By default, WordPress ships with a few widgets. They provide you with fundamental utility features and are viable with each WordPress theme.

How to create custom widget?

  1. Add widget register code into function file
  2. Go to Appearance (Left sidebar) > Widget and to see widget created add required contents.
  3. Get and display created widget into specific place/area on specific pages
1. Add widget register below code into function file

function tutsplus_widgets_init() {
	register_sidebar( array(
        'name' => __( 'First Footer', 'tutsplus' ),
        'id' => 'footer-111',
        'description' => __( 'The first footer', 'tutsplus' ),
        'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
 
    
    register_sidebar( array(
        'name' => __( 'Second Footer', 'tutsplus' ),
        'id' => 'footer-222',
        'description' => __( 'The second footer', 'tutsplus' ),
        'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
}
add_action( 'widgets_init', 'tutsplus_widgets_init' );

After added above code you can see Appearance (Left sidebar) > Widget > 2 widgets created with name First Footer, Second Footer respectively. You can add any contents paragraphs/title/search form etc.

3. Get and display created widget into specific place/area on specific pages

<footer>
	<div class="container">
		<div class="row">
			<div class="col-md-6">

                                //Mention same 'id' which is on above code below widget name 
				<?php dynamic_sidebar( 'footer-111' ); ?> 
			</div>
			<div class="col-md-6">

                                //Mention same 'id' which is on above code below widget name 
				<?php dynamic_sidebar( 'footer-222' ); ?>
			</div>
		</div>
	</div>
</footer>

When you add above code into footer file automatically all you added contents can see under footer.