Add a custom widget area to your wordpress theme

Add a custom widget area to your wordpress theme

There have been many occasions in recent months where I have been creating/editing WordPress themes only to find that there are just not enough widget areas. In some cases themes don’t include any widget support. I find myself constantly having to modify existing themes to add in custom widget areas.

This why I decided to create this post which will allow you to easily add custom widget areas anywhere on your WordPress website. All you need to do is follow the instructions below and copy/modify the code snippets and you will be well on your way to creating custom widget areas anywhere on your website.

Steps to setup your custom widget area

Functions.php

First things first, locate your functions.php file. This can be found from the WordPress dashboard by clicking on Appearance > Editor. Once here you will find functions.php along the right-hand-side. Once done simply add the following code into the file, changing the name and id appropriately.

if (function_exists('register_sidebar')) {
     register_sidebar(array(
      'name' => 'Sidebar Widgets',
      'id'   => 'sidebar-widgets',
      'description'   => 'Widget Area',
      'before_widget' => '<div id="one" class="two">',
      'after_widget'  => '</div>',
      'before_title'  => '<h2>',
      'after_title'   => '</h2>'
     ));
    }

If it helps then comment the code so you can easily find this code snippet in future.
Create Widget Area

With the first step completed you can now add the corresponding widget area to anywhere in your wordpress theme. You can for instance add the code to header.php or footer.php. the following code will enable you to do this:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Widgets') ) : ?>
      <?php endif; ?>

Be sure that whatever alterations you made to the code in functions.php (eg. to the name, id, etc) should also be made to this code in order for the two to talk to each other and work correctly.

There you have it, you now have a custom widget area in your WordPress site. If you wanted more than 1 widget area simply duplicate the code in the funtions.php file and change the id, name fields. Next add the second piece of code to the place in your website where you would like another widget area (again remembering to edit the code appropriately) and you are good to go.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>