How to use Dynamic Content with Kadence

One of the greatest benefits of Kadence Pro plugins is the ability to create WordPress websites that leverage dynamic content. In this blog post, we’re walking through some of these benefits with a specific example of a staff directory listing. 

We discussed the use cases and benefits of dynamic content on a recent episode of The Kadence Beat, and we wanted to provide a tutorial walkthrough so you can get started building sites with dynamic content to save time, empower less technical users, and create more useful and effective content for your site visitors. If you’d like a more broad explanation of dynamic content that touches upon some of these concepts, we recommend giving that episode a listen (or the transcript a read). 

What is dynamic content?

Dynamic content, generally speaking, is any content entered on your site that is not static. For example, when a user is logged in and reviewing their account on your site, they are viewing their own account information that is dynamically pulled from the WordPress database rather than statically entered in a post or page.

For the purposes of this tutorial, dynamic content is anything that is entered into a custom post type and separated completely from the design of your site using WordPress custom post types.

In essence, everything on your WordPress site is dynamic content. Post and page content is stored in a database separated from your design elements, making redesign easier.

In this tutorial, we are taking it one step further and separating content into specified fields that is then shown in a Kadence Elements Template. The content is entered into specific fields in the WordPress admin, and it is displayed dynamically on multiple pages. However, only one page needs to be designed, the template itself.

Dynamic content allows site owners to create a database of numerous items displayed on just a few templates, making data entry easier, design easier, and site management much more simplified.

When should you use dynamic content? 

Dynamic content is a powerful way to control the display of content on your website. Here are a few examples of when dynamic content could  be used to solve a specific issue:

Content that fits in the same containers. This means that you have content that can fit into similar buckets, so to speak. In our staff directory example, staff members’ name, email, social links, biography, photo, phone number or any other specific parameters would make an excellent use case for dynamic content. If your content fits well in a spreadsheet, then it can be considered ideal. 

A lot of content. If you only have a small staff, then the effort to create dynamic content might not be worth the effort. But if you have a lot of content, such as a lot of staff members, building custom fields to handle the content makes a lot of sense. 

Content that must be shown differently in multiple locations. If you’re showing content differently in multiple locations, it’s often a great decision to store content in one place and style it differently on those multiple views. One example might be a staff directory, where the name and phone number of multiple staff members are shown in a list, but a link will show all of the information associated with one staff member. Or, perhaps you want to have a page that shows staff members in one department on one page and also provide a link to click through to view one staff member’s page.  

Content that changes frequently. If you are adding and removing content frequently, it might make sense to have non-technical staff handle the updates. If you’re on and off boarding staff often, having HR staff manage the public-facing content as a part of their workflow makes a lot of sense to optimize efficiency. If you’re building a site for a client that is budget conscious and open to managing content themselves, spending a little more to build a dynamic content implementation up front might be the best solution for them in the long run.

Complex or unique layout requirements. If you’re adding content to complex and unique layouts and adding non-technical staff into the mix, the opportunity to create layout havoc can exist. Separating design and content can be helpful in a case where you’d like data entry to have zero exposure to design decisions. 

Design that changes often. Restyling a staff listing for a large office when a site is redesigned can be a pain. Separating the design from the content can make site redesigns in an era where design standards and tastes can change often. 

Making the decision to use dynamic content is definitely something that should be done on a case-by-case basis and may incorporate all of these reasons or just a few. Just because you have design that changes often doesn’t require dynamic content if you only have a few pages, for example. And frequent content changes might not necessitate dynamic content. But coupled with some of the other reasons, you have important use cases for dynamic content. 

Using these reasons in a proposal for a client can be helpful in explaining the return on investment for dynamic content for a website you might be building for them. 

What you need to get started with dynamic content

Getting started with dynamic content is easy, but you’ll need a few things. 

• Custom Post Type UI plugin. This plugin is freely available on the WordPress.org repository. There is a pro version available, but for this example, the free version will work just fine.
• Advanced Custom Fields plugin.  This plugin is freely available on the WordPress.org repository. Again, there is a pro version, but free will work for this example. 
• Kadence Blocks Pro & Kadence Theme Pro plugins. To save, we recommend getting started with a Kadence Bundle. The Kadence Essentials Bundle will suffice for this example, but the Kadence Full Bundle also provides a number of other tools you might wish to consider, such as Kadence Conversions and Kadence Shop Kit for WooCommerce stores. 

Once you have these plugins installed and activated, you can get started with dynamic content. 

An example case for dynamic content: building a staff directory

For our example in this tutorial, we’re using dynamic content for a staff directory. In our fictional company, we’ve got a staff of 50 people company, and they’re all in various departments. We’d like to separate them by their department, too, as we know a few departments will be growing as revenue increases. We don’t want our web team to be managing the staff listing, but Jane in HR is going to include adding, removing, and editing staff members to her workflow when there are personnel changes. Jane doesn’t want to bother with the site design and the web team wants to make this quick and easy for Jane, so this is a perfect case for custom post types and dynamic content.

Setting up custom fields with Custom Post Type UI

Defining the fields that you’d like to set up with is easy to do with a spreadsheet. For our example, we’re using the following fields for our staff directory:

• First Name
• Last Name
• Email Address
• Phone
• Biography
• Photo

Once defined, you can set these up in your WordPress site using the Custom Post Type UI plugin. 

You could alternatively use the featured image for the staff member’s photo and call that dynamically, but since we’re going to be turning over data entry to a non-technical person, we’re going with a separate field to ensure that all elements they need to enter are in one place.

Install & activate the Custom Post Type UI plugin

In your plugin dashboard, click “Add New” and search for Custom Post Type UI. Click “Install Now” and then “Activate.” 

Add the custom post type name

Once installed and activated, navigate to CPT UI > Add/Edit Post Types. Next, add the post type name that you’d like to use. For our example, we’re adding “staff” for our post type, and using that also for singular and plural naming. These values will end up in your wp-admin navigation, so ensure that you choose something meaningful for the audience who will be seeing it in wp-admin. 

There are a number of customizations CPT UI offers, including the ability to add a dashicon if desired. All of these are optional. If you choose a dashicon, that will show in the left sidebar next to the staff post type, otherwise you will see a pin. 

For our example, we only want people using our data entry on wp-admin to use our defined fields, so we are turning off the editor under “Supports.”

Install & activate the Advanced Custom Fields plugin

In your plugin dashboard, click “Add New” and search for Advanced Custom Fields. Click “Install Now” and then “Activate.” 

Add the custom fields using Advanced Custom Fields

Next, we’ll be populating the staff fields we determined are important to our site. This is done within Advanced Custom Fields. Navigate to Custom Fields > Add New. 

Here, we will define which group of custom fields we would like to display, and where we would like them displayed. 

For our example, we are naming our custom fields “Staff Fields” and we are defining that they are shown within the “staff” post type under “Location.” 

Now, we’ll add our individual fields we determined above. Click the “+ Add Field” button to begin. Note: there are a number of field settings that may be helpful to you beyond this tutorial, but we’re going to keep it simple for those who are just getting started. 

As we get started and type in Field Label for the “First Name,” note that the “Field Name” will automatically populate “first_name” for us. We’ll keep this a text field type and we’ll make this required. 

Once we’ve completed adding First Name, we’ll click the “+ Add Field” button to add our second field, which is Last Name. We’ll add that as a text field, too, and we’ll make that required as well. 

We’ll do the same for Email, but here we will choose the Field Type to be “Email.”

For Phone, we’ll add this similarly as a “Text” field. 

For Biography, we may have more text than normal, so let’s make it a larger blox. The “Text Area” will provide a larger box. 

For Photo, we’ll select an image field type. There are a number of parameters that you can set to ensure that your data entry people add content that works to your needs. For today, we’re not restricting this. 

Once we have our fields entered, click “Publish” like you would for a normal page. You’ll then see the list of all of the fields you’ve entered, and you can easily drag/drop to reorder your fields if desired. This will reorder the display of the fields on your add/edit staff members page.

Entering content into your custom post type fields

Now that you’ve defined your staff fields to your custom post type, you can begin to enter content so that you can see how your post type will lay out. 

Navigate to Staff > Add New to see all of your fields listed, ready for entry. At this point, you can turn over staff data population to your client or HR representative for entry or add some data yourself. The content won’t be visible on your site until you add that later using Kadence and Kadence Blocks. 

We’ll add some content from Kadence’s Real Estate Starter Template where featured agents are listed. 

Showing your Dynamic Content Using Kadence & Kadence Blocks

Once your staff members have been added, you can now start adding content to your site using Kadence and Kadence Blocks. 

Installing Kadence Theme and Kadence Blocks free versions

You should already have the free versions of the Kadence Theme and Kadence Blocks installed. If not, you can find these freely available on the WordPress.org repository. You can install the theme under Appearance > Themes and clicking “Add New.” A search for “Kadence” will show you the Kadence theme. 

Hover over the theme block to see “Install” and then activate. Be aware that if you activate the Kadence theme on a production site, some of your previous theme’s settings can be lost. We recommend installing the theme on a fresh site or staging site; this isn’t a concern with the blocks plugin. 

For Kadence Blocks, head to Plugins > Add New. Search for Kadence and install the Kadence Blocks plugin. 

Installing Kadence Blocks Pro and Kadence Theme Pro

For the pro versions of Kadence Theme and Kadence Blocks, you’ll need to install these from zip files downloaded from your KadenceWP.com account. Click Plugins > Add New, then “Upload Plugin” to add these premium add ons.  

Then, add your license key. You’ll see helpful links at the top of the page with a link to the location for license activation.

Setting up Kadence Elements Templates for dynamic content 

Once we have our content entered, it is in our WordPress database, however is not visible on the front end of our site. In fact, if we click “View Staff” or even “Preview,” none of the entered content will show. We will just see a blank page. We will need to set up Kadence Elements Templates to show our custom content. 

Activate Hooked Elements

In Kadence, we need to activate our Kadence Hooked Elements feature for visibility. 

Once that is activated, we will see a new navigation element on the left sidebar under Appearance > Kadence called “Elements.” If we click here, it opens a new area where we can manage all of our Kadence Elements. Once there, click “Add New” under Kadence Elements, and choose “Templates.” Make sure the Kadence Elements settings panel is open by clicking the Kadence Elements icon in the top right corner. 

Configuring Preview Settings

Next, we will begin setting up our preview settings by clicking the Preview Settings button. Under “Select Preview Posts Type:” choose “Staff” so that Kadence Elements knows how our template will be used. 

Next, click the button that says “Select Preview Post” and choose which of your staff members you’d like to use as your model for configuring the template. In this way, the dynamic content that comes through will be from an actual staff member, which will allow you to configure the template in your editor using real-world data. 

Important: it is a good idea to ensure that the selected staff member has all of their fields filled in so that you can most accurately place the content as you’d like it to be seen.

Configuring Placement and Display Settings

Next, click the drop down under “Placement” and choose “Replace Single Post Content.” Next, under “Display Settings” find the option that says “Single Staff.” Here, we’re telling Kadence Elements that our template will be used for the single post content for single staff entries. 

Once these are set, we can begin to build out our template.

How to configure Kadence Elements Templates to use dynamic content

Now that we’ve told our template that we’ll be using dynamic content, we need to tell our template where we are placing that dynamic content. 

Note, the “TITLE” on the Template editor is only used in wp-admin to help content designers distinguish templates from each other and will not be displayed on the front end of the site.

Setting our staff member’s headline

We’re adding a headline to the page with the staff member’s first and last names. We’re using the “Advanced Text” block. When using Kadence Blocks Pro, our Advanced Text block has the ability to draw content from dynamic content. You’ll see a cylinder that indicates where dynamic content can be set.

Click the “Dynamic Content” icon to see a dropdown that has “Post Custom Field” as an option. When you click this, it will show you the option to select the custom fields set up previously.

Once we select the First Name field, we will populate the first name of the sample staff member we set up in Preview Settings. We can then add a space, then click the Dynamic Content cylinder again to select the Last Name. They will appear in the Advanced Text Field as underlined in blue so you know visually that this is dynamic content. It looks something like this:

If you did not select a sample staff member under Preview Settings, your dynamic content will show up as “No Content” as shown below, which can make setting up a template difficult and confusing.

You can repeat each step populating all of the content in your staff directory. Make sure that for text items, you use the Advanced Text block so that you can set the dynamic content. Standard Gutenberg blocks will not be able to pull dynamic content. The Advanced Text block can set text to be a standard H2 through H6 headline, paragraph, or even span and div tags around any content.

Setting up staff biography & photo

For the staff bio and photo, we are using a Kadence Row Layout block to place these elements side by side. We populate the bio in the same way we added the First and Last Name fields, by adding an Advanced Text block to the left column and adding dynamic content of the biography field. We style the Advanced Text block as a paragraph so it is inherits the design from the entire site’s theme.

For the photo, we add an Advanced Image block to the right column. We then configure the Advanced Image block in the right sidebar to “Enable Dynamic Image” so that we can find the photo custom field.

Once enabled, we’ll see a new option where we can again select “Post Custom Field” and select the “photo” custom field for this block.

Mixing static and dynamic text in the same block

It is also possible to intermingle static text and dynamic text within the same block. In our sample layout, we add an advanced text block and type “Email:” and then pull in the dynamic text from the staff custom fields in the same way we added the First Name, Last Name, and Biography. We set these to an H6 so they are styled the way we’d like. We do the same for phone.

Viewing the finalized template

Once you have your staff page template completed, simply click publish. To view each staff member, navigate on the left side wp-admin navigation to view all staff. There, you can view each individual staff member to see how they look when the template is applied to them.

Our layout is simple, but it gives you an idea of what you can do with dynamic content when adding your own flair and design expertise!

Creating staff categories

We can also add staff categories, if for example we would like to categorize our staff members by department. To do so, we need to add a taxonomy for categorization to our staff post types in Custom Post Type UI plugin. Navigate to CPT UI > Add/Edit Taxonomies. Next, enter your taxonomy slug, and both plural and singular entries. Here’s what we did:

We then now see a new option under “Staff” called “Staff Categories” where we can begin to add our categorization of staff based on our organization’s structure.

Then, you can add your staff to whichever category you’ve added. Categorization is available on the post sidebar, and staff members can be added to multiple staff categories. Below, we add William to Human Resources:

In this way, you can add separate archive pages using Kadence Elements Templates.

Adding a staff archive page

Now that we’ve added a template for each individual staff member, we can also add an archive page on which all of our staff members are listed.

To do so, we will add a new Kadence Elements Template. Navigate to Appearance > Kadence > Elements and choose “Add New” and choose “Template.”

We title our archive page to list all staff members “Staff Archive Template” to differentiate it in the WordPress admin dashboard.

Once again, we will click our Kadence Elements icon in the right hand corner, and we will go to Preview Settings first. Again, select Staff, then choose a model staff member for the archive set up.

Because we are setting up one archive item for our listing of all staff members, we set the editor width to 400 so it more realistically shows us what we are creating. We are only creating one instance of a staff member that will be repeated on the archive page.

Archive Placement and Display settings

For Placement settings, choose “Replace Archive Loop Item Content” and select Staff Category Archive for the Display settings.

Archive template dynamic content

When building the content, we recommend placing content in a Row Layout block so that we can use a dynamic Overlay Link over the entire section, including the name, the photo and any other content we’d like to add there. Here’s how to do this.

First, add the Row Layout with only one column. Next, add an Advanced Text block within the Row Layout Section block. There, we’ll add both the First Name and Last Name as dynamic text. Click the “Dynamic Content” cylinder icon to see a dropdown that has “Post Custom Field” as an option. When you click this, it will show you the option to select the custom fields set up previously. Add First Name, then a space, then add Last Name in the same way.

Next, we’ll add an Advanced Image block, and we will then configure the Advanced Image block in the right sidebar to “Enable Dynamic Image” so that we can find the staff photo custom field. Here’s what that will look like:

Next, we’ll add a dynamic link to the staff member’s individual page by adding it to the Row Layout Section. Select the Section that contains the dynamic text you’ve added, and then in the right sidebar, look for the Section setting for Overlay Link. Toggle the “Enable Dynamic Link” on, and then select the Post URL | Current Post dynamic content so that on the archive page, any click to the staff member’s information within that Section will navigate to the staff member’s detail post page.

Creating & displaying dynamic content with Kadence is simple

No matter what kind of dynamic content makes sense for your organization, Kadence Elements Templates creates an easy way for you to display dynamic content to your site visitors. Kadence Elements Templates are available only with the Kadence Theme Pro plugin, available in all of the Kadence Bundles.

Are you using custom post types with Kadence?

Share your experiences in the comments below if you’ve built a powerful implementation using custom post types. There are unlimited ways to save time and empower their businesses when building WordPress sites with Kadence, and we’d love to hear yours.