How To Wigetize A WordPress Theme

With newer versions of WordPress being released with widgets, it is no longer necessary to download widgets from Automattic and install the plugin on your current Wordpress install. Modern versions of WordPress already come widgets ready. However, there are some situations where you find a WordPress theme that you really like, but soon discover that its not widgets ready. This article will teach you how to Wigetize a WordPress theme so that you can enjoy all the neat and robust features includes with Wordpress widgets.

You will know fairly quickly if your current theme isn’t widgets ready. You will see a screen like this:

no-sidebars-defined

Your screen will say, “No Sidebars Defined”. It will prompt you to visit a site called Automattic for instructions on how to widgetize your WordPress theme. Don’t worry, making a WordPress theme widgets ready isn’t difficult at all. I would recommend that you make a back up of your current theme before you do any modifications to the files within. Below are some easy and simple to follow instructions that will help you make your current WordPress theme widgets ready.

If you want detailed instructions on how to do this, I would visit the site titled Automattic. However, their page tend to make a mountain out of a mole hill. The hard part of widgets has already been done. With WordPress adopting the technology and including widgets into their program, widgeting themes couldn’t be any easier.

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar();
?>

and…

<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar() ) : ?>

is the magic code that transforms your boring and featureless theme into something fun, exciting and packed full of options. It really doesn’t get much easier. Here are the steps to wigetizing your current WordPress theme.

Step One: Make a backup copy of your current theme.
Step Two: Open your functions.php file and add the follow code to the top of the page and then save and upload the file.

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar();
?>
Step Three: Open your sidebar.php file and add this line of code directly below the <ul> tag. If your sidebar doesn’t use unordered lists, then you will need to read Automattic for further instructions. Keep in mind that using unordered lists have become the standardized way to code WordPress themes. You might want to consider using a different theme.

<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar() ) : ?>
Step Four: Still working on the sidebar.php file. Scroll down to the bottom until you see the closing </ul> tag. Directly above it, add this line and then save and upload your file.

<?php endif; ?>

That is it! Pretty simple? More to come. In a future article I will show you how to widgetize multiple areas of your current theme. Perhaps you have two sidebars, maybe you want to widgetize your footer or even your header. Any section of your blog can become widgetized. It’s just a matter of adding the right code in the right spot. Keep an eye out for some more posts about widgetizing other areas of your WordPress theme in the near future.

GarryConn

Written by Garry Conn

September 4th, 2007 at 9:55 pm

Posted in Money Tips

Want To Get a Free Blog?

To get started, tell me your name and email address:

27 Responses to 'How To Wigetize A WordPress Theme'

Subscribe to comments with RSS or TrackBack to 'How To Wigetize A WordPress Theme'.

Great article! Thank you! Time to time I really was in this situation – found nice theme but didn’t used it because it was not widgetized…

IngaOz

5 Sep 07 at 4:37 am
I am glad it helped. The process overall is really pretty simple. And with WordPress already having widgets migrated in, more than half the battle is over.

Garry Conn

5 Sep 07 at 3:16 pm
Hi Gary,

I was happy to find your site. You made widgitizing the ocean mist theme so easy. Unfortunately, I have no functions.php file.

Here are the files I have:

Stylesheet
Main Index Template
Header
Search Results
Sidebar
Archives
searchform.php
Single Post
Comments
Page Template
404 Template
Footer

and index.php

Is there any way to follow your directions without a functions.php file?

Thanks,
Brian

Brian

6 Sep 07 at 9:00 am
Great article, I just Dugg it: http://digg.com/design/How_To_Wigetize_A_WordPress_Theme

Jeremy Steele

6 Sep 07 at 9:50 pm
I’m with Brian, same files no function.php

Boo

18 Sep 07 at 5:52 pm
Brian…you need to create your own in the same directory as where your sidebar.php file is located. Just create the file and post in the necessary details.

Nin

19 Sep 07 at 5:11 am
Thank you so much. After hours of diligent surfing, I found the perfect theme.
After it was installed I realized it was not widget ready. Now it will be.

THANK YOU! THANK YOU! THANK YOU!

Brennan Kingsland

22 Sep 07 at 6:11 am
Doesn’t work. I followed your instructions step by step but still get the same message as your top screenshot.

Hopeful Spirit

28 Sep 07 at 9:24 am
You are the best. I can’t tell you how many confusing articles I tried before I found this one. I’m in the same boat as Brennan -finally i found MY theme and not widgitized. Bummer. I am new to all this but you have given the courage to keep trying. Thanks again, and have a wonderful day.

Carol Jones

2 Oct 07 at 12:00 pm
[...] to set up your theme to support widgets, I recommend you check out this post by Garry Conn entitled How To Widgetize a WordPress Theme. In his post, he provides a detailed walk through of how to widgetize your sidebar for a 2-column [...]

How To: Add Widget Support to Your WordPress Theme

9 Oct 07 at 3:38 am
All right, I ran into troubles too.

I adjusted the sidebar.php file per instructions.

Having no functions.php file, I created one and pasted in your code.

After doing this, my blog simply came up with an empty page. No content.

Clearly we’re missing something here.

Does anyone want to assist me?

Peace,
Gene

Gene Steinberg

20 Oct 07 at 3:57 pm
I get this error:

Parse error: syntax error, unexpected $end in /home/nouk/public_html/wp/wp-content/themes/PFM/sidebar.php on line 82

What shall I do?

Thanks,
Nouk

Nouk

3 Jan 08 at 6:43 am
Nouk – just had the same problem. You probably left out the at the end of the sidebar file. At least, that’s what I did!

tacitus

16 Jan 08 at 2:56 pm
Thanks Gary for this useful tutorial . Really helpful to me, since I’ve a project that need to be widgetized. Thanks …

upstylo

27 Feb 08 at 3:11 am
YOU ARE MY NEW FAVORITE PERSON!! I spent hours tweaking a theme that was supposed to be widget ready for a lady only to find out that it wasn’t when I got done with the design work… I thought I was going to have to go through and do it all over again when I came across your blog… in 5 minutes I was able to save myself hours!! Thank-You so much!!!

Christina Seay

3 Jun 08 at 6:01 pm
Hi Gene Steinberg
I had the same problem but I was fixed when I put the code all in one line. so I looked like this:

Alex

9 Jun 08 at 8:09 pm
what plugin are you using to rate your posts? i’ve been looking for one forever.

charles

22 Aug 08 at 12:38 pm
Hi Garry,

Thanks for your great article. It works!!
I will copy this article to my blog and translate to my language.
THANKS MAN!

@Gene Steinberg
I got same problem, my blog simply came up with an empty page. No content.
I’ve fixed it.
When we copied scripts above and pasted it,

will automatically changed to

(’register_sidebar’) will automatically changed to (.register_sidebar.)
you must change the dot “.” to “‘”

this happen too for this script

Hope this fixed your problem.

Check out bod’s last blog post..Ganti IP Address di Plesk Database

bod

30 Aug 08 at 9:08 pm
Hi Garry,

I like the idea, but on the Benevolence theme, it works to make the widgets show up in the Design>Widgets menu but it doesn’t implement it into the theme when you actually look at the blog.

Just wondering if you have any ideas that would specifically help with this theme.

Thanks,

BruceZ

brucez

26 Sep 08 at 10:18 pm
this is a very good info for the wordpress user..thanks garry

Richie

5 Nov 08 at 12:54 am
I just sorted out the problem with what’s posted above. Your UL tags need to be nested inside of DIV tags. I followed these directions exactly but kept having the message that my theme doesn’t identify widgets correctly. Then I looked at another theme that DID work and the sole difference I found was that its UL tags were nested inside DIV tags, with a DIV ID of “sidebar”. Once I did that, it worked perfectly!

Here’s an example that WORKS:

JasonGW

19 Nov 08 at 2:50 pm
OK that WOULD have shown you an example that works, except for the fact that the code tags apparently aren’t working here…

JasonGW

19 Nov 08 at 3:02 pm
Jason email me the code and I will add it into your comment for you. You can email me at garryconn@gmail.com

Thanks for the help.

Garry Conn

19 Nov 08 at 6:00 pm
I’ve noted one other problem that occurred on my server. When editing code through a shared host account that uses cPanel (I use http://www.imhosted.com), for some reason when you save it makes changes to the code inside the PHP functions, getting rid of the ‘ marks and replacing them with a numeric code. I got around this by just doing my editing in Notepad on PC and then uploading that file (I’m sure Linux users could do the same in VI or their editor of choice). Those go in untouched for some reason.

JasonGW

20 Nov 08 at 2:04 pm
FYI Garry, I emailed you the code

Check out JasonGW’s last blog post..Waiting ’til

JasonGW

20 Nov 08 at 5:52 pm
Thanks for this Gary. I’ve been looking for something like this to link to for awhile.

Brian Campbell

23 Feb 09 at 4:45 pm
[...] the official post from Automattic, as well as one from Gary Conn. So, if you’re using one old-school theme without widget support, and you don’t know [...]

Add Widget Support to You’re WordPress Blog

10 Mar 09 at 7:35 pm