flisterz:blog

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.

Disable IE’s Image Toolbar on your siteWordPress: Conditional statement using custom fields

View full archive ↑

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Mixx
  • DesignFloat

6 comments — Post a comment ↓

subscribe to comments

  1. syuxx —  

    06 Jun 08 / #

    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. Fath —  

    06 Jun 08 / #

    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 08 / #

    @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. Danny Foo —  

    07 Jun 08 / #

    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 08 / #

    @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. arejae —  

    22 Jun 08 / #

    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. :)

Pingbacks (2)

comment