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:

Do you want to add high level security to your site free of charge? Then the answer is CloudFlare, check this tutorial – how does ClouldFlare works.

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() {
'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' );

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.

If you are a WordPress Developer then you should also know how to create and use WordPress Shortcode in your theme.

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.

You can increase the traffic to your website by optimizing the various areas like meta description, content, title and more. You can understand all these by reading the tutorial on SEO Terms that covers all of these things in details.

Share this article -



I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee