If you want to use the combined functionalities of the Advanced Custom Fields and Custom Post Type UI plugins with your Thrive Themes to rapidly build your website, then this article might be useful to you.
In this article, we’ll be looking at an example of how you can integrate and use these plugins on your Thrive Themes powered website so that, in the end, you will be able to automatically display dynamic data anywhere in your content.
If you want to see a step-by-step tutorial for doing that, then this video will be useful to you:
Just as mentioned above, we will be using both the Advanced Custom Fields plugin as well as the Custom Post Type plugin to create several recipe types of blog posts.
Install and Set Up the Custom Post Type Plugin
First off, we have downloaded and installed the Custom Post Type plugin, in order to be able to create several custom posts:
After your download is complete, make sure you access the “Plugins” section of your WordPress admin dashboard and click on “Add New”:
Next click on “Upload Plugin” and follow the steps for uploading the zip archive to WordPress:
At the end of the process, if the installation was successful, you will see this page, and the last step is to activate the plugin:
The Custom Post Type User Interface will become available as a separate section of your WordPress admin dashboard:
Now you can go ahead and create your first custom post types.
Create a Custom Post Type
In order to do that, click on “Add/Edit Post Types”, from right under the CPT UI section:
Next, you will be taken to this dashboard where you need to fill in several details such as the post slug, and plural and singular labels for it.
After you do that, click on “Add Post Type”:
As soon as you do that, the new post type will become available in the left sidebar (in this case, the “Recipe” post type):
Next, we will go ahead and add actual content to this custom post type (we will be adding three new recipes):
You can add the content either in Thrive Architect or directly in the WordPress editor. Choose whichever method suits you best, and, and the end, don’t forget to click “Publish” before exiting the page:
Add as many pages as you want, depending on what you need for your website. Our example looks like this:
Next, you need to access your Advanced Custom Fields plugin and set up some custom field types for these recipes. See below how you can do that:
Install and Set Up the Advanced Custom Fields plugin
First of all, just as in the case of the Custom Post Type plugin, you need to make sure that you have the Advanced Custom Fields plugin installed and activated on your site.
We have some dedicated resources in our knowledge base which take you through the steps for installing and using the Advanced Custom Fields plugin:
- How to Set Up Custom Fields Using the Advanced Custom Fields Plugin
How to Use Fields Set Up with the Advanced Custom Fields Plugin in Thrive Architect
How to Set Up the Specific Types of Advanced Custom Fields Needed for Thrive Architect Elements
Add a Custom Field Group
Then, you can go ahead and add a new field type, by hovering over the “Custom Fields” section of your left sidebar and clicking on “Add New”:
We will be creating three separate field types for each recipe post type we have previously set up with the Custom Post Type plugin.
The first field will be a text type (for the title of the recipe), the second one will be an image type ( an image of the recipe) and the third one will be a number type (which will represent the cooking time for each recipe).
Let’s see how to set up the number field type for the cooking time of the recipe.
So after you click on “Add New”, you will have to name your new field group, and then add a field to it:
Next, add the field label, (the field name will auto-populate based on the inserted field label name), and then, set the field type to “Number”:
Then scroll down until you find the “Close Field” button and click on it:
You can next go ahead and add other field types, just as in the above example. What you need to keep in mind here is that, for each new field type, you will also have to select the corresponding field type as well from the “Field Type” drop-down list.
So, for the image field type, make sure you set the field type to “Image”:
And, of course, for the recipe name, which will correspond to the text field type, make sure the type it’s set to “Text”. In the end, the field group would look something like this:
The field type will be listed next to each new field, letting you know what kind of settings you’ve configured for it. If you want to change it, simply go ahead and edit the field type and modify its settings.
Set Up the Location Rules
The custom fields that we have just created will be applied to the recipes that we have set up in the Custom Field Type plugin.
So, in order to do that, we need to make sure that this field group will be displayed if the “Post Type” is equal to the “Recipes” content type set up in the Custom Field Type plugin:
With everything set up, you can go ahead and “Publish” this field group:
Assign Values for Each Custom Field Type
Now you can head over to the post type section of your WordPress admin dashboard (in this case, the “Recipe” type):
And here, we will assign values to the content from your post type. To do that, simply click on the “Edit” button, just like you would edit any WordPress page or post:
In the “Recipe Details” section you will be able to assign the values as per the field group you have previously set up in your Advanced Custom Fields dashboard:
Add the values as you need, and once done, click on the “Update” button:
Repeat this process for each piece of content.
Create a Thrive Theme Builder Template
The last step in the process is creating a Thrive Theme Builder template, which you can apply to the custom post-type content.
You will only have one template which you can use as many times as you want for all your custom posts, without having to create each page or post from scratch.
Head over to the Thrive Dashboard section of your WordPress admin dashboard and select Thrive Theme Builder from the sub-menu that opens:
You will next have to access the “Templates” section:
And here, we will be creating a new template for our recipe post:
If you want to learn how to create a Thrive Theme Builder template for a specific custom post type then this article might come in handy.
Our template settings look like this, and we next have to decide if we want to build it from scratch or choose from a predefined list of templates:
After your template is created you can go ahead and access it if you want to bring additional changes to it:
Use the left and right sidebar options to customize it to your liking.
What you can also do here is to load different types of content to see how that content might look with this template applied to it:
Add Dynamic Data & Custom Fields to Your Template
Now, let’s see how you can use the dynamic information and custom fields on your template.
- Title
From the right sidebar list of elements, drag and drop a “Text” element to your content. Add the text that you want, and then select that part that you want to turn into a dynamic text:
In the text panel, click on the “Dynamic” button:
And then, open the first drop-down list and select “Custom fields” as your dynamic text source:
A new drop-down list will appear, where you can go ahead and select “Recipe Name”. These are the custom fields that you have set up in your custom field group:
Lastly, click on “Insert” to make sure your settings are applied:
Your selected text should automatically turn into dynamic text, and display the title relevant to the content you have selected for your template:
To better understand the functionality of the dynamic text, you can go ahead and load another content type from the top right-hand side of the screen, and you will see how the dynamic text will now change and display the title relevant to the recipe you have selected:
- Image
Next, let’s see how to apply the same settings to the image custom field type. For that, add an “Image” element to your content and select any image you want from the library.
With that image selected, click on the “Dynamic” button from the left sidebar list of options:
Open the source drop-down list, and here as well, select “Custom fields”:
And from the next drop-down, naturally, select “Recipe Image”:
Your previously added image will instantly be replaced with the image relevant to the recipe you are working on:
- Cooking time
At last, let’s see how to use the number field type as a dynamic source. For example, you can add here a “Star Rating” element to your content:
With the element selected, access the “Dynamic” button of the left sidebar options:
From the first drop-down list, make sure to select “Cooking time” as your custom source:
And then apply a rating depending on the amount of time required for that particular recipe:
Note: The “Star Rating” element is not the only one you can use here for the custom number field type. You can also use a “Progress Bar” element or a “Fill Counter” element, and then customize it as needed, in order to reflect your content.
And that’s pretty much it. This is how you can use combined functionalities of the Advanced Custom Fields, Custom Post Type plugins together with Thrive Theme Builder, to easily create dynamic content for your website.
Hopefully, this article was useful to you. Don’t hesitate to check out other tutorials available in our knowledge base, if you want to find out more about our product and features.