09 Jul Case Study: The New Pure Forme
It’s finally here. The all new, fully responsive Pure Forme. Originally, I had built this with a theme called Max Mag, which was a good starting point. We got everything up and running pretty quickly, and on the cheap. But, it’s been seven months, and Jenny (the founder) has seen a significant increase in traffic and it is continuing to grow.
So, we had to rebuild everything before a huge traffic influx caused everything to slow down. I literally scrapped every single aspect of the site and rebuilt it entirely from scratch using Twitter Bootstrap. The site looks and functions the exact same, but has an entirely new backend. Lets take a look.
The first thing we wanted to do was to make a homepage slider so that the homepage would act as more of a landing page. Before it was just static content with a list of links. Should a user land on it, there was confusion as what should actually be done. Now, the slider cycles through the three most recent posts in the “featured” category.
This was done with the flexslider from WooThemes, and a modified WordPress loop. Instead of setting the category to be displayed, it’s dynamically pulled via an option on the page with the template of home (thank you advanced custom fields). There, the number of slides can also be set.
From there, the options selected are returned via a function called get_field() and spit into the HTML for the flexslider. As seen here:
We run a basic query and loop through each of the slides from the selected category. Each of those gets spit out into a list item with the featured image being returned, and clickable for users to click through to the article. This file, slider.php, only gets pulled in if the page being viewed is the homepage. Otherwise, we’ll display the featured image or a gallery of six images, depending upon the page type.
The next part, was creating easily maintained archives. There are so many categories and posts that displaying them, in a readable manner, on all devices is very important. So I created an archive page template. From here, the author can select which category should be displayed.
Why is it setup like this? For a couple different reasons. The first being that it’s better for SEO. By default WordPress will add /category/ to URLs. Thus if you have a category called ‘fashion’ the URL should read pureformenyc.com/fashion NOT pureformenyc.com/category/fashion.
That, in and of itself, however, is not reason enough to create a custom template. The more important reason is that managing a list of categories can become over whelming. Knowing exactly where to look, and how to edit them is a key feature that allows for quicker updates (a redesign, say) as well as easily being managed for things like adding to the menu.
On top of that, we had to build about a half dozen or so other templates, that the original theme made too cluttered. Rightfully so, though. When building a theme for commercial use you’ve got to take into account all kinds of different options, which can clutter the PHP and cause things to load a lot slower for highly trafficked sites.
Things like full-width, and gallery templates all for rebuilt from scratch using bootstrap classes to ensure responsiveness. The default page template it now about 12 lines of code instead of hundreds. Index.php has been completely scraped as well, and redirects to some other template, depending upon the content type.
The last big thing that we did was to make a custom post type for food, all it’s categories and ingredients. Each individual food item has ingredients associated with it, steps for making it, nutrition facts, as well as food items that are similar. Here’s the food layout for Mushroom Kale Frittata.
Within the functions.php file lives the code for the food custom post type. This ensures that “food” is an item on the left hand side of your WordPress dashboard (similar to posts and pages).
That’s how easy it is to add a post type of food. BUT, we still have to display that post type (which we do with a page template), and organize the food. So, we have food categories (a food can have one or more categories) and ingredients (a food can have one or more ingredients… and usually has lots). So we have to create not one, but two custom taxonomies (an ordering system) for the food.
Here’s the code that does this, also in the functions.php file:
That’s like 40 lines of code. And now all our food is categorized, and has ingredients associated with it. Talk about organized!
There were a ton of other smaller features, and lots and lots and lots AND LOTS of CSS that was rewritten for mobile and tablet views, as well as new styling, colors, fonts, etc. for the entire site. All in all it took quite a lot of man hours, but in the end will definitely be worth it, ensuring the best UX (on both the front end… for visitors… and the back end… for authors)