How To Design A Team Members Custom Post Type With Divi + Toolset

   Dario

How to

March 12, 2018
11

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:

I1
Enter the Name and description and click Save Post Type:

I2
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
  • Name
  • Biography
  • Nickname
  • 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:

I3
Then, click the Edit button under the Where to include this Field Group section:

I4
Choose the Team Members post type and click Apply:

I5
Now, use the + Add New Field button to add all the fields mentioned above. Once you’re finished, it should look something like this:

I6
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:

I7
But…those custom fields won’t display on the frontend. At least not yet!

I8
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


I9
Then, in the Edit Content Template interface, click the button to activate Divi Builder:

I10
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:

I11
Choose a regular Text module.
Then, when the Text Module Settings screen loads, click the FIELDS AND VIEWS button:

I12
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:

I13
Then, depending on the field that you chose, you’ll be able to configure some additional settings. Once you’re done, click Insert Shortcode:

I14
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:

I15
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):

I16

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:

I17
And on the frontend, that dynamically pulls in information from your custom fields to look like this:

I18
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!

 

Comments 11 Responses

  1. Hi Marine ,

    I have been using the Divi integration for a number of months now and it is a really pleasant way to work when making templates.

    We still need to Elegant Themes to do a bit of the heavy lifting at their end so that the builder can be used to its full potential to facilitate layouts where the sections are displayed, fullwidth from edge to edge of the browser window.
    I am currently using some css boiler plate in my child theme to style this into place, so am happy enough till they get this in place.

    • Can you give me some indication if Toolset is still supporting the Divi integration. I see this article but I notice if I navigate through the main documentation to Theme integrations only WP Bakery and Beaver Builder are listed. I have to do a search on Divi to find the documentation connected to it.

      • Hi Marine,

        I have brought it up on the Theme Suggestions forum at Elegant Themes and they have hinted that they will consider my suggestion. I am not sure if this is a big priority for the dev team and I can understand if they have other priorities.

        They have been introducing many new great features to the Divi framework in the last year, which are welcome, though there are a lot of small things needing attention that many have been agitating to get fixed or added.

        Notably:

        • Global responsive settings for headings (h1-h6) for different viewports.
        • Better handling of responsive images incorporating the srcset css rule to handle this.
        • Automatically inserting the alt tag when adding images if they exist in the media library.
        • One issue that Toolset Views also shares. Adding the absolute path from image uploads into page markup when attaching images instead of the relative path from the root: /wp-content…

        There are many more small things which I can’t remember off the top of my head. Nearly all of these are trivial things to fix or manage if you are using a child theme and are prepared to do a bit of under the hood work with php, css and javascript.

        I know that Nick and his team are also working on what they are calling the developer preview that may address all these issues. When that is going to appear, nobody knows yet.

        If I get time over the next few days I will update my research page on how to apply styling to custom post types using the Divi Builder for layout so that the sections span the full width of the browser window. I can post the link here, so that it is available for others to use.

    • Hi Stephen,
      Yes I remember investigating this case. We have contacted ET but did not get any replies from them. By any chances did you post anything in their forum? Sometimes it helps. We are happy to collaborate with them, of course.

  2. Hello Stephen, thank you so much for giving us your feedback and more information about Divi’s plan. If you have a tutorial to share with us or some tips, I would be happy to add it to our tutorials. Let me know?

    • This is really great. I’ve just informed Dario, our doc manager and he’ll take a look at it and how we could add this to the documentation etc. I keep you posted Stephen. Thanks a lot for your contribution!

  5. Hi Marine,

    Not quite but I do notice that without realising it that the information on my page is incorrect in that the Before screenshot sowing the boxed columnar style is wrong. The css boiler plate I use mainly removes the meta and featured image and some padding on the bottom of the content left area. I seem to have been referring to the workaround prior to the update to Views last year with the Div integration.

    Sorry for the confusion. I updated my page to reflect this:

    http://portfolio.vaughanprint.com/toolset-types-divi-integration/