Creating Dynamic Sidebars (widget-ready theme) in WordPress

Post image of Creating Dynamic Sidebars (widget-ready theme) in WordPress
Posted in Wordpress Development on 17 April 2009 8 comments

What is dynamic sidebar?

Dynamic sidebar is “dynamic”, it simply means that your sidebar can be customised easily by adding / removing widgets in admin panel. If your theme has dynamic sidebar, you can called it a widget-ready theme.

Step-by-step guide to create dynamic sidebar

1. Make sure the HTML codes for your (every) widgets follow a certain format

This is an example:

<div class="widget">
    <h2>Categories</h2>
      <ul>
        <li>Cat #1</li>
        <li>Cat #2</li>
      </ul>
  </div>
 
<div class="widget">
    <h2>About</h2>
    About me About me About me
  </div>

In the above example, we can see that every widget is surrounded by <div class=”widget”> and its title is surrounded by <h2> tags.

2. Look for functions.php

Second, look for functions.php in your theme folder. Create one if it is not there.

3. Register the dynamic sidebar

You need to let wordpress know that your theme has a dynamic sidebar. Place these lines of codes into your functions.php:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}

The function uses an array that contains 5 items.
Name – Name of your sidebar
before_widget – the html tags that wraps an invidual widget, eg: div. Put only the opening tag here.
after_widget – if your “before_widget” uses a <div> tag, you should use </div> here
before_title and after_title – html tags surrounding the widget’s title

4. Registering the dynamic sidebar : Examples

If your sidebar look like this:

<div class="rightsidebar">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>
 
  <div class="widget">
    <h2>Categories</h2>
      <ul>
        <li>Cat #1</li>
        <li>Cat #2</li>
        <li>Cat #3</li>
      </ul>
  </div>
 
</div><!--/rightsidebar-->

This is how you register your sidebar. (NOTE: ignore the div that wraps the whole sidebar first, we are currently dealing with codes for every single widget)

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}

Another example: If your sidebar look like this :

<div class="rightsidebar">
 
  <div class="widget_top">
    <div class="widget_title">Recent Posts</div>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>
  <div class="widget_foot"></div>
 
 
  <div class="widget_top">
    <div class="widget_title">Categories</div>
      <ul>
        <li>Cat #1</li>
        <li>Cat #2</li>
        <li>Cat #3</li>
      </ul>
  </div>
  <div class="widget_foot"></div>
 
 
</div><!--/rightsidebar-->

This is how you register your sidebar.

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '<div class="widget_top">',
'after_widget' => '</div><div class="widget_foot"></div>',
'before_title' => '<div class="widget_title">',
'after_title' => '</div>',
));
}

5. Making the sidebar dynamic

Open sidebar.php. Lets say we have this in our sidebar.php :

<div class="rightsidebar">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
      </ul>
  </div>
 
  <div class="widget">
    <h2>Categories</h2>
      <ul>
<?php wp_list_categories('show_count=1&title_li='); ?>
      </ul>
  </div>
 
</div><!--/rightsidebar-->

Now we are going to make it dynamic. Leaves only the sidebar wrapper <div> there.

<div class="rightsidebar">
 
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>
<?php endif; ?>
 
</div><!--/rightsidebar-->

Please note that the word “sidebar” inside the brackets in !dynamic_sidebar(“sidebar”) is the name you used when registering the sidebar.

It’s done. Your theme is now widget-ready. However, you might want to make it better.

5. Prepare your theme for users that don’t use widgets

Minority of people don’t use widgets in WordPress, we have to include some basic features for them.

<div class="rightsidebar">
 
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) :
// these codes will be run if they don't use any widget
 
// I take the sidebars codes from above example
?>
<div class="widget">
    <h2>Recent Posts</h2>
      <ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
      </ul>
  </div>
 
  <div class="widget">
    <h2>Categories</h2>
      <ul>
<?php wp_list_categories('show_count=1&title_li='); ?>
      </ul>
  </div>
 
<?php endif; ?>
 
</div><!--/rightsidebar-->

Look, we have now included 2 basic features for them: Recent Posts and Categories.

6. So, your theme has 2 or more sidebars?

Easy, lets register all of them in functions.php :

Assume you have 2 sidebars with same format :

if ( function_exists('register_sidebars') ) {
register_sidebars(2, array('name'=>'Sidebar%d',
'before_widget' => '<div class="widgetobj">',
'after_widget' => '</div>',
'before_title' => '<div class="widgettitle"><h3>',
'after_title' => '</h3></div>',));
}

Please note that:
- The function used here is register_sidebars instead of register_sidebar.
- Change the number “2″ to the number of sidebars your theme has.
- The %d will be auto replaced by numbers. If you register 2 sidebars, they will be known as Sidebar1 and Sidebar2 (in this example). You are going to use the names later.

This is what we have in sidebar.php :

<div class="sidebar_1_wrapper">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>  
 
</div><!--/sidebar_1_wrapper-->
 
<div class="sidebar_2_wrapper">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>  
 
</div><!--/sidebar_2_wrapper-->

Now we make them dynamic :

<div class="sidebar_1_wrapper">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar1") ) : ?>
	<?php endif; ?>
</div><!--/sidebar_1_wrapper-->
 
<div class="sidebar_2_wrapper">
  	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar2") ) : ?>
	<?php endif; ?>
</div><!--/sidebar_2_wrapper-->

Please note that:
- The name of sidebars you registered were used here.
- Follow step 5 again to prepare your sidebars for users that don’t use widgets
- If your sidebars do not have same design/format, register them seperately (as in step 3) and make them dynamic like the example just above this.

That’s all

That is all for this tutorial. Please point to me any part that is confusing so that I can make this tutorial better.

Thank you for reading.

 

Posted by Zen on 17 April 2009 • 12,900 visits 8 comments
Tags : , , , ,


or Subscribe to specific category only :




  - 8 Comments


mercime says:

Thank you for your article. I’ve set up dynamic sidebars /texareas before in different ways but your post was a refreshing and intelligent reference. Thanks also for your plugins and themes, I have bookmarked your site and will be pointing it as reference for others :-)

kolombaru says:

thank you, I have long time to find an article like this, now I have bookmark this site as reference too,

Damian Dawber says:

This is very thorough… a very handy resource to have sat in my Delicious bookmarks.

Thank you

DG says:

Hello…

Thanks for this article, its really help me. But I wanna ask to you what’s different from register_sidebar and dynamic_sidebar?

1. I have theme with this code in function.php :

if ( function_exists(‘register_sidebars’) )
register_sidebars(3);

2. And this code in sidebars.php :

 

With all due respect, can you help me to explain the meaning of the all code above? If they’re different with code on your article above?

I will waiting for your response, thanks a lot.

DG says:

Code in sidebar.php :

<!–
 
–>

Geoff says:

Thank you for this. I found it very helpful.

Norman144 says:

Well written article. thanks!

Trackbacks

  1. wp-popular.com » Blog Archive » Creating Dynamic Sidebars (widget-ready theme) in WordPress | ZENVERSE

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»