How to Widget-Enable Wordpress Themes in 3 Easy Steps
November 22nd, 2007Wordpress 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.
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.
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.
Subscribe RSS feed
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
JP – I have been using lots of multiple sidebars and its a great feature. The multiple sidebars tutorial is coming soon…
This is a simple method everyone can follow, I too had added the third sidebar to my blog previously using this method.
Thanks for this simple and clear tutorial. It was just what I was looking for.
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 isn’t 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.
It is functions.php and not function.php
Also you need to place it in the theme folder you are currently using.
Thanks! Great little guide – my theme is now completely widgetized…
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?
This tutorial really helps me, now my blog is widget enabled!
Thank you, thank you, thank you!
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?
very clear article.
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 !
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
I think you have a blank space at the top of function.php. Please remove and keep us updated here.
Thanks.
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!
Thank you so much for this post…It is really helpful..
My sidebar problem was solved in less that 10 minutes…thank you!:D
I’ve added the RSS feed widget on my Wordpress page. Can someone explain how this works?
Thank you for this post… I used it instrustions, my own widget work :)
That was indeed a good post for beginners…many years to come dude..keep going…
Your best friend ramesh
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.
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?
Thx, its simple and work for my trial theme GREENDOG-11.
next steps, following mutiple sidebar tutorial.
how to not using drag and drog in wordpress?
Thanks for the code snippets above, as these are gonna make implement some sidebar widgets heaps easier..
Many thanks