|

How to use Dynamic Content with Kadence

dynamic content with Kadence Blocks

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. 

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.” 

custom post type ui add plugin

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. 

add/edit post types

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.”

remove editor from wordpress custom post type ui

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.” 

acf install new plugin

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.” 

add new field group and set 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. 

add individual fields

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.”

add email set email field type

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. 

add text area

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. 

add image field type

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.

view and reorder field types

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. 

add new staff member

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. 

installing 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. 

Kadence Blocks install 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.

activate pro plugins

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. 

activate hooked elements

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. 

Preview settings for Kadence Elements Template

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. 

placement and display settings kadence elements templates

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. 

template title

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.

select custom field content

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.

no content

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.

advanced-image-dynamic-content

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.

advanced image block dynamic content

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.

view staff member

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!

final staff layout

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:

staff category taxonomies

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.

staff categories

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 template set up

Archive Placement and Display settings

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

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

row layout section

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.

overlay link

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.

16 Comments

    1. Yes indeed. Once Meta Box support is released, we’ll do the same for Meta Box! If you have ideas for creative use cases, please do suggest them.

  1. Thank you, a very informative and detailed post.
    I do believe that there is so much more to dynamic content and this just touches the surface.
    If further examples would be possible it would be an amazing course to highlight the power of these tools when used with Kadence..

  2. I am using Kadence as my default theme in combination with Toolset. I worked with Blocks for over a year, but ended up switching back to the Toolset Legacy Builder. Blocks are great for manageable smaller functions, but when needs get more complex, it’s probably better to fall back to legacy editor.

  3. What an outstanding 🤗 tutorial on dynamic content. I love how visual and detailed you have presented everything. Cant wait for more “how to” tutorials.

    Also, how about creating more Kadence Tutorials on video to feed the YouTube Channel? This exactly tutorial would be greatly appreciated by many if it was on video format!

    Thanks for awesome content. Loving Kadence ❤️

  4. Great tutorial. Thank you!

    Here’s something I’m trying to accomplish. I run websites on which I list quite some product prices which tend to change, so I’d like to use dynamic content for this.

    However, in my articles, some of these prices (but not all) would also contain links to the product page.

    When I use dynamic content and add a link to the dynamic content, it shows on the backend (the link) but on the frontend the link doesn’t show.

    Is there any workaround for this?

  5. Hello. Is it posible to use this Elements Template into a single page instead of an archive? For example I’d like to use an individual Staff Members page, not archive, so I can create any kind of content there and then at the end of it “inject” this dynamic archive/loop of members.

    1. Yes, you can do that with a Kadence Elements Content Section, and then for your placement settings, determine where on the page you’d like that content to be shown. Then, you can select which individual staff member page you’d like with display settings for that particular Kadence Elements Content Section.

  6. Thank you guys for the amazing tutorial.
    Based on your example I have to ask the following:

    What if I needed to show the staff department taxonomy on the archive page item and on the single template too.
    Since the taxonomy is not an ACF field can we pull that with the dynamic content option? Because I found only the post type possible but not the taxonomy.

    1. You can use the Kadence Dynamic List block in your template to pull the staff department taxonomy on the archive template!

  7. For the step Configuring Preview Settings the “Select Preview Post” doesn’t show anything but a blank modal window.

    Everything else is set right, I can see the dynamic content on the front end but I can’t see the preview of it on the back end. Because I can’t choose which staff members to use as the model for configuring the template using the Select Preview Post.

    I hope that makes sense. =)

Leave a Reply

Your email address will not be published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.