WP Theme Lesson #6e: Widgetizing Sidebar
- Filed under: Tutorials
A widget-ready sidebar or widgetized sidebar is almost a standard for themes catering the WordPress 2.0 and 2.1 series. But first, what is widgetizing? Widgetizing simply means getting the Sidebar ready for the Widget plugin; this plugin allows you to easily re-arrange features within the Sidebar.
For example, instead of having to modify the Sidebar codes to switch the positions of Categories and Archives, you simply drag the Archives and Catgories listings to their positions.
Step 1: Create functions.php file
Start a new Notepad, leave it blank, save it as functions.php. Copy everything in functions.txt to your functions.php file. Save and close the functions.php Notepad.
Just for review, you should now have four files in the theme folder named, “tutorial.”
Step 2: Widgetize the Sidebar
Type the following codes directly after the sidebar’s first <ul> tag.
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
Type this one directly before the </ul> tag:
<?php endif; ?>
Save the index.php file. You will not see any changes on the web page until you’ve installed the Widget plugin. We’ll do that later.
Follow this WordPress Theme Tutorial Series from the beginning.
[…] learned how to widgetize the sidebar during the tutorial series, but I never showed you how to turn on the widget plugin. Here it […]
Thank you and I will learn it step by step!
An fyi in case anyone else runs into this….
When I first typed in the code for the functions.php file, I had put put an extra line after ?> which caused the following error when I tried to log into my blog.
Warning: Cannot modify header information - headers already sent by (output started at /…../lilacflower_org/html/wp-content/themes/tutorial/functions.php:6) in /…..virtual/lilacflower_org/html/wp-login.php on line 12
Once I removed the extra line, everything was right as rain
a little confused about this step on what we did, was getting an error but i fixed it
I had to leave the search code above the first ul and the code for the widgets
nada
my sidebar is already widgetized but i need to ad adsense to the widget.. any ideas how i can get that done?
thanks
You can start a text widget and place the adsense in there.
thanks a ton!
Wow! That was easy! I am using an old theme that wasn’t widget ready. Thanks to your simple tutorial, it now is widgetized. What can I say, except thank you for such clear instructions. Reading how to do it at the wordpress site confused and intimidated me. And I’m not easily intimidated. But clear instructions are at a premium there. Thanks again.
I have wp 2 and the sidebar is already widgetized and i was wondering if i still have to download the plug in, i already checked at my admin panel and it looks like i can drag widgets and install them….
i have a similar problem although with widgets. when i did this tutorial everything went fine until i finally included the widget code then everything went haywire.
i had installed some plugins prev. i tried deactivating it. i got the error given below. hence i removed it (by cut-copy -pasting it in a separate dir). then i tried refreshing the page. it works fine although i do not see the title of the page being published.
also now when i tried activating the basic plugin (askimet) i again the same error given below. can anyone help me?
Warning: Cannot modify header information - headers already sent by (output started at C:\wamp\www\wordpress_test\wordpress\wp-content\themes\new_horizon\functions.php:8) in C:\wamp\www\wordpress_test\wordpress\wp-includes\pluggable.php on line 331
oops! sorry didn’t see lilacflower post (i am dumb that way :-)).. everything works now !
Yay, I finally managed to widgetize the sidebar, and I can’t tell you how happy I am! Thanks so much.
I can’t seem to get my sidebar widgetized… I’m using Wordpress 2.2, but when I go to the Widgets tab on the Presentations page of the Admin menu, I get an error that says my theme isn’t widget-ready and gives me a link. I tried following the instructions on the link to no avail.
You need to follow the lesson on this page to fix up your sidebar.
Ah Thanks Small Potato. I had followed the lesson and was getting frustrated, checking over and over, but I forgot to check functions.php and of course, that’s where the typo was. I was just going to leave a comment to tell you I figured it out, so I don’t need a reply, when I saw your reply…
So, sorry for wasting your time, but I really do appreciate all the work you put into these tutorials. I already have a good understanding of CSS so I probably don’t need to go further, but I appreciate the help with the php stuff.
An alternate, which doesn’t get flagged as an error in EasyEclipse for PHP (an IDE) is:
?php if (!function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?
Hi SM,
First, thanks for the tutorial. It is awesome.
Second, I’m having trouble widgetizing the sidebar. I get this line of code at the top of my page:
?php if ( function_exists(’register_sidebar’) ) register_sidebar(); ?>
Any ideas?
lol whoops SP
[…] http://www.wpdesigner.com/… […]
hi potato! thanks for this great tutorial.
i have design template according to your “How to code wordpress theme” and the template have 2 sidebar. i have add widget for the 1st sidebar, but for the second sidebar i couldn’t add. if i add your widget code at the second sidebar, there will produce the same widget from the 1st sidebar. and at the admin panel only shows Sidebar 1 that could drag widget into it.
how do i make both sidebar widgetize? thanks..
kodin - go the the wpdesigner support forums. i think there’s info on how to use multiple widget-ready sidebars there. do a quick search at the forums.
Is this gonna work in my wordpress version? (2.2.1) It seems you dont need to download/activate plugins anymore, they said its already in the core. Under widgets it says “No Sidebars Defined” though. I’m confused.
Btw, been following your tutorial and they’re really great! I’m stucked at this part though.
Silly me. forget my post above. It works now
Thanks for the great tutorial! Moving on to the next tutorial 
I’ve a problem, when I finish follow this tutorial,,,, part of my sidebar is disapear. Meta content was not found.
please use the forums for help
Thanks for this tutorial, I am learning now to code a wordpress theme.
@SP:
Thanks so much for this tutorial! I have learned so much and am eager to finish the rest. I hope you don’t mind me also commenting on another post. I know this is not the right place but I had a similar problem and there may be more of us…
@Kurocama:
Make sure that your theme sidebar arrangement (access from the wp_admin page) is set to the default setting. I had a similar problem - the archives section would disappear after I completed this tutorial. I customized it a while back to omit archives and never changed it back. This may be why your meta information is not there.
[…] further reading is available at Automattic and WPDesigner. There are some other “shorthand” versions of the code I did on those […]
Thanks God! I finally create my first widget-ready sidebar! Thank you dude!
thanx,,,,,,(-___________- )