How to create Widgets in your WordPress Theme?

How to create Widgets in your WordPress Theme?

What is a Widget

Widgets are small blocks in WordPress that perform specific function like showing recent posts, post categories, navigation, search, etc. All WordPress theme comes with a number of premade widgets which you can see in Appearance > Widgets area.

WordPress Widgets are very useful in making the website rich with contents, and they also help in better navigation. They can be added to almost all areas of your WordPress theme like header, footer, sidebar and so on. It is always advisable to use at least some widgets in different areas of your WordPress Website.

Adding WordPress Widgets to WordPress Theme

WordPress Widgets cam be added very easily to your theme by following the given 2 steps:

1. Create WordPress Sidebar in Functions.php

To add a widget to a specific area, you have to first create a WordPress Sidebar in functions.php file.

Just add the below code to your theme functions.php file –

/*New Widget Area*/
function add_Widget_area() {
register_sidebar(array(
'name' => 'New Widget Area',
'id' => 'new-Widget-Area',
'description' => 'Our new widget area',
'before_widget' => '<ul class="archives"><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h2><a>',
'after_title' => '</a></h2>',
));
}
add_action( 'widgets_init', 'add_Widget_area' );
/*End/

Explanation – Here I have added a function add_new_sidebar whose work is to create a new sidebar. You can give any name to this function. This function in turn calls a WordPress inbuilt function register_sidebar which has the following arguments:

  • name – it is the widget sidebar area name, by this name it will be displayed in the Appearance > Widgets section of the dashboard.
  • id – gives sidebar a unique id.
  • description – any text description you want to give.
  • before_widget – html to place before the widget.
  • after_widget – html to place after the widget.
  • before_title – html to place before the widget title.
  • after_title – html to place after the widget title.

This will create a WordPress Sidebar. Now in the WordPress dashboard go to Appearance > Widgets, there you will see this new sidebar called New Widget Area on the right side of the page.

Open it by clicking the down arrow on its right side. Now drag and drop any available widget from the left side to inside this newly created sidebar. Finally click save button.

Here in the picture I am showing how to add search widget to our sidebar using WordPress drag and drop feature.

Adding Widgets To Sidebar

Adding Widgets To Sidebar

Note that you can add more than one widget in the sidebar.

2. Adding WordPress Sidebar In Template

Now I have to call the sidebar in any WordPress Template of my choice like header.php, footer.php, index.php, page.php etc.

Below is the code, which you need to add to any template, where you want to show the sidebar:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('new-Widget-Area') ) : endif; ?>  

In this way I can create any number of WordPress Sidebars and use them with widgets to provide great functionality in my WordPress theme.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.