affective design

Today marks the launch of AffectiveDesign.com, a project I’ve been working on for Design and UX Expert, Trevor van Gorp. The design and flow of the site was created by Trevor; the HTMLification and integration into WordPress being my task. WordPress has come a long way from its early days as a simple blogging platform. Previously it required a lot of hacking to get it to behave like a Content Management System (CMS) but thanks to Pages and a bit of theme code, it actually works quite well for light-duty websites. 

The theme I created for AD implements some interesting WordPress-as-a-CMS functionality. While plug-ins play an important role, I tried to implement the bulk of it using WordPress theme templates. WordPress supports distinction between “Posts” and “Pages” (and sub-pages) which I used extensively to organize page data. Top-level pages are the source for the tab navigation, with any sub-pages living within those tabs. Blog “posts” live within the Blog page, which is specified within Settings > Reading of WP.

The homepage uses a special template (homepage.php) which houses various elements. The left-box houses the “Home” page contents, and is coupled with the Flashfader plugin, configurable inside WP. The purple-headed items are Sub-Pages of the Home Page, and the items below them are WP Widgets, all managed within WordPress.

Diving into a Top-Level Page, some of the CMS features come to life. Starting with the left sidebar, subpages of Services are listed automatically. Below these items is a customizable sidebar of widgets (just a Twitter widget is being used here). Theme code in functions.php automatically creates dedicated Left and Right sidebars for every page for maximum flexibility. I haven’t evaluated the actual load this imposes on the server, but load times do not seem to be severely affected, and WP-Cache takes care of the rest.

In the center we have the contents of the Services pages. If desired, a listing of subpages can be inserted in-line by adding the tag within the page contents. This listing is generated based on variables set in each subpage (for the image) and text processing (to display the snippet). This configuration is not as elegant as I would like, as it requires the use of “custom fields” (which isn’t terribly user-friendly) but allows for thumbnails to appear beside the subpage listing. WordPress has the ability to “attach” a particular image to the post, but I found it to be unreliable and difficult to manage.

The right sidebar stores more customizable widgets. The first is a custom-built widget based on “better-text-widget” and allows for the rounded corner styling along with an image (something that is difficult to do with a default text widget.) The “Testimonials” widget is also custom-built, and randomly selects a quotation from a list given in the backend. The remaining items are simply basic WP text widgets.

Strategic Insight is a subpage of “Services”. The breadcrumb behaves accordingly, and the active subpage is highlighted in the navigation. The image browser is SimpleViewer Pro, which allowed us to customize the look and feel of the actual Flash player to match the look of the sight. The sidebars and other functionality is analogous. 

The blog page behaves just like any other WordPress blog, with appropriate theming for the template.

The only other thing to note would be the Twitter widget, which is based on Twitter Widget Pro, and customized to add a “Follow” button below it and to improve stylability. 

Be sure to check out AffectiveDesign.com to see how they might be able to help you out, or just to checkout how all these WordPress tricks come together to build a very flexible and powerful CMS!