How to Use WordPress Widgets

WordPress Widgets are independent content blocks designed to provide  specific function. Widget is a simple and easy-to-use way to arrange the various elements of your sidebar content  or any widgetized areas of your theme. Widgets enable non-technical users to customize your theme without having to change any code.

There are so many different widgets available. WordPress by default comes with several widgets that can be seen on on the WordPress Administration Appearance > Widgets panel. See a list of Top wordpress sidebars widgets. Note: You can install new ones by searching the WordPress Plugins Directory. See how to install worpress plugin.

How to use Widgets

To use/display widgets, you need to add widget areas into your Theme. Most WordPress themes are widget ready. It would always be a good idea to select a theme that is Widget Ready. If  theme is not widget ready, you can widgetize just about every part of your theme. See how to widgetize your theme.

1. Go to Appearance > Widgets. Here you can see available widgets and widget ready areas in your theme.

   

   If  theme is not widget ready, you can widgetize just about every part of your theme. See how to widgetize your theme.

2. Choose a Widget and either drag it to the sidebar where you wish it to appear

   

   Or click the widget, (select a destination sidebar if your theme has more than one) and click the Add Widget button.

   

3. Preview the site. You can see the new addition there.
4. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.

   

5. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.

   

6. To save the Widget’s customization, click Save.

   

7. To remove the Widget, click  Delete link in the configuration options as show above.

How to add Widget area to your theme

You can widgetize just about every part of your theme. See how to widgetize your theme. Widget can be added to the header, footer, and elsewhere in the WordPress design and structure. There are 2 main parts to  add widget area in your theme:

1. Register the widget area in functions.php
2. Insert widget area in the WordPress Theme

#1: Register widget area

Open the functions.php file from the WordPress Theme Editor . Add the following block of code. In this code, we are registering one sidebar. We have given a name(e.g.’Home right sidebar’) to identify them on Widgets screen and  id(e.g.’home_right_1′) is used to call it in theme file to display.

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function wpl_theme_widgets_init() {

	register_sidebar( array(
		'name'          => 'Home right sidebar',
		'id'            => 'home_right_1',
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="rounded">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpl_theme_widgets_init' );
?>

After registering Dynamic Sidebars, New widget area appears in Appearance » Widgets screen. Users can drag and drop widgets into these sidebars.
#2: Insert widget area in the WordPress Theme

You need to  insert the following block of code in your template like sidebar.php /footer.php or any other template file where you want to display the widget.

<div id="home_right_1">
<?php
if(is_active_sidebar('home_right_1')){
dynamic_sidebar('home_right_1');
}
?>
</div>

In this example code, we have used sidebar id(‘home_right_1) to call the sidebar. Change the sidebar id to display another sidebar.