Using Wordpress Sidebar and Widgets in Your Site

Using WordPress Widgets In Your Theme

Using WordPress Widgets In Your Theme

What is a Widget

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

WordPress Widgets are very useful in making website rich with contents and also help in better navigation. 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

Widgets can be added to almost all areas of your WordPress theme like header, footer, sidebar and so on. To add a widget to a specific area, we 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 – we add a function ‘add_new_sidebar’ whose work is to create a new sidebar. We can give any name to this function. This function in turn calls a WordPress inbuilt function ‘register_sidebar’ which has the following arguments –

name – our widget area name, by this name it will be displayed in the ‘Appearance>Widgets’ section of the WordPress CMS.

id – give it 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 complete WordPress Sidebar creation. Now in the WordPress CMS go to ‘Appearance>Widgets’, there you will see our new sidebar ‘New Widget Area’ on the right side of the page. Now open it by clicking ‘New Widget Area’ or the down arrow on its right side. Now drag and drop any available widget from the left side inside our newly created sidebar. Finally click save button. Note that you can add more than one widget in the sidebar.

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

Adding Widgets To Sidebar

Adding Widgets To Sidebar

2. Adding WordPress Sidebar In Template

Now we have to call the sidebar in any template of our choice like header.php, footer.php, index.php, page.php etc. Below is the code which does this work –

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

In this way we can create any number of WordPress Sidebar and use them with widgets to provide great features in our WordPress theme. You can also add new widgets in ‘Appearance>Widgets’ section by activating different WordPress plugins –

Share this article -



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