How to build a functional and easy-to-maintain site for a musical theater composer with Types and Views
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.
About the project
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.
- 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 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
- 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
- How it was built with Views
- How easy it is for the site owner to add new slides
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.
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,”
“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.
There is plenty of information associated with a single show, to list a few:
- Musical numbers
- Production elements
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:
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
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:
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).
Views let you combine the HTML with your database content (Show information in this case) easily. See the picture above.
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.
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:
David also considered the content administrator. Look how easy it is to include a Show post into the slider.
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.
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 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:
“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
“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.”