Category: Recent Projects
The Best “Staff Directory” Page
| September 3, 2012 | Filled under Recent Projects |
The folks at Illuminage approached me recently, with the following goal: We need to make the best possible “Staff Directory” page and we need to be able to package it up as a plugin for future projects.
Of course, my mind began to race with ideas for leveraging custom post types, custom taxonomies, custom menus, and jQueryUI. They sent me a design, and here’s what I came up with:
Employees are a custom post type called “People”, organized via a custom taxonomy called “Departments”. The admin user can output all his people via the shortcode [all_people] and he can publish an individual department via the shortcode [people department="finance"]. I also registered a custom menu called “departments”, which is called with the shortcode [departments].
So the result of this, on the front end, is a menu allowing the visitor to browse by department. In this case (below) the admin has used the [all_people] shortcode as a landing page. So when the user goes to the directory landing page, he sees all the employees. That adds up to about 60 employees on this project, which is probably the upper limit of what I’d like to see on one page load.
Toward the top, you can see that the admin user has invoked the [departments] shortcode, generating the menu of departments. The page body is the result of the [all_people] shortcode.
I’m using the jQueryUI modal dialog effect to allow for drill-down. When the visitor clicks one of the thumbnail images, it fires a dialog box containing the details for the person.
The visitor has clicked a thumbnail and is now met with the details of that person.
How is this managed? I added some customization to the edit screen, giving the admin user the necessary form inputs.
Here, the admin user can categorize the person into multiple departments. He can also apply the thumbnail image.
The bulk of the data input for each person. Notice that the admin user can apply a second image, for the drill-down view.
And here’s what makes the whole thing so flexible. This is why Illuminage will be able to use this on any layout, for any client:
This looks a little obscure, but bear with me. The plugin creates a management page allowing the admin user to have full control over the output format. The admin user uses hash-codes like ###first_name### and ###last_name###, applying whatever HTML he wants.
Marler Blog WP Migration
| September 2, 2012 | Filled under Recent Projects |
Bill Marler is the best known food safety attorney in the world. At Lexblog, we’ve been undertaking to move his blogs to WordPress. It’s been a blast because he has so much content, and posts so frequently, that we have to work extra hard to make sure his posts are easy to create and easy to navigate.
The Marler Blog homepage. Note the “pull-tab” on the top right.
When you have a lot of content to jam into a page, one good way to do that is through jQuery show/hides. Here’s three:
The user has clicked the “pull-tab on the top right, revealing this hidden area. The contact info on the right is a custom menu and the tables of links on the left are driven by a custom widget: Input a link category and get the links that fall under that category.
This is a custom widget that showcases an arbitrary number of rss feeds. The admin user enters parameters for RSS url and output formatting, and he gets this spiffy show/hide widget.
Another jQuery accordion show/hide. Click “See More” to, well, see more.
When you’re dealing with a ton of content like we are on this site, it helps to break things up into smaller chunks. For example, instead of crowding the posts or pages interface with more content, I used a custom post type to drive the “Awards” section.
What you see here are the featured images and post titles (as a link href) for all posts of the “award” post type.
Bob Silver WP Build
| September 1, 2012 | Filled under Recent Projects |
I’m working full-time at Lexblog now, building WordPress themes and plugins. We recently launched a website for PR guru Bob Silver. It’s a clean design with a few key features worth highlighting.
The priority here is to make the site easy to manage. We want to show some teaser content on the homepage, but not force Bob to maintain two sets of identical content. Therefore, the homepage is a custom page template that calls teaser content from designated interior pages.
The Bob Silver PR home page is a custom page template, automatically drawing excerpts from several designated interior pages. That way, Bob doesn’t have to repeat himself!
The “Clients” page features a jQuery show/hide list of his clients, organized by category. As an extra visual treat, the category items fade in and out as the user transitions between categories. The clients and their parent categories are driven by a custom taxonomy, so populating the content was a snap.
The clients are driven by a custom taxonomy, similar to “categories”.
It was important to Bob to add some abstract imagery to color his content a bit. I used a custom meta box with a field for uploading an image file to, essentially, create a second featured image to associate with each page.
The secondary images for these pages are displayed on the home page. The primary images for these pages are displayed when the user drills down to the individual pages themselves.
WA Ombudsman WordPress Build
| March 27, 2012 | Filled under Recent Projects |
You give me a layered file, I give you a wordpress site. How much it costs depends on the complexity of the design; how long it takes depends on my coffee supply. This project, the Washington State Long Term Care Ombudsman Program site, fell right into my comfort zone. The design, from Illuminage Communication Partners, is quite straight-forward, easy to navigate, and a blast to code for.
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.
NWRC WordPress Build
| March 27, 2012 | Filled under Recent Projects |
I’ve been working for Illuminage lately, building wordpress sites based on mockups from their design squad. For the Northwest Regional Council project, I implemented a couple of special features.
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.
Shopify: Let’s Get It On.
| March 2, 2012 | Filled under Recent Projects |
I’ll say this about e-commerce platforms: If it’s something you can download (perhaps from a vendor or a plugin repository) and upload to your own server (example: WP E-Commerce), then it’s probably extremely flexible. You can probably integrate it into any page template you can imagine. You will never have to say, “No, we can’t use that design because this shopping cart won’t work with it”.
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.
Getting Creative with WordPress Custom Page Templates
| September 7, 2011 | Filled under Recent Projects, wordpressery |
Shocking Goat, a Seattle watch designer for whom I regularly work, is picking up steam. They have photographed a growing number of celebrities wearing their watches and were looking for a way to show them off. I was initially inspired by the FolioGrid premium WordPress theme, but in the end, my code is much different.
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 Barnum’s Reverie Studio
| August 11, 2011 | Filled under Recent Projects |
I love working with artists. It frees up the poorly developed right hemisphere of my brain so that I can devote 100% of my computational power to the CSS and server-side code. Betsy Barnum, in addition to being a personal friend, is the most talented painter I have ever worked with. more
AERAdventures.com
| July 18, 2011 | Filled under Recent Projects |
AER Adventures is a new tour operator here in Alaska, with operations also in the lower 48. They already had a great design on the wordpress platform when they approached me for some work; they just needed me to fix some layout bugs and integrate a few more features. more
Learning Javascript as a Second Language
| July 7, 2011 | Filled under Recent Projects |
I don’t really have a good explanation for it, but client-side scripting has always been so much harder for me to learn than server-side. Fortunately, for this project, I had an amazing design from Brad Bowen that was way too good for anything less than legit JS. more
UTU1626.org
| July 7, 2011 | Filled under Recent Projects |
The local chapter of the UTU 1626, of which I am a member, is currently using my platform for it’s blog. My blogging platform doesn’t come close to surpassing wordpress in any area, other than perhaps download size, but there are some solid design elements on the UTU site that I would like to point out. more
www.ShockingGoat.com
| April 6, 2011 | Filled under Recent Projects |
ShockingGoat.com is an online store that I built with wordpress and WP E-Commerce. It features an Ajax-enabled shopping cart, lots of product visibility, and secure payment. more
Just Say It