How to ReDesign a Blog [Part II]

This post is the 2nd in a two part series in which Matt Brett shares how he approached redesigning Digital Photography School. Read Part 1 Here.

When it came to developing the new Digital Photography School, the real challenge was brought to the table. How was I going to house three blogs under one roof? There were many routes I could take, but I narrowed it down to two pretty early on…

1. Use WordPress MU to host the different blogs under a single install. b5media is in the process of moving all their blogs to the MU platform, so it made sense to be ahead of the curve with DPS already being on it. Tying the blogs together on the homepage and cross-promoting in the sidebar would be easily handled by parsing feeds via SimplePie.

Including all three blogs in archive indexes, search results, etc. would have been made a little more tricky. There are several down-sides to going this route, though, which falls mostly on the administrator’s lap in the end. Adding extra steps to Darren’s daily routine is something I wanted to avoid, so I started weighing pros and cons.

2. The simpler option on all fronts, was to use a standalone install of WordPress and “fake” the different blogs by using a well structured category hierarchy. I knew this meant I was going to be writing a ridiculous amount of conditional statements in the templates, but it would ease the load on the content management end significantly.

Option 2 was the route I decided to take, which proved to be the right one in the end. Aside from producing lists of popular posts in each category (or in this case, for each blog), everything else was relatively easy to do.

Before I could start building out templates, the categories needed to be re-arranged and sorted accordingly under three main ones. “Cameras and Equipment”, along with “Post Production” already existed. So I merely had to create a new category for “Photography Tips and Tutorials”, then place all other categories under it. With that done, I now had the main three categories in place and started separating them on the front end usingconditional tags and custom loops with query_posts.

If This, Do That

Constructing the sidebar was quite a feat. It took a fair amount of planning and testing to ensure the correct content was being displayed for the page you were looking at. The idea, was to show the most popular and recent posts for the blog you’re reading at the top of the sidebar, followed by most recent posts from the other blogs. This became complicated when we started adding additional pages to each faux blog, along with the posts they already contained.

There’s a single template for the sidebar which houses the content for each blog. The conditional tags tell it which content to display depending on what post or page you’re reading. For content relating to the Photography Tips and Tutorials blog, the conditional statement looks like this…

<?php if(in_category(51) && is_single() || is_subcategory(51) && is_single() || is_page(2694) || is_page(2745) || is_page(2753)) { ?>

What that means in plain English, is this…

“If we’re in category 51 and reading a single post, or in a subcategory of 51 and reading a single post, or reading page 2694, or reading page 2745, or reading page 2753, show this content.”

Similar steps are taken for the other blogs, but obviously the category, post, and page IDs change.

Visually Identifying Content

One of the pros of using a single installation of WordPress and “faking” the blogs, was the ability to use the standard archive indexes. Categories, tags, authors, search results, etc. This was all well and good, but we needed a way to distinguish posts being from different blogs. To do this, I coloured the post title and corresponding links to match that of the blog the post belongs to. For example, if you were to look at

Darren’s archive index, you will notice that posts colours change as you scroll down the page. The same goes for search results, which assume a nearly identical layout.

This effect was easily accomplished using a conditional tag which assigned the appropriate class to the post’s container div depending on the category or subcategory it belongs to.

<div class=”post archive<?php if (in_category(51) || is_subcategory(51)) { echo ‘ tips’; } else if (in_category(10) || is_subcategory(10)) { echo ‘ cameras’; } else if (in_category(8) || is_subcategory(8)) { echo ‘ production’; } ?>”>

Presenting the Right Content

Inside each conditional statement is a custom loop which produces the appropriate content for the given area. Again, using the Photography Tips and Tutorials blog as an example, the sidebar list of recent posts i constructed using the following query_posts…

<?php $recent_tips = new WP_Query(‘cat=51&showposts=5’); ?> <?php while ($recent_tips->have_posts()) : $recent_tips->the_post(); $more = 0; ?> This one is probably a little easier to decipher – show 5 posts from category 51.

Popular posts from each category was another issue all together. There’s no built-in function in WordPress for popular posts, which is still a little baffling. Over the years, there have been changes to how posts are stored in the database, and popular post plugins never seemed to be able to keep up. Doing a quick search will return several results for such plugins, but hardly any of them work with newer versions of WordPress. Of those that do work, none of them did what I needed – produce a list of popular posts for specified categories. That was until I found the brand new, Recently Popular plugin. At the time I stumbled upon it, the functionality I was after wasn’t quite there. But after leaving a comment with my request, the author released a new version within days adding exactly the functionality I desired. Perfect!

Making Content Management Easy

When it came to the handling the sidebar content, I wasn’t quite sure how I was going to approach it. In the past, I’ve done such things as creating a series of pages that make up the different bits of sidebar content. Utilizing the page title and content areas, along with some custom fields. But this was by no means an elegant solution. I was after a solution that was easily comprehensible and simple to use. That’s when I turned to widgets.

I’ve created custom widgets before, but their purpose was merely to give my client the ability to rearrange content form the WP-admin. This time, I wanted Darren to be able to edit the content of each widget from within WP-admin as well as being able to rearrange.

A quick search landed me on this tutorial from WooThemes (registration required to read), which was exactly what I needed. In no time, I had created a set of custom DPS widgets with customizable content.

Similarly, a couple new elements have been added to posts that needed an easy-to-use interface. I started demo’ing plugins that allowed for creating user interface elements that tied into custom fields. Unfortunately, most are now geared towards WordPress 2.7, and DPS is running 2.6.5 for the time being. I ended up finding another great tutorial which demonstrated how to create custom write panels in WordPress.

Be Dynamic

Using conditional tags and custom loops via query_posts, you can fairly easy create dynamic content which will help set your blog/site apart. A static sidebar with identical content on every page loses its impact quickly, while one that changes and relates to the content of the post you’re reading will not only catch the reader’s eye as it’s constantly changing, but also serves as a more valuable gateway to connect them to other related content.