If you could list three things that make a good website, what would they be? Perhaps great design, valuable content, and good functionality are some of the first things that come to mind. A functional site goes with a friendly navigation that lets your visitors quickly access all their needed information. But how about from the content administrator’s perspective? When speaking of a fully functional site, the content editors cannot be neglected.
Today, David Zack, from the California-based firm Metaglyphics, shares how he used Types and Views to build a site that looks nice, serves valuable content for visitors, and is fully functional for the end-user: a musical theater composer.
CrunchyNotes is the website of musical theater composer Deborah Wicks La Puma. The customer needed a new site that would allow her to catalog her shows and display information consistently.
Project challenges:
There was plenty of information to present for each show. How could all be displayed without overwhelming visitors?
The site owner is an artist, a non-technical person. How do we make the content presentation completely consistent and simple for the site owner to maintain?
About the author
David Zack, the project’s author
David Zack is the owner of Los Angeles-based web development agency Metaglyphics. Specializing in WordPress development, Metaglyphics routinely develops sites that leverage custom post types, fields, and taxonomies to extend the WordPress platform and thus provide advanced content management strategies.
Most interesting features of the site
Here are some of the most noteworthy features of the site. For each one, we indicate what will be covered in detail in the next chapters.
Single show page
Single show page
What structures were used to store shows data
How comprehensive information of a single show was nicely organized on the front end with tabs
How the Types plugin simplified the editing of single-show items for the content administrator
Home page slider
Home page slider
How it was built with Views
How easy it is for the site owner to add new slides
Filterable gallery of shows
Filterable categories for the gallery of shows
How the filter effect was achieved
Stay with us to get inspired by David’s ideas. Who knows, maybe you will find them as ideal solutions to apply in your next project done with Toolset!
How things were implemented
We dig into technical details starting from explaining how a Single show page was implemented.
Single show
Starting off with WordPress structures
When a WordPress developer starts her/his work on a new project, a first step is to identify the core objects and then setup the basic structures for them.
“Deborah asked us to develop a new site that would allow her to catalog her shows and display information consistently,”
recalls David.
“We populated the initial content before launch, migrating the info from the client’s old site (and stripping out all the inline HTML, tables, and errant tags that had been pasted from MS Word, etc…). Types allowed us to quickly create all the custom fields the client needs.”
A theater composer writer’s job revolves around writing musical shows. As such, the core object of the site was obvious: a show.
A custom post type called Shows was used for storing shows.
Shows can be also categorized (Cabarets, Musicals, Musicals for Young Audience, etc.), and for this a taxonomy called Show categories was used.
All shows in the crunchynotes.com WordPress dashboard.
There is plenty of information associated with a single show, to list a few:
Subtitle
Synopsis
History
Musical numbers
Production elements
Co-authors
Others
David used custom field groups of the Types plugin to store the show’s full information.
Here’s how a back-end user can easily edit single-show information with custom fields:
How the Types plugin simplified the editing of single-show items
Note how the information presented in the back-end fully reflects the structure presented for a front-end user. This arrangement is very important for a content administrator who is not a technical person. The site owner can easily locate each piece of information to edit.
Compare the pictures below:
Single show information, from-end view
Single show information, back-end view (1/3)
Single show information, back-end view (2/3)
Single show information, back-end view (3/3)
This functionality was easily achieved using Custom Fields Groups, a feature of the Types plugin that allows the user to:
define custom fields
combine related fields into groups
associate custom fields groups with a custom post (in this case, Shows custom post type)
How complex information was organized with tabs
A single show, front-end view.
As they say, less is more. We all know that providing visitors with too much information all at once can overwhelm them, and the final effect could be counterproductive. David came up with the idea of organizing comprehensive information on each show in tabs. This concept paid off. See the results.
To achieve this smooth effect, David integrated the “Responsive tabs” jQuery script. It allowed him to present the show details in a nicely structured way.
Integrating ready-to-use jQuery scripts with your WordPress contents is easy if you:
are familiar with HTML basics
use Views plugins
Let’s try to replicate David’s steps to end up with a similar effect:
The Content Template was used to handle single show output.
Step 1. Content template for single custom post. You are going to display a single Show post, so you need to create a new Content template (a feature of the Views plugin).
Show Details Content Template. HTML was used to combine show information with the tabs effect.
Step 2. How to group show info details into tabs. To integrate the JavaScript that will handle the tabs effect (for instructions, refer to petelove.com), you need to wrap your contents into some divs and other dedicated structures and then assign a few classes.
Views let you combine the HTML with your database content (Show information in this case) easily. See the picture above.
Show Details Content Template, js section. Here’s where you add your js plugin to your Content Template.
Step 3. How to add your jQuery plugin. To add a custom JavaScript to your Content Template, you use the “Content Template CSS and JS” section, as shown in the attached picture.
Home page slider
Why choosing a slider for a home page was a good decision
As we already mentioned, making the site content easy for your site owner is as important as making the site attractive for visitors.
The home page is the most important page of your site. What’s above the fold also matters. David decided to include a slider with unique pictures of performances made by the composer, and these images link to show details.
A slider on crunchynotes.com (1/2)
A slider on crunchynotes.com (2/2)
The idea was excellent. Rotating images of actual theater shows magnify the performance character of the information presented.
How the slider was implemented using Types and Views
The Views plugin let you insert sliders easily. For this, you need to create a special view, that is, a view dedicated for sliders.
David shared a full set of screenshots to show how easily he implemented his Home Page Slider with Views:
How Slider was implemented with the Views plugin (1/4)
How Slider was implemented with the Views plugin (2/4)
How Slider was implemented with the Views plugin (3/4)
How Slider was implemented with the Views plugin (4/4)
David also considered the content administrator. Look how easy it is to include a Show post into the slider.
To include a show in a slider, you simply need to check one field.
Filterable categories for the gallery of shows
Now let’s go to the Shows page, another important part of our composer’s portfolio site. This page presents artistic achievements of the site owner.
Again, the first impression of your visitor is extremely important. The goals are as follows:
Not overwhelm the user with too much information,
To present the portfolio in a form that is pleasing to the eye,
To make it filterable by specific category.
Subpage displaying the shows on the crunchynotes.com site. Filterable gallery of shows.
By presenting only the title and a cover for each show, David managed to meet the first two of the goals outlined above. Each show cover is a link that allows viewers to visit the page presenting the full information on a single show.
The gallery is filterable. For example, when you click the “Musical for Young Audiences” tab, all items that are not in that category will be hidden.
David used the Isotope jQuery plugin for the filter effect. David was inspired by this tutorial, which was posted, incidentally, by another happy user of Types and Views, Sridhar Katakam.
Final thoughts
David built a site for his customer with the Types and Views plugin to present information in a clear, easy-to-use manner.
By using Toolset, he was able to make the content presentation completely consistent and also simple to maintain for the site owner. Now, Deborah Wicks La Puma, a musical theater composer, can easily update the contents herself.
Here’s how David summarizes the advantages of using the Types and Views plugin:
David Zack
“You have a lot of people who use Types because they don’t know how to build CPTs and templates. But you also have a lot of people like me, who could do it from scratch, but find that Types has advantages. For me, there are several pluses:
Rapid CPT deployment
Easy CPT management; keeping the code in the Types plugin helps keep the theme function files slimmer, and makes it easy to migrate custom functionality to a new theme.
Views can be modified and adjusted through the dashboard, rather than revising the template code in a PHP editor.
So, even though I could probably do everything without it, Types just makes it easier.”
A note from the editor
Agnes Bury, the case study author
“When I was working on this case study with David, I noticed a section titled ‘How To Do Stuff’ on his site’s dashboard. I knew it had nothing to do with Toolset, but I was just curious what it was and asked David to explain.
In reply, David recorded this screencast for me. I liked the idea of using this WP help plugin so much that I asked David if I could share the video with our Toolset readers, too. David was kind enough to say ‘yes’ and here it goes.”
A screencast recorded by David explaining how the “How To Do Stuff” plugin works.
If you could list three things that make a good website, what would they be? Perhaps great design, valuable content, and good functionality are some of the first things that come to mind. A functional site goes with a friendly navigation that lets your visitors quickly access all their needed information. But how about from…
Wonderful! I don,t know about you all, but it seems I’m more and more losing the focus to read long texts. These videos are really useful in so many ways.
Keep them coming please 🙂
Great post, so many ideas to take in.
I was looking into the use of the “isotope” script to enable the fancy visual sorting of the filtered View.
There’s another post on Sridhar’s site which looks more relevant than the article you linked to, as it specifically deals with how to implement isotope using Types/Views. http://sridharkatakam.com/how-to-set-up-a-filterable-portfolio-in-wordpress/
Wonderful! I don,t know about you all, but it seems I’m more and more losing the focus to read long texts. These videos are really useful in so many ways.
Keep them coming please 🙂
Great post, so many ideas to take in.
I was looking into the use of the “isotope” script to enable the fancy visual sorting of the filtered View.
There’s another post on Sridhar’s site which looks more relevant than the article you linked to, as it specifically deals with how to implement isotope using Types/Views.
http://sridharkatakam.com/how-to-set-up-a-filterable-portfolio-in-wordpress/