How I Built my Review Website: A Walkthrough

Leading up to last weekend something reminded me I had a batch of book reviews that had previously been housed on my personal blog, but got lost in the move to hosting on WordPress.com (which I did to try and get back into the Google index as they dropped me for some reason, the reviews were lost, incidentally, because I created a custom post type and then exported from a theme which didn't have it, just FYI). I also had a hankering to have a play with WordPress' custom post types and taxonomies. I'd already had a stab at it for book reviews, so most of the work seemed done and I figured it would be easy to throw something up. Which it would, only as it progressed I got a little more ambitious.

Anyway, it's done now and you can find the site at consumeandreview.co.uk

I started by grabbing the latest version of WordPress and setting it up on my local development server. Once that was done I re-used much of my code from the book review custom post type I had created, but decided to convert it to a plugin instead (for future portability). I also added taxonomies for author and genre using the register taxonomy function. Previously I had stored author as custom meta data, but as it was something that could be shared by multiple books I figured it was better as a taxonomy and would save me re-typing (plus it allowed some functionality, such as author pages, much more easily). I also decided to change from the simple recommended yes/no system and go with a rating out of five, so that required a small change as well.

Once that was done I exported all my reviews from my old site and imported them using the WordPress Importer plugin.

[php firstline="124"]foreach ( get_object_taxonomies( array('post','book_review'), 'objects' ) as $tax_name => $tax_obj )[/php]

Once that was done I went looking for a theme. I had intended to use someone else's design to save time, but I couldn't find any I was happy with, so I designed my own. While working on this I knew I wanted it to be image light but to make use of some bold fonts and sizes. I'm used to working with the limited pallet of web-safe fonts you can use (those installed on all/most computers regardless of type), but they didn't seem to cut it for this project, so I researched techniques for using any font you wished on a web page that would work for all visitors.

I already knew of popular ones like sIFR and cufon, but I was happy to see that support for the CSS3 @font-face designation was now supported by the latest version of all the main browsers, so I set about learning how to embed fonts for the browsers (slightly different in IE versus everyone else, which is par for the course) and finding some suitable fonts. Google is your friend on this and I was amazed how many great free fonts are out there to improve the look of your site, I can recommend having a look on Font Squirrel, both for fonts and how to use. (update: you can also check out Google web fonts, which I only found after I built it.)

A couple of the fonts I liked didn't have bold versions or italics, so I had to try quite a few (it ate a lot of time, but was well worth it). I plumped for ChunkFive (site header), Crimson (page text) and Fontin (headers) in the end.

It took a while to get the layout right on all the page templates. It's not entirely there yet (I think the archives for genre should be on one page -- I hate having to click through lots of pages) but I have been tweaking since the weekend and there have been small improvements (to both layout and navigation).

Something I knew I wanted was a review archive listing the books by author which isn't something WordPress does out of the box and my previous custom code was written to support details in meta data. In the end I wrote a fairly simple database query to pull out all the details I wanted:

[php]function vf_get_reviews_by_author() {
global $wpdb;

$sql = "select ter.term_id, ter.name, tertax.taxonomy, posts.ID, posts.post_title, posts.post_content
from $wpdb->terms AS ter
left join $wpdb->term_taxonomy tertax
on tertax.term_id = ter.term_id
left join $wpdb->term_relationships terrel
on terrel.term_taxonomy_id = tertax.term_taxonomy_id
left join $wpdb->posts posts
on posts.ID = terrel.object_id
where tertax.taxonomy = 'author'
and posts.post_status = 'publish'
order by ter.name,posts.post_title";

$books_by_author = $wpdb->get_results($sql, ARRAY_A);

return $books_by_author;
}[/php]

I then just loop through the results and create a new header when the author name changes. I may try to make this sortable in some way in the future. As the list was fairly long (and only likely to get longer) while leaving a lot of white space to the right, I decided to put them into columns.

To get the columns on the review archive I wrote a second query to get an author count and just keep track of the number of iterations through the loop, then insert the closing tag of the left column and open the right one when the number of loops matches half the total number of authors.

At this point I decided to add in a series taxonomy so, where books were part of a series, you could find related books easily. This was to allow people to find similar books to read and to allow them to see what else is in the same story arc/feature the same character(s). Presenting this data necessitated a slight change to the layout. I also decided the series archive should show all of the books in the series on one page, rather then five at a time (which is what I had set the default to). Easy enough to do with a custom taxonomy template and a modification of the posts_per_page in the query. I also ended up modifying the review archive to add in the series details.

After updating some books with authors, genre and series it became hard to see which ones I had updated and which ones I hadn't in the admin section, so I added functions to call the manage_[post -type]_posts_custom_column and manage_edit-[post -type]_columns (using book_review for the post type) filters to display some additional columns for book reviews.

I added an about page and a contact form, should anyone want to get in touch (I disabled comments and trackbacks, I didn't think they were necessary) and I could have used one of my own contact forms, but decided to use the Contact Form 7 plugin instead.

Once I was happy I registered the domain (I had a few ideas for names) and set up hosting, then loaded the themes, plugins and content. A bit of testing and tweaking (and changes, some of which are listed above) and it was ready to go. I was pleased to see that the main browsers now render in such a similar way I didn't need any tweaks to get it working in IE (as is usual) and the use of embedded fonts means the site looks practically identical on all platforms, which is a nice bonus.

Once it was live I added a sitemap plugin (Google XML Sitemaps) to help SEO, but I had to add the Guar Sitemap sub-plugin to get custom post types included. I also setup the YOURLS plugin, which I use on a few of my sites to to automatically post to my Twitter account with a shortened link. Version 1.4.9 didn't work with the version of YOURLS I use (1.4), so I had to roll back to 1.4.8, which did.

So far I'm pleased with the result, no doubt that'll change, but the process gave me a chance to try some new things. I'd like to add in some functionality to offer readers links to similar books, but I'm not sure of the best way yet (I haven't found a service that offers an easy way to get recommendations for similar items, LibraryThing looks to have promise, but you end up with a lot of fairly vague links, the page for Abhorsen, for example, lists Harry Potter and Eragon as similar, which I wouldn't class them as). I'm happy for now, though, and it'll give me a chance to get some reviews on some recently finished books up.

(If you're interested in reading another post about site building, why not check out this post I wrote regarding List Books.)