How to Widget-Enable WordPress Themes in 3 Easy Steps

By Posted 2007 Updated   BloggingTutorialsWordPress

WordPress Widgets are an amazing way to customize your blog besides wordpress plugins. How to widgetize your wordpress theme? I use a heavily modified version of the Blix wordpress theme, which does not support widgets…

First thing to know is that Widgets are part of WordPress core since WordPress 2.2 and you do not need to install any Widgets plugin to add widgets on your blog.

Step 1: Create functions.php

No such file existed in our theme, so we simply create a new functions.php and FTP it to the theme folder. Here is what exactly you need to put in the file

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

This will work only if you use the default markup of wordpress with h2 as sidebar titles and an unordered list like this

<ul>
  <li>
<h2>Sidebar Title</h2>
  <ul>
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link2.html">Link 2</a></li>
  </ul>
  </li>
</ul>

Customize functions.php
But we do not use the default markup of wordpress. For SEO benefits, we use h4 for sidebar titles and do not use the ul and li unordered lists in this way. So instead of the above code, we change the function.php file in this way to suit our custom wordpress template.

<?php if ( function_exists('register_sidebar') ) 
register_sidebar(array( 
'before_widget' => '', 
'after_widget' => '', 
'before_title' => '<h4>', 
'after_title' => '</h4>', 
)); ?>

The code titles are self explanatory. before_widget and after_widget – we need no special code , so we leave it empty. before_title and after_title we use the h4. This modification overrides the default markup and now supports our custom template. You can modify it as per your own site web design css.

Step 2: Add Widgets to Dynamic Sidebar

This functions.php code will help widgetize your wordpress theme and support a single dynamic sidebar. Now when you go to your wordpress dashboard under Presentation, you will see a new item called Widgets.

Wordpress Widgets

In the Sidebar Arrangement, You can drag and drop widgets onto your sidebar from the list of preinstalled widgets like Tag Cloud, Recent posts, RSS feeds, Recent comments, Calendar, Archives, Categories, Search, Links easily.

Wordpress Widget Types

Do not forget to save your changes and the widget will be updated. You can drag and drop as many widgets as you like. Clicking on the widget will pop up a set of options which you can modify to further customize the widget.

Step3: Add Dynamic Sidebar to Template

Now you need to place a php code in the sidebar to enable a dynamic sidebar that that will function to display the saved widgets. Paste this code anywhere while editing sidebar.php.

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

Save the changes and the new sidebar will now display your widgets! That all there is to it.

See the sidebar at work on our tumblelog (that is a recent posts and RSS widget!). Now go and find new widgets to add to your blog.

Update: Here is a tutorial on how to add multiple dynamic sidebars to wordpress template and support multiple combinations of widgets.

Updated Code for WP3

The latest versions of WordPress already have widgetized sidebars enabled in the core. So you just need to call the dynamic sidebars.

In functions.php, add this code

function quickchic_widgets_init() {
register_sidebar(array(
'name' => __( 'Sidebar 1', 'quickchic' ),
'id' => 'sidebar-1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
}
add_action( 'init', 'quickchic_widgets_init' );

In sidebar.php you need to add this code to call it

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php endif; ?>


41 comments on “How to Widget-Enable WordPress Themes in 3 Easy Steps

  1. Interweb Millionaire says:

    It’s also really easy to add multiple sidebars to a theme. You can simply add the following line after “register_sidebar(array(“:

    'name'=>'Sidebar 1',

    You can add multiple sidebar sections to functions.php, for example, “Sidebar 1”, “Sidebar 2” and so on. You then need to call specific sidebar in your template file like so:


    JP

  2. QuickOnlineTips says:

    JP – I have been using lots of multiple sidebars and its a great feature. The multiple sidebars tutorial is coming soon…

  3. Nirmal says:

    This is a simple method everyone can follow, I too had added the third sidebar to my blog previously using this method.

  4. Nathaniel Buck says:

    Thanks for this simple and clear tutorial. It was just what I was looking for.

  5. allenooi says:

    I’m using the theme called Iridium. When I click the widget, the below message appear: No Sidebars Defined You are seeing this message because the theme you are currently using isnt widget-aware, meaning that it has no sidebars that you are able to change. For information on making your theme widget-aware, please follow these instructions. Is your steps will fix this? I actually tried to create a function.php like you mention. But when I clicked on the widget, the above message still appear. Do you know how to fix this? Thanks.

  6. QuickOnlineTips says:

    It is functions.php and not function.php
    Also you need to place it in the theme folder you are currently using.

    • Rick says:

      This was a major problem for me, I had been trying to make sidebars work. Then I read this.

      function.php <- I had this… :)

      functions.php <- Changed to this and it worked like a charm.

  7. Jonathan Lumb says:

    Thanks! Great little guide – my theme is now completely widgetized…

  8. aivan monceller says:

    I have a widget ready template. But whenever I activate my widgets, It overrides my sidebar.php and removes the background. What should I do to preserve the background of sidebar.php and append the widgets added?

    • Ryan says:

      I have the same problem. I’ve added a bunch of widgets to my sidebar by editing the code, but can’t drag and drop widgets from the Widget section of my dashboard. When I do, everything else on my sidebar gets wiped out.

      Any ideas how to get around this?

      I’m using the monochrome theme by monolab …

  9. Fun Free Games says:

    This tutorial really helps me, now my blog is widget enabled!

  10. BGdula says:

    Thank you, thank you, thank you!

  11. stylish tycoon says:

    Thanks for the tips, but I’m very new to CSS. Where do I create the functions.php page? Do I need custom css? Or anyone of the available themes from WordPress will do?

  12. Prabhjeet Singh says:

    very clear article.

  13. Jeramiah says:

    Yeah great article, got different ones called up in page templates and a 3 col footer widget !
    so sidebars change content depending on the page content.

    just a huge question though, lost my original styling for the sidebar do i need to re-style them some how through style.css? how would i do that?

    I have named them
    home
    blog
    gallery ect..

    any help would be great !

  14. sergio says:

    Sidebars were added to the theme and I can select widgets for them, but the changes aren’t saved.

    Error is following:

    Warning: Cannot modify header information – headers already sent by (output started at /home/content/q/w/e/000000/html/wp-content/themes/Sumo/functions.php:21) in /home/content/q/w/e/000000/html/wp-includes/pluggable.php on line 850

    • Expert Blog Design says:

      I think you have a blank space at the top of function.php. Please remove and keep us updated here.

      Thanks.

  15. Jonathan says:

    Thanks a lot for this information, I just started with WP today and was disappointed when I saw that widgets wouldn’t work with the theme I had chosen. Well, it’s fixed now thanks to you!

  16. Harold says:

    Thank you so much for this post…It is really helpful..

    My sidebar problem was solved in less that 10 minutes…thank you!:D

  17. nomad says:

    Thank you for this post… I used it instrustions, my own widget work :)

  18. blogger tips says:

    That was indeed a good post for beginners…many years to come dude..keep going…

    Your best friend ramesh

  19. luis says:

    so now is too nice that
    now how can i add a widget in header tempalte website?
    because i can addd widget only to right and left

    how can i put one in header page ??
    for example i would like to add language translator widget in header .

    cheers.
    L.

  20. Mathias says:

    I’ve have the same problem as sergio, with exactly the same mistakes.. I have NO spaces or anything in functions.php – what the heck is wrong?

  21. jagoane says:

    how to not using drag and drog in wordpress?

  22. Bruce says:

    Thanks for the code snippets above, as these are gonna make implement some sidebar widgets heaps easier..

    Many thanks

  23. Lynn Fooks says:

    I’m new to wordpress and trying to hit the ground running with the functions.php file to add widgets to a happy holidays theme. Thank you all for the help.

  24. suhail says:

    How to make a widget placeholder other then the sidebars. Like i want to place a widget placeholder after the body tag. How can i do that?

  25. alvinthethird says:

    I gave this a shot, and this error msg popped up:
    error: syntax error, unexpected $end in /home/alvinthe/public_html/blog/wp-content/themes/nami/sidebar.php on line 46

    I have a feeling its a simple fix, but im not sure what.

  26. George says:

    Hi there.

    Please help. I want to make a website and use different website for diferent pages, but I did not know how to use. For example. I want to use for sidebar2 to make a picture that will continue on the from the content on the sidebar 2 but dont know how to make the page…

    Thank you for your help !

  27. Wordpress Programmer says:

    Thanks and keep your work. Useful to many of them.

  28. Todd Halfpenny says:

    Hey there,

    Good article and very clear. Can I also propose the use of the Widgets on pages plugin which allows you to add/remove and manage sidebars via the admin pages. These sidebars can then be added to the theme with 1 simple template tag.

    Hope this is of some use.
    Todd

  29. Techshares says:

    you are really great . i got benefit from you

  30. Muskie says:

    Why don’t you use the unordered list? I did this sometime ago but stayed with H2 even though I know it might hurt my SEO. Lately I’ve been finding too many plugins even official ones like WordPress Importer barf with non-standard WordPress installs. It is getting harder and harder to go against the grain after all these years of using WordPress. I’m making a version of my theme with unordered list and one without I think.

  31. ugo says:

    Thank you so much I did it and it worked.

  32. Anita-Clare Field says:

    I have purple Aura theme and I have tried your suggestion and it wont work, any other suggestions?

  33. Hadi Nahavandi says:

    thanks for your helping,it was very good.

  34. cindy says:

    superb!!!!!!!! i just have to comment to say thank you. this is the easiest, most effective tutorial ever. i read your guide and implement on my site at midnight while being on a stage of half-sleeping, eyes half-closing. I copy, paste, ftp and voila, it WORKED…
    can’t believe it.

    Thanks.

  35. Jackie says:

    This is the first time I am using WP. I am using WP / Jobroller. It allows widgits down the right side, just like this page. How do I get it to allow widgits down the left side or is that possible?

Leave a Reply

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




Next Article »
css.php