by Dan Rouse

With the release of WordPress 3.0, we were introduced to a new feature called custom post types. Since that time, CommAREus has been finding new ways to utilize this functionality to replace what was often handled by plug-ins in the past or simply managed by hand in the post editor. Despite our best efforts, the latter option often required the client to get involved in the HTML directly to achieve a certain layout which we always try to avoid.

For example, a client recently came to us looking to build a page in WordPress to list the members of an organization along with a photo of the member, their bio and contact information as seen below:

This layout could be achieved without the use of custom post types by styling the content by hand in the post editor, importing and aligning the images, applying any necessary classes, inserting the horizontal rules, etc. This approach may work for somebody with HTML experience, but can be an overwhelming task for somebody who does not. In addition, this solution can be prone to break the layout if you’re not careful when making changes or additions to the page.

Here is one situation where custom post types come in handy. We can define a new unique post type to manage this area of the site. This new post type can be managed from a new button with a custom icon in the dashboard as seen below:

This new post type can be custom tailored to accept the different pieces of content that make up each team member:

The post title is used for the team members name, the image is attached as the Featured Image, the bio is the post content and all other information is entered through the custom fields below the post editor:

Now that we have all of this information entered separately into WordPress, we can build a matching page template to describe how it should be displayed. This guarantees that:

1. the HTML will be formed correctly
2. the client won’t need to worry about breaking something
3. making changes will be as simple as modifying the template (rather than pages of previously written HTML)

Share this content on social media

•