Become Wordpress Professional - Your Ultimate Wordpress Guide

Tuesday, 26 March 2013

How to Create a widget area in wordpress theme

What is custom widget area?

Before we start up with creating custom widget areas, you might want to know what are wordpress widgets? Custom widget area is used to create a slot for widgets to be placed over them in the admin widgets area. There are a number of widgets that can be placed over these slots such as sidebar widgets for post categories, tag clouds, navigation, search, etc To appear, like in sidebar, in footer, in header, hence where ever their particular slots are defined. Custom widget area provides an easy-to-use drag and drop feature to wordpress users, where user can simply drag widgets from the available widgets to the widget area where they want the widget to be displayed.

You can find "Widgets" under the tab "Appearance" in Admin panel: Appearance -> Widgets

How to enable widget area in wordpress theme

Custom widget area is enabled from function.php that is available in the themes folder.
Add the following code in function.php to enable/register widget area in the wordpress theme:
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>'
     ));
    }

How to add widget area in wordpress theme

Once you have enabled the function in function.php you can make any area as a widget area within a wordpress theme. Add the following code to the area ( sidebar, footer, header ) where you want the widget to to make a slot and add widget to it later from widgets setting panel:

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

NOTE: If you want more then one area to be widgetized at the same time, then you have to register sidebar in function.php more then once with different names and id's

Now that you have enabled the widget area as well as created a slot for the widgets to be placed in, you can go to Appearance -> Widgets in admin panel and add the widgets to the slot you have just created.

Feel free to to ask for assistance in the comments box below.

18 comments:

  1. Thank you for this post. Would you mind confirming where exactly in the functions.php file the first lot pf code should go? Is it right at the beginning of the code. My code starts like this:

    <?php

    /**

    * @package WordPress

    * @subpackage Default_Theme

    */

    Thank you.

    ReplyDelete
    Replies
    1. @Anna Sandler,

      You are most welcome. Yes you can just copy and paste the first lot of code at the beginning of the code just like this:
      <?php

      /**

      * @package WordPress

      * @subpackage Default_Theme

      */

      // PASTE CODE HERE

      Just make sure not to mix up the code that you paste with the code that is already inside the file because that might cause more problems. Thanks again.

      Delete
  2. Well... the tutorial has been precise and worked for me. I added two widget areas on http://www.mushroom-inc.com. Those are the two banner ad spaces for horizontal ads.
    Is it possible explain the meaning of dynamic_sidebar and it's importance?

    Thank you so much.

    ReplyDelete
  3. hats off buddy, you made my day :)

    ReplyDelete
  4. I tried this and nothing happened! Any advice?

    ReplyDelete
    Replies
    1. Hi, I hope that you followed the steps exactly as mentioned in the tutorial above, if you require further clarification for any step in detail, please let me know. Thankyou!

      Delete
  5. Hello! This worked for me just fine. How do you center the widget area on the header? It appears at the very top and I need it to have margins, or centered vertical alignment.

    ReplyDelete
    Replies
    1. Hi Mandy, you can always style widget areas using stylesheet.

      Delete
    2. Thank you, this has been very helpful, but can you explain a bit on how to locate the widget and play with sizes and location? thank you

      Delete
  6. Hello Farsab, you're is the easiest article on this useful topic on the web! Thank you. It'd be great if you only would add how to make the widget area horizontal. Thank you.

    ReplyDelete
  7. This worked perfectly! Thank you so much for sharing :)

    ReplyDelete
  8. It does not say where the widget should be placed?

    ReplyDelete
    Replies
    1. This post will help you understand where the widgets can be placed: http://www.wpreads.com/2013/03/understanding-wordpress-widgets.html

      Delete
  9. I get the first part, easy. Where I'm a bit lost would be the second part. Do I add that bit to header.php? I'll keep playing around.

    Thanks for the article.

    ReplyDelete

Please Avoid Spamming. Comments will be moderated before they are published.