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,,,,,,(-___________- )
Thank you man.I fixed my problem .You are number 1:::::::)
[...] out this site for how to Widgetize a Sidebar – it’s easier than you would think. I’m not a genius with code but I got it figured out. Ignore [...]
Hi,
Hi,
I’m having a problem with widgetizing my page. When I add the lines
and
in the appropriate places (as described above) my searchbar, calendar, pages, categories, blogroll, and meta dissapear from my sidebar. That is, my sidebar only has “Archives” on it. Why is this happening and what can I do to have it show these things?
Thanks,
Isabelle
I didn’t realize those lines would dissapear:
?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
and
?php endif; ?>
This is the good part. I’ve walked through the tutorial up to now so I could understand what is going on and I wanted to widgetize the theme I am using. I uploaded the functions.php from the tutorial and all of a sudden my widgets were working! The problem I have now is that all the formatting/appearance of the original sidebare is gone. When I go to the sidebar.php file in the WP dashboard the code looks like it always has so I don’t understand how to have my original appearance plus the widgets. It seems that making changes in the sidebar.php will have no effect.
Ok, So now I’m kinda figuring it out but I’m a little confused too. Now that I’ve wigetized my sidebar the widgets are working. However, the RSS feed icon has an orange border around it. I figured out that the icon being used is in the wp_includes/images folder. I uploaded a prettier one but it still has the orange boarder. Going to the page source from the view menu I can see the code that is putting the orange border around the icon but I can figure out where it is calling the data from. How do I figure out where to edit this code? The just says sidebar but as per my above post the sidebar.php is obviously not where this code is being called from.
[...] WPDesigner » WP Theme Lesson #6e: Widgetizing Sidebar [...]
[...] [ ?????? | wpdesigner.com ] [...]
Should it be:
I found this on Automatic ( http://automattic.com/code/widgets/themes/ ), and it works for me rather than:
Anyway, thanks for your tutorial, really good job.
Should it be:
I found this on Automatic ( http://automattic.com/code/widgets/themes/ ), and it works for me rather than:
Anyway, thanks for your tutorial, really good job.
“”
Sorry, I don’t know how to input PHP codes.
[...] WP Theme Lesson #6e: Widgetizing Sidebar oleh Small Potato diterjemahkan oleh Mochammad [...]
Hi , Don’t understand clearly Widgetizing Sidebar . When i put the
These code generated some new feature like Recent Posts , Tags & recent comments which is not in your tutorial . will you explain about it please .
Lastly this is a great tutorial . Thanks a lot
fSelGwUvdqNKo
Just a note, for pure PHP files (like functions.php) the final ?> is NOT required. If it is left out, the headers already sent error will not occur. The PHP interpreter will automagically close out the PHP script at the end of the page.
This is NOT the case for files where HTML and PHP are combined. The PHP script will need its closing element in this case.
Getting rid of the closing tag (and doing it consistently) will make for fewer errors in the future when the functions.php file is edited and added to.