testbox

Widget

WordPress has a feature where users can add widget(s) on their sidebar. Default widgets such as Recent Posts, Recent Comments and Meta Tags is kinda useful and make things much easier for users, and also to WP theme designers.

If you think widgets are only for the sidebar, you are wrong. Basically, you can put widgets anywhere within your site, as long as you know how to edit the template files. It is not that difficult though. Here’s how to do it.

Plan your widgetized area(s)

So you want to place widgets anywhere on your template. First you have to plan how many widgetized areas that will be used and where to put them. For example, in the following image, we want to have 4 widgetized areas in our template.

Template widgetized

However, you will have to know xhtml and some css knowledge to do this correctly.

Functions.php

If your theme doesn’t have this functions.php file, you can create it. In this file you will find this fragment of code which will be used to ‘register’ the areas.

<?php
if ( function_exists('register_sidebars') )
register_sidebars(4);
?>

Number ‘4′ actually referring to how many sidebars you have in your theme. In our case, we will not refer this as ‘the sidebar’ bacause we actually wanted to put this widget anywhere we want, not just ’sidebar’. So, change the number to any number you want.

You can check in your WP Dashboard > Design>Widgets and click on the drop down menu to see that you now have 4 sidebars.

Sidebars

But how to know which sidebar is which?

Create the ’sidebars’ file.

Now you’ve registered how many ’sidebar’ a.k.a widgetized areas, we need to create them, one by one.

Let say we want to create the file for area #1. Create a .php file, for example, topcolumn.php which will be used to display some announcements or as an introduction area. Put this fragment of code inside it.

<ul id="topcolumn">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
      any code goes here
<?php endif; ?>
</ul>

Actually you don’t really have to put any code between the code, just leave it blank, it still going to work. Number 2 there is referring to the sidebar number, which we saw in above step (in the drop down menu). Change the number to any number you want, not to exceed the number of registered ’sidebars’

Repeat the same thing for other ’sidebars’. Use different file name, different ul id and its own sidebar number.

Include the ’sidebars’

Depending on your theme structure, locate where you want to place the ’sidebars’. To include it, use this fragment of code:

<?php include (TEMPLATEPATH . '/topcolumn.php'); ?>

Make sure you put it in the correct place to successfully include the file. I heard that ‘Trial and Error’ is the best method. :)

Fill them up

The text widgets is the most flexible one. You can use that to paste your advertisement codes or anything.

Good luck.

Share/save this: Delicious | StumbleUpon

13 comments

  1. i hate this wordpress new widget system (wp 2.5 & 2.5.1). sometimes it keep deleted the text widget automatically after i click changes. huhu. T___T

  2. Very useful article, Flisterz. But I rarely use widgets in my theme. Tapi still useful, if my clients want me to widgetized their themes. :)

  3. flisterz - 07 Jun 2008

    @syuxx : yeah the old one is better I guess.

    @Fath: haha I don’t even use any widget on this site. Yeah most of the time its for the client or free WP theme. :)

  4. Awesome. Always wanted to know how to create them widgets. :P

    I don’t get syuxx problem. Is it a bug of some sort? You could cover that in your next article.

  5. flisterz - 08 Jun 2008

    @Danny Foo : Glad to help :)
    I’m not sure if its a bug or not, haven’t experienced it myself – I’ve read that some ppl are having the same problem. But I still think the old versions of WP have a better and easier widget control though.

  6. thanks for the info.
    perhaps sidebar tuh kena ubah nama since kita boleh letak widget tuh not only by the side kan.
    it’s suppose to be anywhere. :)

  7. Hi there,
    I have already seen it somethere…
    Have a nice day

  8. Thanks, this was really helpful to me. Am now proud owner of a lovely new widget area!

  9. I continually look over blogs in similar field, but I never visited your blog. bookmarked and i’ll be your constant reader. Thanks

  10. I’ve been searching for days on moving my widgets..but is there a way to have them on the page?
    Its kinda hard to explain, but I want to set up a new page (for example philtyler.info/siteinfo) and on this page have some popular widgets like popular posts, most commented etc. Things that are neat, but I don’t want crowding my website.
    Is this possible?
    Thanks!

  11. Thanks for the tutorial, sidebars have been a pain for me as of late.

  12. Very useful and concise. Thank you.


Leave a comment