• Mark in Ma.gnolia
• Add To Delicious
• Stumble it!
• 

Widgetize Your Wordpress Themes Part III of III

• Published by: christopher
• September 28, 2008

Welcome to the third and last tutorial at JungleJar teaching you how to widgetize your Wordpress Themes. In this article we’ll be talking about arrays, but don’t worry. This is easy stuff, folks.

Let’s take a look at the basic structure of using arrays for our sidebar.

1
2
3
4
5
6
7
8
9

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
    ));
?>

The above code is to be inserted into your functions.php file.

You’ll want to create a CSS class in order to position your widget appropriately in most cases. So, for this example, I’m going to create a CSS class called ‘widget’, which can be viewed below.

1
2
3
4

.widget { 
 margin-top:10px;
 margin-bottom:10px
}

Basically all this does is bring your widget down 10 pixels and makes sure that the content below your widget is also 10 pixels from the bottom of the widget. We’ll insert this CSS element into our array like this…

1
2
3
4
5
6
7
8
9

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '',
        'after_title' => '',
    ));
?>

Now we’re just left with the title. For this I would recommend using a h3 or h4 HTML tag. First, let’s style one..

1
2
3
4

h3.widgetitle {
 padding-bottom:5px;
 font-family:Arial, sans-serif
}

The code above simply adds some padding to the bottom of the h2 tag so that we have space in between our title and our widget. It also tells our web browser that we would like to use the Arial font from the sans-serif family.

Now to insert the CSS element into our array..

1
2
3
4
5
6
7
8
9

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgetitle">',
        'after_title' => '</h3>',
    ));
?>

If you’re registering more than one sidebar, you can make this happen by using register_sidebars(x) where x is the number of sidebars you’d like to create. So, the final code would look something like this, if we wanted 5 widget-ready sidebars..

1
2
3
4
5
6
7
8
9

<?php
if ( function_exists('register_sidebars(5)') )
    register_sidebar(array(
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgetitle">',
        'after_title' => '</h3>',
    ));
?>

And to call our sidebars, we would add the following code to the sidebar’s php file..

1
2
3

<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar(x) ) : ?>
<?php endif; ?>

Remember to replace x with the number of the sidebar you’re calling.

Would you like to use names instead of numbers? Easy, just add the following to your functions.php file..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'index sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgetitle">',
        'after_title' => '</h3>',
    ));
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'page sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgetitle">',
        'after_title' => '</h3>',
    ));
?>

Notice the addition to the array: name. You can call your sidebar whatever you wish. Now to call your sidebar, we’ll do so by its name like so..

1
2
3

<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar("index sidebar") ) : ?>
<?php endif; ?>

That’s it! Now go make those Wordpress themes widgetized!

• Part 1 / 3 of this tutorial.
• Part 2 / 3 of this tutorial.

Leave a Reply