WordPress Custom Post Types in Action | Web Development Services by Ed Nailor
Today I wanted to share from a recent project in which I used Custom Post Types within the WordPress CMS to create a very easy to use interface for my client. The purpose of this post is display what can be done with WordPress’ Custom Post Types and encourage others to build user friendly backend interfaces for their clients.
The client is a mortgage company specializing in Charlotte, NC area home loans. The project consisted of re-freshening of the website design, giving the client a way to highlight offerings and capabilities (using header image slider), create an online directory of employees for users to find the right person, and to share success stories (commonly referred to as testimonials.)
Many of these items could have been managed with “posts” and placed in a certain category, such as “Testimonial” or “Employee.” While this could have worked, the issue is that we needed to display some fairly specific items for each, and making the client use Custom Fields would have been asking too much. They needed an easy way to add and manage the content without a lot of fuss.
Custom Post Types (and custom meta boxes) to the rescue!
As you can see in the image to the left (click for larger view), a unique interface was created for adding the Header Images. Originally, a slider plugin was considered; however, there was some additional functionality we wanted to add to the site ( allowing Success Stories to also be used in the slider ), so in the end, a slider was built into the theme and the CPT was built to power that. Up to 5 images are loaded, and if there are more than 5, the slider selects random images to display. There is an override to require certain header images be used (if they are running a special for example).
With each Header Image entry, the client can add a title (for their reference), upload a header image which is automatically resized to fit, add a simple quote for the slider caption feature, link the header image to a page and the override to require the image to be used in the rotation. Fairly straight forward!
In the image to the left (click for larger view), a custom post type was created to manage the staff directory and individual employee profile pages. This one is gathering a lot of information.
Instead of one post editor, we have used several individual post editors to separate parts of the content. The idea behind this was to allow us to group sections together for a better display on mobile devices, with each section collapsed yet expandable to learn more. This keeps the mobile view from becoming a super long scrolling page!
We are using 2 Custom Taxonomies with this CPT. This allows us to group employees by office location and their position. When displayed on the website, we now have a great way to group these as needed. If the client wants to add a menu link to their navigation to highlight each office, they now have greater flexibility to do so. If the user wants to only see a certain type of employee, we have the option to create this page as well.
In addition, we are gathering a bit more information, including any social profiles the employee may have and specific contact / licensing information. All of this is used later in the employee’s profile page, which by way of special permissions, they are allowed to update as needed. These are broken up into logical sections with the Social Profiles having its own section to enter information, and the rest of the information being grouped together. The result is an interface that allows the user to quickly identify the information they need to update!
The image to the left (click for larger view) shows the interface for the Success Stories (aka Testimonials). Again, to make sure things are easy to work with, we really clearly identified sections and information for the client to work with.
The Title section allows for the name of the person the story or testimonial is about. The editor is used to enter the full story / testimonial (hopefully the story or testimonial is longer than 2 lines!) Below the editor, we have added a Pull Quote that allows a quick, shorter version of the story / testimonial which is used in the sidebars with a custom built widget. The Pull Quote can also be associated with the type of individual the story is about, such as a Realtor review, a First Time Home Buyer, refinance client, ect.
To the right right, we have added an interface that allows the client to upload an image for the Success Story with a quote for the caption. This also has a feature that allows them to add this to the rotation! In doing this, the Header Image slider can use a large number of images on a random basis, really providing a unique view to each user that visits the website!
Below the Pull Quote is one of my favorite items… the Sidebar Selector. This is a custom bit of coding I created that allows the client to choose from a number of widgetized sidebars for each page, giving them the option to set up any number of sidebars to be used as needed. In addition, there are 2 editors that allow for HTML content to be added above or below the sidebar widgets, giving the client an awesome ability to customize the sidebar area on a page by page basis. This is also added to the standard pages and posts within WordPress.
There you have it! Using the Custom Post Types withing WordPress, we were able to give the client a very robust, yet easy to use interface for their website. As a result, the website is more powerful and easy to maintain. And with the custom interfaces, the client isn’t having to call me every day to figure out how to edit or add content!