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.
- Go to Appearance > Widgets. Here you can see available widgets and widget ready areas in your theme.
Widget areasIf theme is not widget ready, you can widgetize just about every part of your theme. See how to widgetize your theme.
- Choose a Widget and either drag it to the sidebar where you wish it to appear
drag widgetOr click the widget, (select a destination sidebar if your theme has more than one) and click the Add Widget button.
Add Widget - Preview the site. You can see the new addition there.
- To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
Drag to re-arrange - To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.
Edit widget options - To save the Widget’s customization, click Save.
Edit widget options - 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:
- Register the widget area in functions.php
- 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' );
?>
New widget 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.
