Facebook Pixel
Join our Facebook Community

How to ReDesign a Blog [Part II]

Posted By Darren Rowse 23rd of January 2009 Blog Design 0 Comments

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.

dps-redesign09-home.jpg

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

dps-redesign09-widgets.jpg

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.

dps-redesign09-writepanel.jpg

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.

About Darren Rowse
Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook and LinkedIn.
Comments
  1. Good tips. I’ve been busy redesigning my site and so these tips will come in handy. I think people underestimate how many tutorials there are out there. I’ve been able to find a step by step tutorial for pretty much every question I have. If you ever want to learn something, most likely somebody has written about it.

  2. Nothing like using the most simple solutions to accomplish incredibly complex output, nice work.

  3. Similar to what you’ve done here, I’ve been trying to use code to display lists of relevant material. In my case I’m using it to display articles with the same tag:

    <a href=””>

    I’m using PHP-Exec to run this code in pages and posts. it works in both instances, producing a list of the articles I request. But on pages it changes the comments that follow the article to be the comments that appeared at the end of the last article on the list. This doesn’t happen when I use the code on pages.

    Any idea what might be wrong with the code?

    Very useful post by the way – given me some ideas for my next steps…

  4. Ah – the code I posted didn’t work. Never mind, you can see it here: http://wordpress.org/support/topic/235092?replies=1

  5. Johnathan is absolutely correct. In theory it’s great to have support but frustrating if the support isn’t there. Also, if your doing the work yourself your needs tend to be a bit more urgent and immediate as you’d like it done and done right? So where’s a good place to get some ideas about the structure of how a blog is supposed to look and function.
    Right here… If you’ve not read part 1 it’s a good place to visit or revisit. Great job Matt. Cheers,

  6. If you don’t want a ton of conditional statements in a single PHP file, an alternative that’s worked for me in WordPress is to create a separate .PHP file for a category or page that will be different. If you add a file called category-51.php to the folder, you can customize that instead.

  7. Another fantastic, informative article! Thanks Darren!

    I’ve thought about using WordPress Mu before and always came to the same conclusion. It’s clearly been the right decision!

  8. I never thought of using WordPress Mu for multiple blogs. Saves me having a couple of different database files.

  9. Thanks for the tips. I went through a larger redesign on my blog http://www,anotherdayoflife.com about five months ago, but am always looking to find wasy to improve the readability and functionality more.

    These tips really help.

  10. I considered using Word Press MU, but I thought it was a bit intimidating. Not worth it since I haven’t launched multiple blogs yet. Wanted to be prepared in the future. Hoping I won’t regret not going with it. Though it’s likely there will be a brilliant syncing methods developed. They always come up with what you need.

  11. Just a heads up in case you didn’t know, but none of the background images are showing up on http://www.digital-photography-school.com for me in FireFox or Safari.

    See screenshot here: http://www.flickr.com/photos/toddaustin/3218291906/

  12. thanks for the tip about WordPress MU. I needed that!

  13. Another great article :)

    I ve never thought about using WordPress MU but I am considering it now, it seems quite a good software.

  14. Todd_Austin: They look fine in FireFox for me, maybe your blocking them in someway with a FireFox add-on like Adblock or something similar.

  15. Great article, the tutorial on adding the custom fields in the admin was extremely useful. My question though, is how did you get it to show more than one field?

  16. This post was a very interesting read, Thanks!

  17. Very nice article!

  18. Great tips, and thats for the useful resources. I agree the sidebar is the toughest part…I know it will be for my next design. The widgetizing just makes things harder, but I guess it also makes things easier in the end…

  19. Alexander: Nope. Not an adblock problem. I actually contacted Matt Brett and let him know, and it is fixed now.

  20. I am glad to read about the trade-offs and how you did your conditionals. While I haven’t created a theme from scratch, I’ve modified it many times to display things differently utilizing the categories. I had to do a bunch of conditionals too. No problem. The only thing that’s a little annoying is that, if I ever want to add or remove a category, I’ll have to go fix those conditional statements as well.

  21. Everything runs so smoothly it’s easy to forget the massive amount of work that went into it. Sometimes bits of complicated code are necessary to make things run smoothly. I have a complex project going on at the moment as well and you’ve given me some awesome ideas! Great job, really.

  22. it looks like you did a good job with digital photography school. i recently shifted a wordpress them that had dynamic widgets and page links on top which made the design much easier than many templates that seem to get many people into the blogging dead end where they have to do alot to change the site.

  23. thanks for great learning to be new designer in a minutes….

  24. A good continuation about Redesigning. Clarifies many things. Should be helpful if your a designer and surely helpful even if your not a designer.

  25. A great article Darren and very timely.

    I’ did a SEO course last year and this year we pursuaded the lecturer to run another course and each week we look through what one member of the class has or is doing.

    Last night was my turn and the consensus was that I’ve built up a reasonable level of traffic but am failing on conversion.

    As I offer several photography services I need to somehow display information relevant to my viewer. Perhaps through running a survey on the front page – not sure how I’m going to do this yet. Your idea for displaying recent posts from a particular catergory though looks like a great place to start though and not too difficult to implement.

    I’ll have to check your archives if you’ve covered running serveys and how to gather data from these :-)

    A very technical article but really really useful!

    Pat
    PatB Photography

  26. Matt,

    Outstanding work. Just curious, though; did you tinker around with the redesign locally using something like WAMP, or did you test on a hidden subdirectory on the live server?

    Regards
    Shane
    twitter: shanearthur

  27. Great tips, and one of them answered a question that I had and could not find the answer to.

    Thanks!

  28. Thank you for the post and wordpress mu is something must to try

  29. Matt..thanks for sharing the code as well as the thought process..I am in the process of doing the same thing, but was leaning towards option#1, however, as mentioned, the upkeep would be a nightmare. I was contemplating just using a separate page for each new section, with conditional statements to change the headers and give the appearance of a different site… and also paring down the sidebar to be more generic across all pages/sites..thanks for the guidance.

  30. Got a simple solution for what i was looking for, WP multi-user for multiple blogs. Thanks a lot for yet another great article.

  31. Matt ~ Thanks for a great post. There’s a wealth of posts and information out there about how to setup basic sites utilizing WordPress, but not enough that focus on the more advanced features and techniques.

    This post is great in that it illustrates how you’ve pushed yourself to think “outside of the box” and come up with solutions that fit the needs of your client.

    The techniques you’ve illustrated will come in handy in a project I am currently working. Additionally, your thoughts are inspiring as well!

    Great job on the DPS website and your other work!

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open