Apr 28
BellevueGallery.ca – A WordPress Site Showcasing Fine Art
One of our early clients as Pink & Yellow Media was a small fine arts gallery in West Vancouver called Bellevue Gallery. At the time they were looking for a website that reflected their style and sophistication and that showcased both their past, current and upcoming shows and also the individual artists represented by the gallery. In accordance with the trend at the time we built them a fancy and dynamic Flash-based website that had all the bells and whistles where moving menus, active backgrounds and an interactive experience were concerned. But that was then. Today the web consumer is no longer looking for flashy intros and moving elements – they want content. Immediately. Today’s web consumer expects a search on Google to take them straight to the content they are looking for. And to boot they want to be able to interact with the content, whether it be sending it to a friend by email, posting it on Facebook or raving about it on Twitter. Suffice it to say the art of designing Flash-based web sites is quickly fading to the bright star of dynamic CMS-based sites like those built on WordPress.
A new site is born
After some discussions with the gallery owners it was decided a new site was needed – one that not only drove web users directly to the shows, artists or even art pieces they were looking for, but one that also allowed the gallery to communicate more directly with the visitors through a news page and social media. But most importantly we wanted to create a site the gallery could manage on their own by adding shows, artists and photo galleries and write articles about the everyday goings on in the gallery itself. The natural platform for such a site was WordPress.
Based on the original site we knew we needed a front page, an exhibitions list displaying past, current and future shows, a gallery artist page with sub-pages for each artist, a news section, an artist submissions section, a page with info about the gallery itself and finally a contact page. Since the client is an art gallery and they had a huge number of photos of art pieces we needed to find a solution that would make the artwork easy to display for the owners and easy to navigate and digest for the visitors.
The design of the site needed to stay true to the visual identity of the gallery, built over several years. To help in the design process we brought in Alexandra Oosterom from Fresh Media Designs and she turned out a clean yet stylish look for the site that fit with the parameters we outlined.
Thinking in taxonomies
The challenge when using a CMS is always to come up with rational and logical taxonomies so different elements nest within each other in a rational way. Originally we planned on setting the site up as a huge list of parent and child static pages but that became cumbersome and blocked some of the features we wanted to include. The solution was to set up a parent category called Gallery Artists with a sub category for each of the artists. Because each artist would have a gallery plus a set of info pages (Artist Statement, Biography and Curriculum Vitae) but not all artists would have all the pages we also needed to come up with a way of creating a dynamic menu to display within each artist page that let the visitor jump from page to page quickly. The result was a clever little PHP hook within one of the post templates (yes, this site has 10 different single post templates depending on what category you are viewing and what page you got there from) that queried the parent category of the post (the artist name) and then listed out all the other posts within that category as a menu. This all came together to create a simple and intuitive navigational tool for the visitor.
Using NextGEN Gallery outside the norm
One of the interesting challenges of the site was to create a dynamic gallery artists page that featured the artist name as well as a photo of an art piece and a short bio that would in turn lead to a set of dedicated pages for that individual artist. After playing around with a few different solutions we decided to use the popular NextGEN Gallery plugin as the base for the gallery artist page. This plugin removes the process of image and gallery management from the pages and posts in WordPress and puts it in its own administration area. This makes it easier to manage large ammounts of content as was the case here. The output of NextGEN Gallery is also dymanic so a change in gallery order, image description or artist bio will be reflected on all the pages where that gallery or image is embedded with one change.
We set up one gallery for each artist that was then embedded into a separate post for that artist. To display the list of all the artists on the Gallery Artists page we used the NextGEN Gallery Album function. The problem was that the Album function only points to pages, not posts. To curb this problem we had to go in and rewrite a large bulk of the sourcecode in the plugin. After the fix each artist gallery could be related to any page or post by entering the post ID number.
Apr 05
Frugalbits.com – WordPress as a Magazine CMS
Last year I was contacted by two veterans of the publishing business with an idea for a new online magazine called “Frugalbits“. It would be a daily publication in which readers would find deals and ideas on how to be more frugal – a virtue I think we all wish we had more of. They were looking for a highly customizeable web solution for the site and had realized that the answer might be WordPress. Smart ladies.
Several months and many hours of nit picking code later and Frugalbits is now finally live to the world. It’s a labour of love for me as well as the crew behind the site and it is a project I am exceedingly proud to have been a part of. So, without further ado, let me walk you through some of the interesting elements of the site:
A Carousel of Stories
Early on in the process the request came in to have a featured story carousel at the top of the front page. Unlike many other such sites the Frugalbits team didn’t want to have multiple text stories on the front page but requested instead one main story, named The Daily Deal, to be featured and then have a carousel with the latest 8 stories displayed at the top. Over the years I’ve worked with many different featured story plugins and carousels and as with pretty much every other plugin I come into contact with I’ve hated them all. For this one I decided I’d go out and find something that could be customized down to the last pixel and that ran independently of the whole WordPress plugin regime. And after a lot of searching I finally found a JavaScript based carousel I could take apart and put together exactly the way I wanted it.
The carousel requested would feature 8 stories (4 and 4) and would have a square story picture, a tagline on a translucent banner and the story title itself. In addition the coloured banner the story title would go on should change depending on the category the story belonged to. This meant I needed to create a loop in which 4 fields were queried for each story: thumbnail, tagline, category and title. It quickly became apparent that apart from the title the rest of the fields had to be customized for each story. To solve this I created 3 custom fields; thumbnail, cat and tagline, and the story editor filled out each of these taglines with the appropriate content. It worked quite well and I was satisfied that this solution would work
But. After a beta launch one of the editors brought up a point I never considered: The first entry of the carousel would always be the same as the story on the front page. And since the front page only had one story this was to put it midly somewhat redundant. Fortunately WordPress has an answer for this type of situation: offset.
<?php query_posts('posts_per_page=8&offset=1'); ?>An explanation: The carousel is populated using the standard query_posts() function. By using the offset variable in conjuction with posts_per_page I can define how many posts the query should “skip” before starting the list. And since I just wanted to skip the first (front page) post, that value should be 1. Problem solved.
Adding an Author Box
Because Frugalbits is a magazine it has both “normal” articles and also columns written by a select group of columnists. The request was that for these columns there be a box at the top right under the title with a photo, name and a short bio for that columnist. WordPress doesn’t have a standard function to add such an author box and though there are plugins that do it they are clunky, full of garbage code and not easy to style. I chose to go hard core on this one and just write it right into the single template using a conditional custom field. The result was the nice chunk of code below which produces a nice CSS styled box with the author Gravatar, category name, author name and WordPress user bio when activated with a custom field with the name “author” and the value “true”:
<?php if((get_post_meta($post->ID, 'author', true))) { ?> <div id="authorbox"> <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?> <div class="authortext"> <h4><?php the_category(' '); ?> is by <?php the_author_posts_link(); ?></h4> <p><?php the_author_description(); ?></p> </div> <!-- END #authortext --> </div> <!-- END #authorbox --> <?php } ?>
Custom templates
One of the most important features of the Frugalbits site is actually something you hardly notice: The custom templates. Depending on where you are in the site the layout changes subtly. The front page features the carousel, the single post pages have the optional author box, the category pages have only the right sidebar and show thumbnails for each story and the legal pages have an entirely different sidebar from the rest. To top it off the F Spot category has an entirely separate tempalte that looks nothing like the other ones. All this is done by using conditional statements and creating custom theme files for individual pages and categories.
Now that it’s launched I’m looking forward to hearing what people have to say about Frugalbits and it’s functions. Feel free to leave your questions and comments below and please visit the site and learn how to be frugal yourself!
Mar 23
Webcast: An Intimate and Enlightening View into Microsoft Expression Web 3
I’m doing a 1 hour live webcast with Microsoft Canada demonstrating advanced WordPress customization with Expression Web 3 on April 6th, and you are welcome to join. It will be an extended version of my MIX10 session with more demos and more time for questions. All you have to do to participate is register. Full writeup below:
REGISTER
Invitation Code: 0781DA
Tuesday, April 6th, 2010
Start Time: 11:00AM PST (02:00 PM EST)
Webcast Duration: 60 min
Questions about these events?
Call us at 1-888-789-7770
A follow up to Paul Laberge’s “101” webcast, Expression Web MVP and WordPress hacker Morten Rand-Hendriksen takes you through an intimate and enlightening look into his day-to-day work process. He specializes in building solid standards-based websites on the WordPress platform using Microsoft web technologies and Expression Web. The session takes you through real-life examples of customer projects and pulls back the curtain on a work process that employs what Morten jokingly refers to as the “Unholy Quatern” – Microsoft’s Expression Web 3, Web Platform Installer and Mesh combined with the open-source publishing platform WordPress. Combining these four technologies Morten has developed a process in which rapid site debugging, prototyping and implementation becomes a reality.
Learn the inner workings of WordPress and how to use its theme engine to build pretty much any website you can think of using Expression Web 3 and see how using simple web technologies like WPI and Mesh can make your life as a CMS dev/igner much easier.
Mar 14
MIX10 Session and Supporting Documents
Above is my MIX10 session A Case Study: Rapid WordPress Design and Prototyping with Expression Web 3 in its entirety in Silverlight video format. It can be blown up to full screen and I highly recommend it as there are code examples.
In the session I referenced a bunch of different technologies and applications I use on a day-to-day basis. For those in attendance and those watching on the web here is the exhaustive list of links and tools for you to play around with. I will post a link to the video version of my session when it becomes available approximately 24 hours after the session itself.
The Unholy Quatern
The Unholy Quatern consists of 4 basic elements;
If you are only installing WordPress on your local computer there is no need to get WordPress from the original source – the Web Platform Installer will handle the installation for you. The same applies if you are using a different CMS under the WPI.
NOTE: If you are working in Windows 7 it will be necessary to run Expression Web 3 as Administrator if you want to set up the WPI version of WordPress as a site. Otherwise Expression Web 3 will not have permission to write to the folder and you’ll be banging your head against a wall for hours trying to figure out why it’s not working.
WordPress Code Snippets for Expression Web
I have created a downloadable version of the WordPress code snippets used in the session. They are availalbe – and frequently updated – at the Expression Gallery. The snippets work with any version of Expression Web and are quite literally plug-and-play. The current version of the WordPress Template Tools comes with a special snippet that lets you create new snippets. Snippets in the current version are:
- Custom Page Template tag
- Custom Field tag
- PHP parsing Custom Field
- Conditional Custom Field
- Image as Header
- Get blog/site URL
- Get current theme URL
- Get blog/site name
- Get blog description
- PHP include
Most of these are plug-and-play and those that are not are fairly easy to understand. They are all 100% standards-based and use current and up-to-date WordPress template tags.
I update the WordPress Template Tools on a random basis whenever I feel there is a new tag that will be useful for other people. If you have an idea for a template tag not currently in the list feel free to contact me with the suggestion.
Jan 20
Design Schooled Kids – Pushing WordPress to the edge
A couple of months ago I got a tweet from Tracy Sullivan of Design Schooled Kids about creating a web site for her line of stationery for kids. It was an interesting project both because of the products themselves – stationery that teaches kids to read and write – and because it posed some unique challenges where design and development was concerned.
Well, actually the design portion was already handled by Tracy herself. The challenge in that regard lay in taking Tracy’s clean and exact designs and making them appear on the web as they did on paper. As for development the main challenge was that although this was to be an online store she wanted it to look nothing like an online store. So basically the project consisted of taking a new site concept from a paper mock-up to a fully working website. Exactly the kind of stuff I like to do.
Taking WordPress right to the edge
The result of a lot of hard work is a website that in my view takes WordPress right to the edge of what it is capable of. Every element of the site is custom built from my basic WaveFront theme to create a look, feel and operation that in no way resembles or even hints at WordPress or a regular e-commerce CMS. That said there is no real reason why any site, WordPress blog or otherwise, should look a certain way. A CMS is after all just a HTML generator that spits out whatever you want it to, and once you have the HTML you can use CSS to display it any way you want. The true challenge here was centered around getting the e-commerce portion to look, work and feel less like a boxed e-commerce solution and more like something classy and custom even though it was built on top of the WP eCommerce plugin. So while on the back end this is a fairly standard WordPress installation with pages, a blog (upcoming) and an e-commerce component, on the outside it looks like a custom site with all the bells and whistles built from scratch. Which is exactly what both Tracy and I wanted.
Ultra-clean designs pose unique challenges
Tracy is a designer of my heart: Obsessively detailed and extremely picky. (To be honest I don’t think you can call yourself a designer if you don’t fall into these categories, but that’s just me.) Her designs looked easy enough, but the true challenge lay in matching her static pages created in InDesign to live dynamic pages on the web. With such a rigid frame to work inside all the regular cross-browser problems like padding- and margin widths, positioning, font sizes etc that we normally choose to ignore or just tweak till they fit within acceptible buffer zones were all of a sudden make-it-or-break-it points that had to be done exactly right. The most notable example was that when each page loaded, whatever page content was in the “content” section of the layout had to line up perfectly with the topmost menu item. Sure, that’s easy enough if all the content is the same, but in this case we were working with four fundamentally different types of pages: Plain text pages for general info (home, about etc), dynamic index pages for each product line consisting of a header image plus a series of thumbnails for each product, single product pages with a larger image off the top with product stats and purchase buttons on the right and info underneath and finally shopping cart pages.
This meant the site demanded entirely separate style codes for the different elements depending on the type of page (or more specifically page template) was being displayed. And all these styles had to be flexible enough to be applied to the same item in different ways depending on the current template. Normally this would be easy enough to solve by using custom page templates, but in this case we were using the WP eCommerce plugin which generated all the product indexes, single product pages and shopping carts. As a result I had to dissect the eCommerce plugin pretty much line by line to find where all these elements were generated and how to go about repositioning them. What I found was a plugin that although it looks amazing on the outside was actually quite messy behind the curtain. I won’t write any further on this topic here – suffice it to say if you want WP eCommerce to do something that’s not just basic implementation you better prepare yourself for hours of decrypting bizarre code layouts and counter intuitive solutions. More on that in a different post.
In the end I created multiple theme files for the theme itself as well as the WP eCommerce plugin that allowed for micromanaged control of all the different pages. Not an easy task, but more than doable given enough time and some good background music.
Overall I’d say DesignSchooledKids.com has been my most challenging project to date, not because of the design or development elements of the baisc site but because the WP eCommerce plugin falls short in way too many places. In the end I made it all work the way it should but that was only because I spent an enormous ammount of time fixing or all together rewriting the code in the plugin so it would behave properly. It’s a bit of a disappointment really but now that I know how all the pieces fit together I should be able to reproduce it in the future.
Visit Design Schooled Kids and check out both what WordPress can do and what Tracy has to offer.
