The content "buckets" on the bottom left are driven by custom fields and featured images from three designated pages.

Is this is a generic page? If so, let’s show all the sibling and/or child pages in the sidebar:

Note also that the active link is purple for this page. Each page has it's own mini color theme.

Is this is a search results page? If so, let’s show recent posts in the sidebar:

The search page shows recent posts by month in the sidebar widget.

What’s the value of this random number? I created a function to call from a pool of qoutes, based on the value of a random number, on each page load.

I created a php array of quotes, drawing a quote based on the value of a random number.

And are there any documents attached to this page? If so, let’s present them in a list with some icons:

If the post has any attachments, I display them as a list with a small icon depending on MIME type.

Nice background gradients, great color palette, easy-to-read fonts. User-friendly.

The user base for this site is largely older Americans. Therefore, a text-resize widget is prominent in the header. It resizes all the blocks of text that I specify, it does so with a smooth CSS3 transition, and it saves it’s current status in a cookie, so the user only has to hit it once.

The jQuery text-resize widget.

Also of note: I developed a custom post type for News and Events. If the post has a thumbnail image, I show the image in the homepage sidebar. Using a custom post type keeps the default WP post type free to use for traditional blog content. It’s also more flexible than the hacky technique of building a site around multiple post categories.

The News & Events custom post type.

The NWRC homepage.

NWRC is document-heavy when it comes to public-facing content. They have surveys, publications, spreadsheets, and Word docs. These are displayed as “highlights” on the homepage. If the post has a document attached to it, the link goes straight to the document, with a document logo as a visual cue.

The content plan for NWRC is document-heavy.

I try to go the extra mile to make my WordPress themes easy to maintain. Check out the contact info in the footer here. Wouldn’t it be a drag to have to type this in, and keep it updated, in the footer, the sidebar, the contact us page, and wherever else? To help with this, I made a custom menu for the admin user to complete, only once, for every instance of his contact info. He can even call it whenever he wants, by typing [contact] into the post edit screen.

The contact info: Enter it once, use it many times.

The contact info admin panel.

That said, it’s also likely to be less reliable. It’s on your server, you’ve been tweaking the server-side code, it might be in an environment that the developers did not anticipate, and, bottom line, the developers haven’t had their hands on it since you downloaded it.  Case in point:  I recall installing a self-hosted cart for a client and being amazed that all of his orders were coming from Alabama.  Who buys boutique neon watches in Alabama?  Then I realized that every order was getting stored with Alabama as its shipping state.

Not cool.

I personally reached out to every single customer that day and set things right.  Then we switched to a hosted solution:  Shopify.

With Shopify, I don’t own the server side code.  They host it; I never even see it.  As a result of this, I admit, I have had to tell clients, “No, we can’t use that design because this shopping cart can’t work with it.”  But their fulfillment departments are flawlessly handling hundreds of orders per day, and none of the customers seem to mind that various design subtleties have been rejected.

And there is some margin for customization in Shopify.  Originally, I never thought I would get The Personalizor to add-to-cart in this environment.  But I dug into the API and got it done.

Shopify: It's 100% reliable and about 80% flexible. I'll take it.

The overall effect is a semi-chaotic grid, somewhat like a Tetris game. The images are generated from a user-defined shape, and positioned in the grid by a user-defined offset, using CSS positioning.

The celebrity grid is just chaotic enough so as to be eye-catching. The admin user has complete control over where and how the images are displayed.

Each of these images are actually a post thumbnail from a wordpress post, assigned to the “Celebrity” category. The celebrity page is a custom page template that taps into custom post meta, as shown below:

The Celebrity page picks up on these custom meta values.

Lastly, I am using CSS3 transitions to provide an attractive overlay:

The CSS3 transition property allows this overlay to appear gradually, as the user hovers or clicks on the image.

Betsy created the design, whereas I coded it in CSS and wired in a wordpress back-end. The design is very minimalist, which I love. My favorite thing to do when creating a custom theme is to simply delete the heaps of garbage data that get sent to the browser by the wordpress default. The homepage, below, features a header image, bare-bones navigation, and some news items. Ahhh. Easy to look at. One thing of note here is the CSS3 inset box-shadow on the body element. I haven’t seen this technique elsewhere, and it does break on mobile browsers, but I think it looks great on traditional browsers.

The Reverie Studio homepage. Minimal! Note the CSS3 inset box-shadow on the body element.

Here, the user has navigated to the prints category, which is a child of the artwork parent category. The user can navigate here directly, because the child menu appears on:mouseover from the parent menu. Alternatively, non-mouse users can navigate here by first clicking on the link for ‘artwork’. The artwork parent page shows images from all categories.

The artistic portfolio is the most important content on this site, and it’s where I spent the bulk of my time during development. The portfolio pages throw the 24 most recent images from whatever category the user has navigated to, as demonstrated in the screenshots below.

Here, the user has navigated to the prints category, which is a child of the artwork parent category.

The user is able to browse thumbnails via the now familiar slimbox effect (being cliche is forgivable; conforming to expected UI behavior is commendable). The tragedy here is that the user simply cannot get an appreciation of how these paintings look in real life, the size of a refrigerator.

The user can view larger images via a slimbox effect.

Betsy has been at this for a long time, and I’m thrilled that she now has a website worthy of her talents. And I’ve accounted for her back-catalog of images via a simple form of pagination. The user simply clicks to browse older posts.

A rudimentary form of pagination offers tasteful navigation to the archives.

The AER Adventure project is the perfect blend of simple, feature-rich, and attractive.

The first thing they needed was a way to integrate Google Maps into their layout. This is quite straight-forward, but a few things are of note: First, wordpress custom fields make it easier for the admin user to add and edit maps. Second, the maps have points and routes plotted on them, helping to entice visitors and manage expectations. Finally, the user can open the map in a new window if he so chooses, or he can scroll around in the default interface. It’s a blessing of modern web development that Google Maps is a free tool.

Sometimes a map is worth a thousand pictures.

Chris Hudson, one of the co-founders of AER, is a gifted photographer. I’m leveraging the power of the wordpress gallery feature in order to show off his work. The thumbnails open up as a lightbox upon being clicked.

The thumbnails open up in a lightbox-style slideshow and are easily controlled via the wordpress gallery feature.

Pick watch. Buy watch. Spray about watch on Facebook. Repeat.

Try it. You know you want to.

I’m not exactly sure why, but for some time now, I’ve nursed an interest in doing a layout that mimics a wanted poster from the old west:

The design was inspired by the idea of an old, weathered, wanted poster.

Of course, there is some connection between the design and content. Experienced railroaders sometimes engage in “cowboying”, which is a slang term for playing fast and loose with the operating rules. This could land such employees on a wanted poster of sorts!

And like this old wanted poster, the UTU has withstood the test of time and still bears authority in a challenging environment. That said, it is also an organization that changes with the times, as reflected by the more modern look of the footer.

The rustic, old-west look gives way to a more modern feel at the end of the design.

Platforms

I think that in the mid 2000′s, as CSS was over-taking tabular design, people were overly concerned with coding their own layouts from the ground up.  The fact is, it’s going to take ten to 40 man-hours to build an attractive layout that works well in every browser, and it’s not always in the best interest of your client for them to pay for this time.  There are thousands of layouts on wordpress that work great, and many of them have built-in controls for customizing bits and pieces of the CSS.  In this example, Shocking Goat is a start-up retail/fashion operation.  It makes no sense for them to pay me thousands of dollars for the entire design process.  Through dialogue, we settled on an appropriate wordpress theme, which was free, and I made a few quick customizations.

The shocking goat homepage. The background image, header image, shopping cart, and flash slideshow were all pre-existing parts of wordpress. I could have used plugins for the social networking items as well, but most were too bulky.

Content Management

It’s so common for business owners or web novices to be looking for help with tiny pieces of their content.  On almost any given day, you can find someone advertising on Craigslist, asking, “Please help me with my Flash Slideshow!” or, “Please, how do I post video?”  This kind of thing is so easy to do with wordpress, I feel like it’s borderline unethical to not recommend it to your clients right off the bat.  Shocking goat features several lifestyle and instructional videos related to their product line.

Wordpress makes it easy for non-technical users to post videos.

E-Commerce

This site exists to promote a brand, sell watches, and ultimately, make money.  This is very easy to do with wordpress.  I chose to use the WP E-Commerce plugin.  It works great!  It’s secure, it’s flexible, it’s fast for users.  Below, you can see the cart process, where the user has selected an item, and the item is added to his cart without a new page load:

The Ajax enabled shopping cart is fast and attractive.

The Social Network

For a start-up company, they sure do have a lot of facebook friends. I added these social networking tools at the request of the client.

Users can easily spread the word about Shocking Goat on facebook and twitter.