WordPress: Custom Dynamic Sidebar

This tutorial will show you how to make a dynamic sidebar, which allows the sidebar to have different sidebar content across different pages.

First, you will need to have sidebar.php. It will be uploaded to your theme folder later. If you don’t have this file, create it. For now let us assume that you have an empty sidebar.

Look through your other theme files and find where your sidebar would go. You will need to call on your sidebar in the appropriate place using the following code:

<?php get_sidebar(); ?>

We will only be editing sidebar.php from now. Make sure you know what you will be including in your sidebars.

The home page

Make sure you’re editing sidebar.php. This is what you will need to include in the file:

<?php if (is_home()) { ?>
. . . 
<?php } ?>

All you need to do is replace the dots with the elements you wish to include in your sidebar on the home/index page. For example, you may have the following:

<?php if (is_home()) { ?>
<h1>Welcome!</h1>
<p>Welcome to my website. This is my personal blog as well as a portfolio of my writings.</p>
<?php } ?>

Categories in your blog

This works by the same principle. You have similar pieces of code to begin and end what will appear in certain categories of your blog. You can simply paste this code after the code you’ve just worked with (ie. on the next line).

<?php if (is_category('category')) { ?>
. . . 
<?php } ?>

Simply replace category with the category name, and replace the dots with what you would like in the sidebar of any post under category. The following code also calls the description of your category as specified in your Dashboard under Posts > Categories if you so wish to use it!

<?php echo category_description(); ?>

For another category, simply copy the code and change the category. Don’t forget that you can also categorise some of your pages, not only your posts – they may also have the sidebar elements you specify if they are under that category.

Pages

This also works the same way, and as with the category posts, you simply place it in sidebar.php on a new line.

<?php if (is_page('name')) { ?>
. . . 
<?php } ?>

Just replace name with the page slug. If it has dashes, you write it exactly as it appears, for example my-archives-page.

Single posts

I will show you the way I put post information in my individual posts on my photoblog.

<?php if (is_single()) { if (have_posts()) : while (have_posts()) : the_post(); ?>

<h1>About this post</h1>
<p>This entry was posted on <?php the_time('l, F jS, Y') ?>.</p>
<p>It is filed under <?php the_category(', ') ?>. The tags of this post are <?php the_tags( '', ', ', ''); ?>.</p>
<p>You can also follow any comments to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?> feed.</p>

<?php endwhile; ?>
<?php endif; ?>
<?php } ?>

That is roughly what I include to display in the sidebar of my posts. You can edit this to your liking; make sure you include the loop, however. l, F jS, Y should be replaced with your preferred date format. You can find variables at php.net/date.

Listing child pages

You may have subpages that you wish to list on a certain page. They will appear as a very basic bulleted list by default. You will need this code:

<ul>
<?php wp_list_pages( $args ); ?>
<?php $args = array( 'child_of' => 2, ); ?>
</ul>

You must replace the number 2 with the page ID of the page you want to display the subpages of. For example, if you want to list the subpages of the page “tutorials”, you would need to find the page ID of “tutorials”. You can find this by editing the page in WordPress and looking at the URL; it will include the number of the post in it like so: post=2.

The CSS includes .pagenav and .page_item, as well as the following (specified at the WordPress Codex):

.pagenav { … } /* the outermost list item; contains whole list */
.page-item-2 { … } /* item for Page ID 2 */
.page_item { … } /* any Page item */
.current_page_item { … } /* the current Page */
.current_page_parent { … } /* parent of the current Page */
.current_page_ancestor { … } /* any ancestor of the current Page */

It can further be customised and you can see other options by visiting wp list pages at the WordPress Codex.

You need only save sidebar.php and the file containing the sidebar call (<?php get_sidebar(); ?>) to your theme’s folder.