My Content-Powered Projects Page

As alluded to earlier, I’ve cleaned up my projects page which is now powered by a new taxonomy, custom post type and the content I’ve generated here over the last decade plus. Turns out, I’ve generated quite a few projects. :)

projects-page-crop

I’m not completely done creating and managing the content, but I’m pretty happy with the improvement. I’ve tried to group them in ways that are useful – especially calling out projects that are no longer active1.

You can see a comparison of the old and new pages in this Flickr set.

So what did I do and how did I do it?

Note: This was written against a pre-release version of WordPress 3.6

1. Create a Projects Taxonomy (and Post Type)

I created two new taxonomies to power the Projects page.

  1. Projects: the names of my various projects.
  2. Project Groups: to group my projects into buckets.

View the code on Gist.

I then used the Crowd Favorite taxonomy-to-post binding plugin plugin to create a Project post type that is effectively a child of the Projects taxonomy. This way I will be able to add content, terms, featured images, etc. to my projects (in a very forward compatible way).

View the code on Gist.

2. Convert existing Categories and Threads to Projects

In my existing content structures I had both categories and threads that were dedicated to specific projects. I needed to convert those relationships to the new projects taxonomy I’d created.

Changing the categories was straightforward, but there was a little more work for the threads because I needed to convert the related post types as well. I did separate SQL queries to get the various category and thread ids I needed to convert.

View the code on Gist.

Once everything was converted, I then ran a little code to save each term via the WordPress API so that the associated project post types content would be created (via the tax-post-binding library).

View the code on Gist.

The existing terms are now fully converted to projects.

3. Create New Projects (with meta data)

Now that I had converted the existing categories and threads to projects, it was time to create the rest of the projects. I ended up creating a big array with lots of meta data so that I could run and test this locally, then replay it all on my live site.

This code creates the new project groups taxonomy terms, the new project terms, and adds meta data to the associated project post types.

View the code on Gist.

I truncated that quite a bit as I inserted a lot of projects.

4. Assign Existing Posts to Projects

At this point we have all of our project terms and post types created, it’s time to use them.

Finding the posts I wanted to put into each project wasn’t an exact science. I basically created a projects list, then did searches on my site to find the posts relevant to that project. Then I manually selected the post IDs for those posts, and put them into a big array.

View the code on Gist.

I didn’t select the posts programatically because there’s a bit more nuance to choosing what is and isn’t applicable to a project than just a keyword search.

As part of that process, I also added a “Projects” category to all of these posts. I use this to show links to the latest posts across all projects on the new page. I needed to add this category to all of the converted categories and threads too.2

View the code on Gist.

5. Expose the New Data to Create the Projects Page

With all of my data set up, the last step was to expose it to power the projects page. I decided to do this by creating a shortcode that would output the projects by group.

View the code on Gist.

This has a bit too much of a mix of template and presentation for my liking, but it works and refactoring it is pretty low on my list at this point. Next time I mess with that code, I’ll probably clean it up a bit.

6. Project Page

The final step in the process was to customize the output of the individual project page. I am outputting the description, related links and featured image from the bound post type, and I converted some of my Threads plugin code to show a timeline of posts in “newest first” order. I also added a “this post is part of a project” banner to the individual posts, again borrowing the code from the Threads plugin.

Here’s an example.

Conclusion

I feel like the new projects page is a better representation of my projects, and will be more meaningful and maintainable in the future than the old static page was. It will also reward me for blogging more frequently by being more up to date as a result.

All good things.


  1. More on this in a future post. 
  2. I probably could have done this earlier in the process, but didn’t think of the feature I wanted it for until later. 

This post is part of the thread: Content Presentation – an ongoing story on this site. View the thread timeline for more context on this post.