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.

26 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. Which file do you add widget area too?
    I manage to register the widget. But now i need to define the area for the widget. Which file do i do it at?

    ReplyDelete
  3. 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
  4. hats off buddy, you made my day :)

    ReplyDelete
  5. Hi,
    I tried this method of adding widgets to my site so that an editor could change some simple titles in my footer by using the text widget.

    It works as far as the text being inserted into the front-end of the site, but when I leave the widgets page and come back my text widgets disappear, so they cannot be edited like they should by an editor. But does not disrupt or change my output in the html.

    However when I go to the widgets page and try to add a text widget to one of the locations, the other two locations then are removed from the front-end of my site, and only the new text can be seen in the front-end.

    Any ideas?

    ReplyDelete
  6. 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
  7. 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
  8. 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
  9. This worked perfectly! Thank you so much for sharing :)

    ReplyDelete
  10. Hi, great article. So are you saying the only way to have two widget areas at once is to use register_sidebar() twice?

    ReplyDelete
  11. 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
  12. 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
  13. Great Tutorial... Thanks a lot!!!!

    ReplyDelete
  14. I want to make a widget area of full width below the slider area either it's possible with this code.

    ReplyDelete
  15. hi, in order to add code to the function.php file should i create a customfunction.php file and upload via FTP as with the custom.css?

    Also, as with the custom.css do i only add the code as above or should i recreate the whole functions.php file?

    ReplyDelete
  16. Also, i have another question please. i want to create two small widget areas in a large one, is this possible? Thanks

    ReplyDelete
  17. Hi, you some how made it nice and easy, whereas others left me confused and without a working outcome.
    I do however have one question: How do I apply this to a custom page template - I needed a page that was different to the standard theme, but how do I connect this new template page with my new widget. I hope that makes sence.

    Best regards,

    Warwick

    ReplyDelete

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