How it was made

Just like this site, the INK Design website is powered by WordPress and the Carrington framework. WordPress handles all the content and Carrington handles how the content is put together and displayed to the user (more about Carrington in this post). Since my site already has many of the features Kamran wanted in his site like in-page ajax loading of posts I built upon what I already had, changing some CSS here and modifying some Javascript there. Getting a test site up was a fairly quick process. The good thing is, while I was creating the theming for the site, Kamran could post projects to the site simultaneously.

In-page loading of project posts

Once the site was functioning well enough I decided to give it some INK Design flavor. One of the original concepts for the site was to have one giant canvas that moved around depending on what type of projects you wanted to see and for this Kamran created a huge spaced out image of blending colors and designs to act as the background. I took this giant image and cut it up into ten smaller ones to use for the background of the site design we had created. I found a pretty nifty plug-in, jQuery Backstretch, that provided exactly what I needed to display a fixed full screen background at various screen resolution sizes. I used this to create a randomized full screen background generator. If you refresh the page or navigate to other pages you’ll see it in action. The good thing about the backstretch plug-in is that it loads up the image after the page has rendered decreasing page load time.

The one big problem in this site is that it uses a couple fixed position elements which do not work well on mobile devices like the iPad. For instance the background will scroll up on mobile safari revealing a basic gray colored background when it should remain fixed. Also, the layout gets squished together a bit more than it should on mobile browsers. Hopefully one day when I have more time I’ll be able to fix these issues.

All Tools Used

• WordPress 3.0
• Carrington framework
• jQuery Masonry
• jQuery Backstretch

Update: this site is also featured on the Carrington framework’s homepage!

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 ↓