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.
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.
Second, look for functions.php in your theme folder. Create one if it is not there.
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
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>', )); } |
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.
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.
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 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.
Hey there, welcome to Zen's Design Blog!
I make free themes, premium themes and plugins for wordpress. Besides, I distribute free downloadable resources that might help you in your design and much more.
ZenVerse is Zen's web journal about web design and development.
Zen is from Malaysia.
More about Zen »
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