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 5 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:

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

 

Posted by Zen   @   17 April 2009 5 comments
Tags : , , , ,



or Subscribe to specific category only :


Post thumbnail of [WordPress] How to Exclude Certain Categories From RSS Feed, Home, Search Page and More
[WordPress] How to Exclude Certain Categories From RSS Feed, Home, Search Page and More
Post thumbnail of How to Create A Standalone Wordpress Custom PHP Page
How to Create A Standalone Wordpress Custom PHP Page
Post thumbnail of How to Fix FTP Login Problem in Wordpress in XAMPP for Mac OS (Localhost)
How to Fix FTP Login Problem in Wordpress in XAMPP for Mac OS (Localhost)
Post thumbnail of How to List All Categories, Pages and Their ID in Wordpress
How to List All Categories, Pages and Their ID in Wordpress
Post thumbnail of Creating A Simple Wordpress Plugin That Modifies Post Content
Creating A Simple Wordpress Plugin That Modifies Post Content
Post thumbnail of Adding Post Thumbnail Feature to your Wordpress Theme
Adding Post Thumbnail Feature to your Wordpress Theme
Post thumbnail of Fatal Error When Using has_post_image() and the_post_image()
Fatal Error When Using has_post_image() and the_post_image()
Post thumbnail of Wordpress 2.9 Carmen With Exciting New Features
Wordpress 2.9 Carmen With Exciting New Features
Post thumbnail of Using Template Tag Function in Wordpress Theme Demo Bar Plugin
Using Template Tag Function in Wordpress Theme Demo Bar Plugin



  - 5 Comments

Add Comment

mercime says:
September 14, 2009 at 4:32 AM

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

[ Reply ]
kolombaru says:
May 1, 2010 at 1:15 PM

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

[ Reply ]
Damian Dawber says:
October 28, 2010 at 6:26 PM

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

Thank you

[ Reply ]
Geoff says:
May 12, 2011 at 7:16 PM

Thank you for this. I found it very helpful.

[ Reply ]

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
»
Powered by Wordpress   |   Phone Numbers Subscribe : Blog Feed • Comments Feed