The Concept

The basic concept I started with was to have a home page that would show small excerpts of blog posts with a corresponding thumbnail. Upon clicking one of these excerpts, the full post would then be loaded inline via ajax. In addition, I wanted to have everything align to a grid at all times. Before making this site I had seen this done on a couple of sites, but none of these were running on WordPress.

The Main Problem

With WordPress you normally have one template for your homepage and one for a single atomic post which means that a single post on its own can only be loaded via the single template. Because of this a post only exists on the homepage, where all posts are normally shown, and on its single, or permalinked page. There is no way to grab an atomic post on its own using WordPress’s default functionality. To get the layout I described above I could have made the single post template only return the post’s content and have that load through ajax via its permalink. However, the problem with that is when a user navigates to a permalinked post, all that would show up would be the content of the post. What I needed was a way to grab a post’s content on its own while also providing a nicely styled single page for permalinked posts.

How I Did it

I realized that I would have to write custom functions to query the wordpress database in order to do this, and so I started with that. Then one day I stumbled across the Carrington, a CMS theme framework that extends WordPress and makes it extremely easy to customize. The main difference between WordPress and Carrington is in how the code is abstracted and what can be done with those abstractions. Here is a diagram that shows the difference between the page load for a single post view in the WordPress Default theme and how the same in done in Carrington:

Now all this is great for customization, but why I eventually settled with using the Carrington Framework was because of the built in Ajax loading. It was exactly the thing I needed for this site as it gave me a way to show both excerpts and full posts on the homepage, while also providing a template for permalinked posts. Plus, its slick. Carrington provides it for viewing archives, but it’s easy to apply it to all posts.

Another wonderful resource I found for use on this site was jQuery Masonry, a layout plugin that auto-aligns elements based on a given grid. I’ve always loved sites that auto-align elements of different sizes so I was happy to apply that same look to this site. I had to hack the initialization part of the plugin a bit to get it to work right with Carrington right but it turned out to work great! I love this plugin.

Technology Used

• WordPress 2.9
• Carrington Framework
• jQuery
• jQuery Masonry

Overall, I am very satisfied with how the new version of tylerwolff.com turned out, though there are still problems to be fixed (IE7 layout, contact form messages, etc). In the future I plan to repair these problems, as well as add more content to the entire website. I might even write some more entries on the making of this site, going through some of the custom code I had to write to get everything to work together. What’s cool is the site is now featured on the Carrington homepage and showcase page. Check it out ↓