Martiniboy

Martiniboy's Developer Blog

Creating a new sidebar widget area

Written On 27 May, 2012 by admin
Share

The widget is probably one of the most useful yet least used (especially by myself)  function of WordPress.  These allow the user to add and remove functions on your site by simply dragging to and from.  If you have never used the WordPress widget, log into your WordPress site and under Appearance click on Widgets.

wordpress Widget

You should see a page like the image above, with all the widgets available on the left handside and in the right sidebar a list of areas that you can add the widgets to – most likely called Sidebar 1.  If you cannot see anything here not to worry, it means that your site is not widget-supported, we will soon get you up and running with your new dynamic widget sidebars/widget areas.

If you are seeing similar to above with just the one widget area to drag your widgets into you may be thinking how will this show different things on different pages.  I will be showing you how to create different Widget areas which you can to display in different places throughout your website.

To add another widget area go to your functions.php if you do not have one create it.

Generally the widget in the sidebar html is generated like the code below:

<ul id="sidebar">
<li class="widget widget_categories">
<h4>Categories</h4>
<ul>
<li><a href="http://www.martiniboy.co.uk">Example Category</a></li>
</ul>
</li>
</ul>

To create the Widget Area for this within your functions.php paste the following code

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'NAME OF WIDGETAREA',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h4 class="title">',
'after_title' => '</h4>',
));
?>

If you alrerady have code within your functions.php omit the opening and closing php tags above

Changing NAME_OF_WIDGETAREA to the name of your choice so you will recognize it within your widgets page, especially if you have lots of different widget areas.  For example if you were using one of my widget plugins – Jamie’s WP Arrow Newsletter Subscriber but you wanted this to show at the bottom of every page, you can either drag the widget to the botton of every widget or create a widget area for solely for this named “Newsletter” or if you have a few different widgets that you want at the bottom of every sidebar name “Sidebar Bottom” it is entirely up to you.

With the before_widget and after_widget this is what will appear before and after the widget – this can be changed to any markup that you would like it could be sourrounded by a div or a span, it depends on how you want to style the widget.  For my example with categories this is internal navigation so would most likely be surrounded with the nav tag so as a rule would style within an unordered list.

With the before_title and after_title, yep you guessed it this is what is displayed before and after the title, in this example Categories, in many widget examples and themes you may see this as a H2 tag, because Categories or any other widget which I am likely to use within this sidebar is not a search term, that I am trying to optimize for the site, ie. I would not expect someone to search Categories within google or any other search engine and my site to appear, so I have generoulsy given this a  H4 tag, which I probably could get away with using a span tag styled as a block element.  That will be covered in a later post.

So you have created your New WordPress Widget Area and you have dragged the widget that you want to display into the widget area and you look at the frontend of your site and nothing has changed.   This is becuase we have only created the area to add your widgets to now we will add it into your theme.

Depending on what theme you have you will most likely have a sidebar.php open that up and add the following:

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('NAME OF WIDGETAREA') ) : ?>

<?php endif; ?>
</ul>

And that is it, so if you wanted to create lots of diiferent widget areas for example one for you Blog page and one for you internal pages and one to show on both with your newsletter subscription widget in you would create as follows:

In the functions.php

<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Blog page',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>'),

register_sidebar(array(
'name' => 'Newsletter',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>'),

register_sidebar(array(
'name' => 'Non Blog Pages',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h4>',
'after_title' => '</h4>',)
) ) );  ?>

For the sidebar.php

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Blog page') ) : ?>
<?php endif;?>
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Newsletter') ):?>
<?php endif; ?>
 </ul>

For the sidebar-page.php

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Non Blog Pages') ) : ?>
<?php endif;?>
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Newsletter') ):?>
<?php endif; ?>
 </ul>

To create new sidebars or to show different content dependent on page come back and check my post on conditional statements.

Share