Most companies and organizations want to have a page where they can display their team (whether that includes employees, book club members, volunteers–you name it!).
You can find lots of plugins at WordPress.org that can create this kind of page; they offer a wide range of features like responsiveness, a single page view for each member, lots of pre-built styles, and more. As you may already know, though, we’re big fans of CMB2; today I want to show you how you can use it to create a team page that makes your team look great using just CMB2 and few lines of custom code.
First, we need to register our form and fields:
This method is using the new CMB2 form and field registration API, introduced in version 2.0.2.
Let’s break down this code snippet:
- We’re adding a “Team Member” metabox to the “page” post type.
- ‘show_on’ adds conditions indicating when to display this metabox. In this case, we only want to display it when the page template is set to ‘full-width.php’.
- Then, we’re adding a repeatable group field, with three additional fields – Full name, position and photo.
After your form and fields are registered, we can start working on how to display our awesome team on the desired pages. In this example, we’ll be using WordPress’ Shortcode API.
Now, let us register a shortcode called ‘maintainn_team’:
This shortcode will get the current post using the ‘get_post()’ function. It then retrieves the team data stored in post meta using the ‘_maintainn_team_meta’ meta key.
Now, we can display our team members on the page. Obviously, we’ll need to add some styling to match our design, but below you can see the final results, using the Twenty Twelve theme, and only fifteen lines of custom CSS.
And there you have it! It’s super easy. Add this to the list of one of the many things you can do with CMB2 (and if you want more how-tos with CMB2, check out Justin Sternberg’s post on how to wield CMB2 to create a new post submission form as well). Have any questions? Throw them in the comments!