GuitarAngel.net

Having a dynamic sidebar is a great way to make your website more user-friendly! You can display extra content to enhance your pages or provide additional navigation links for sub-sections. Since the release of my new design, I've had a few people ask how I made my sidebar change on each page using Wordpress.

I am going to attempt to walk you through the entire process that I used to create the effect. But before I dive into that abyss (because it truly is one), I want to mention that this is an advanced way of manipulating code in Wordpress and is not recommended for beginners unless you do some additional research.

There is also a snippet of example code for a dynamic sidebar on the WP Codex, but it might be easier to understand here because you can build it along with me.

We will be utilizing Wordpress's Conditional Tags and Template Tags on our sidebar.php template page. This is the only template page in your theme folder that you will need to edit. It may get quite long code-wise (mine is about 200 lines), but have no fear, I will also show you how to organize it all as well.

For this walkthrough, I will be using my website (this one!) for most of the page structure and examples. At the end, I will provide you with a downloadable version of the advanced sidebar we will construct using the conditional tags. However, you are welcome to download it now to play with as we go through the steps.

Got it? Ready to go? Woot, let's get to it. I would advise you now to open up the "Tags" pages I linked above in new windows (or tabs) so you can easily reference them throughout this whole thing.

Basic Structure

The first thing to do is to create little placeholders in the sidebar for our content. Utilizing the conditional tags (of which I am going to assume you have looked over), and some PHP magic, we can write this like so:

<?php if (is_home()) { ?> Home content. <?php } ?>
<?php if (is_single()) { ?> Single post content. <?php } ?>
<?php if (is_archive()) { ?> Archive content. <?php } ?>
<?php if (is_search()) { ?> Search results content. <?php } ?>
<?php if (is_page()) { ?> All pages content. <?php } ?>
<?php if (is_page('about')) { ?> About content. <?php } ?>

The is_home() tag tells Wordpress that the content in between the { brackets } should only be displayed on the homepage. The is_page() tag declares the content inside to show only on a page. Please remember to keep <?php ?> wrapped around the opening and closing of each function.

To specify which page to display it on (in this example the page is "about"), you will need to add either the page's ID, title or slug in between the parentheses, as displayed above. I am currently using the page slug, "about", because that seems easiest to me.

Read up on the other tags (archive, single, search, etc) to familiarize yourself with what type of page will display. You are free to play around with my website to see what content pops up on the sidebar while viewing different pages. Try browsing using my sitemap or type in a random search query in the box on the top-right.

You could honestly stop at the code above and just plug in what content you want for each specific page. But, for example, if you are wanting certain content to appear on the homepage and the archive pages but not on the search results page (or some similar structure), then please continue reading.