ZENVERSE » widget http://zenverse.net Design and Web Development Sun, 13 May 2012 15:26:20 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Creating Dynamic Sidebars (widget-ready theme) in WordPress http://zenverse.net/creating-dynamic-sidebars-in-wordpress/ http://zenverse.net/creating-dynamic-sidebars-in-wordpress/#comments Thu, 16 Apr 2009 17:13:55 +0000 Zen http://zenverse.net/?p=39 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:

?View Code HTML
<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:

?View Code 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:

?View Code HTML
<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)

?View Code PHP
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 :

?View Code HTML
<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.

?View Code PHP
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 :

?View Code 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.

?View Code PHP
<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.

?View Code PHP
<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 :

?View Code PHP
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 :

?View Code HTML
<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 :

?View Code HTML
<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.

]]> http://zenverse.net/creating-dynamic-sidebars-in-wordpress/feed/ 5