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.

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.

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.

Now it can!

The repository.

Support and other info at the repository.

Of note:

• Add the shortcode ‘enlarge_text’ to your page templates or add the widget to your sidebar.
• The plugin saves a cookie when the user changes text size, so the text will stay enlarged across new page loads and site visits.
• This plugin uses jQuery and the jQuery cookie plugin. Users who disable JS will not be able to make use of this plugin.

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.