How To Design A Team Members Custom Post Type With Divi + Toolset
Custom post types allow you to turn WordPress from a blogging platform into a full-fledged content management system. They’re flexible, powerful, and…well, wait. There’s just one problem, actually…
As powerful as custom post types are, they’re not very accessible to casual WordPress users because you need to know how to code if you want to do anything useful with custom post types. Or at least that’s what a lot of people think.
In this post – I aim to change that by showing you how you can use the popular Divi Builder page builder to design a template for a custom post type that dynamically pulls in data from that post type’s custom fields.
To follow along – you won’t need any coding knowledge. All you’ll need is:
- The Divi Builder (either the standalone plugin or the version that comes with the Divi theme)
- Toolset (specifically the Views and Types modules)
Interested? I think it’s worth checking out!
Here’s how to design a custom post type template using the Divi Builder and Toolset…
In this post, I’m going to show you how to build a Team Members custom post type, complete with a Divi Builder template that dynamically pulls in team member information from custom fields.
With that being said, the principles that you’ll learn in this post can be used to build literally anything – building a team members page just provides a practical application for us to focus our attention on.
By the end of this post, you’ll be able to build a custom post type, add custom fields, and display those custom fields in a template without writing a single line of code.
What You’ll Need Before Getting Started
I’ll try not to assume too much for this guide. But there are a few things that you should have before you jump into the tutorial below:
- Toolset Types and Toolset Views installed and activated
- The Divi Builder plugin or Divi theme installed and activated
- Basic knowledge of what custom post types and custom fields are (I’m not going to focus on the theory for this post – just the how-to)
- Basic knowledge of how to use the Divi Builder plugin (or at least a basic understanding of how page builders work). WPLift has a nice Divi theme review for you to read. That should get you started.
But here’s what you don’t need – coding knowledge.
If everything checks out, you’re ready to get started.
Step 1: Create A New Team Members Custom Post Type
Before we get to the template, you need to actually create your Team Members custom post type using Toolset.
To do that, go to Toolset → Post Types → Add New:
Enter the Name and description and click Save Post Type:
Below, you’ll probably want to configure the various options for a live site, but they aren’t relevant to our tutorial right now.
Step 2: Create A New Post Field Group And Associate It With The Custom Post Type
Post Field Groups let you create new custom fields and associate them with the Team Members custom post type that you just created.
Custom fields let you add all sorts of helpful information. But for our purposes, we’re going to focus specifically on the data that curious visitors would want to know about each of our team members.
That means we’ll want to add custom fields for things like:
- A picture of the team member
- Phone number
- Date of birth
- Skype address (so visitors can click a button to call our team member right away!)
To get started, go to Toolset → Post Fields and click Add New. Give your group a name and then click Save Field Group:
Then, click the Edit button under the Where to include this Field Group section:
Choose the Team Members post type and click Apply:
Now, use the + Add New Field button to add all the fields mentioned above. Once you’re finished, it should look something like this:
Make sure to save your field group once you finish adding all of the fields.
Now, if you go to Team Members → Add New, you’ll be able to use your new custom fields:
But…those custom fields won’t display on the frontend. At least not yet!
That’s where the Divi Builder comes in…
Step 3: Design Custom Post Type Template Using Divi Builder
Before you can display the custom fields you added to the Team Members post type, you need to create a template for your custom post type.
To do that:
- Go to Toolset → Post Types
- Edit the Team Members post type
- Click Edit Content Template
Then, in the Edit Content Template interface, click the button to activate Divi Builder:
And then you can click the big Edit with Divi Builder button to launch the Divi Builder interface.
Here, you can do anything that you would normally do using the backend Divi Builder interface (no frontend visual editing, at least for now).
That means you can insert regular Divi modules, use the Divi Builder styling options, and do pretty much anything else that the Divi Builder allows for.
How To Insert Dynamic Data From Your Custom Fields
Ok – here’s the cool part. You know those custom fields that you created a second ago? Now, you’re going to learn how to use them in the Divi Builder.
First, click Insert Module like you would for any other module:
Choose a regular Text module.
Then, when the Text Module Settings screen loads, click the FIELDS AND VIEWS button:
That will open up an interface that lists all the custom fields available to you. Look for the Team Member Information field group and choose the first field that you want to insert:
Then, depending on the field that you chose, you’ll be able to configure some additional settings. Once you’re done, click Insert Shortcode:
If you want to add static text before or after the dynamic data from your custom field, you can do that in the Content box. Otherwise, you’re pretty much finished:
Before you close the settings, though, I recommend that you scroll down to the Admin Label option in Divi Builder and rename the module to whatever custom field you inserted. This will make it easier to remember which module represents which custom field later on (otherwise, you’ll just have a bunch of faceless Text modules):
What The Final Template Looks Like:
After laying out the various custom fields, your Divi Builder should look something like this, depending on your desired design:
And on the frontend, that dynamically pulls in information from your custom fields to look like this:
All that’s left to do is add some styling using the regular Divi Builder settings, and your template is complete!
Here’s To More Accessible Custom Post Type Templates
By integrating with page builders like Divi Builder, Toolset makes custom post types and custom fields accessible to non-developers (or makes it easier for developers to quickly build websites, depending on where you’re coming from!).
Remember, to go from zero to working custom post type template, all you need to do is:
- Create a new custom post type
- Add custom fields to that post type
- Dynamically display those custom fields using the Divi Builder text module
Now get out there and create something awesome with Toolset and the Divi Builder!