In the last article, we set up our own post types and custom fields that we stuck to those posts. Today we will view them. Since displaying these entities on the page requires a good deal of programming knowledge and familiarity with WordPress principles, we’ll use Elementor to display them, which solves these things for us. We just display what we want and where we want it.
We created a Custom Post Type called Catalog and in it we have individual house projects. For each house, we have several custom fields where we have added values that are specific to the project.
Article content
- Custom fields and custom post types – an introduction
- Custom fields and custom post types – plugins
- Custom fields and custom post types – view
CPT display
On the CONTENTS tab, in the DISTRIBUTION section, set the appearance. That is, the number of columns and rows, the image sizes, the image ratio, and similar things that we are familiar with from other elements.
The most important for us is the QUERY section. Right at the top we have a selectbox called “Source”. If we have done everything correctly, our Custom Post Type, in this case CATALOG, will also be in the menu (the red dot in the picture shows my CPTs). We’ll take him out. Then we can just set the shifting. In the basis, the contributions are ranked from newest to oldest.
Well, that’s actually it. The list or archive is ready, save, close.
ACF display
Custom fields contain values that are specific to a particular contribution, in our case this is e.g. the usable area of the house, or the price of the house. Each house will have a different price and a different usable area and we will want to display this information. That’s why we don’t address these things at all on the CATALOG subpage. There our task is not to display details, but only a list of posts (home). Only on the details of the individual houses will we display the values from the custom fields.
Create a new template in Elementor. In the administration, in the left column, look for the Templates item (usually located just below the Elementor item), in the submenu click on
Theme Creator
. We’re going to tackle the single post view, so we’ll click on Single Post (not to be confused with Single, nor with Single Page!). At the top, click Add New to open Elementor. Well and we can do. We add classic elements according to what we want to be displayed where.
For example, each house has an illustrative picture. So we insert the IMAGE element and now when we hover the mouse over the image selection, we will see the database icon in the bottom right corner (that’s what the icon is really called). When we point to it, it pops up in the “Dynamic Marks” tooltip. That’s exactly where we click. It throws us out a lot of choices. Since this is an illustration image, select Featured image.
If we need to insert text, we can do it using the TEXT EDITOR element. All the way up again we find the database icon, which takes us to the dynamic tags.
In the selection, find the ACF entry and add the ACF Field.
Next, we need to indicate which specific field should be displayed there. Therefore, click Directly on the field again.
And we choose the so-called. key. This means the name of your custom field that you entered in the last article.
We can then set the Advanced behavior, where we can add custom text before or after the custom field, or we can define what to display if this value is left undefined for the post. I usually put a hyphen in that case.
If we used ACF Gallery, we simply use the Gallery element.
After clicking on the dynamic marker, select ACF Gallery Field. Don’t forget to select the key for the gallery again (nowhere is it written that one post can’t have two or more galleries, so based on the key you need to choose which one to display there). When we do this, Elementor itself will pull the images that are uploaded for that post in wp-admin.
We can work with dynamic fields for almost every element. Very suitable and useful is e.g. item LIST OF ICONS. We simply define icons and add some custom fields to each one.
To define exactly what this is, we will use the advanced functions BEFORE, AFTER and BEHIND in the section. The <b> tag is an HTML tag that causes the font to be bold. So in the example below I have used Price: [number that comes from ACF] €. So we will add the word Price: (also with a colon) and we will add the € symbol after the amount. If there is no price in the ACF for a given contribution, a dash is simply displayed.
The resulting effect is as follows:
Other ACF options
We can also add ACF to links. We can simply set the ACF where the link will go in wp-admin and then paste it to the button in Elementor.
Or we can set the background. Just add your own field – image and then we can call it in Elementor (or use an illustration image).
There is no problem to set e.g. CALL TO ACTION element so that its content and image (and link) is generated dynamically and is specific for each post.
Simply, whenever you see a database icon somewhere you know that you can use a custom field in that element at that location. You just need to define it.
So, in conclusion, let’s see how it works. You, as the person who writes the content, don’t actually come into contact with Elementor. You set everything up on the wp-admin page when you write the article.
My own contribution types (CPT) are marked in yellow. The menu control items for ACF and CPT are marked in green. Individual custom fields are marked in blue (in the paper). I have defined these as follows:
Note down in the “Rules” section I have set this group of fields to be applied in the CPT Catalog!!!
So you list all the data for a specific post and then display it based on the template. The person who adds the content does not deal with Elementor at all, he just creates a new post within CPT (in this case a new project in the Catalog) and there he writes the title, text, possibly put it into a category, add tags, an illustration and fill in the fields. These will then be displayed based on the template as you set it up.
Working with dynamic fields in general is very easy with Elementor and you can conjure up really anything. Some other time we will show how to work with ACF and CPT through code.
I have been programming websites since 2006. I have worked in several smaller and larger companies, always as a developer. I know how to program in PHP and lately I have been exclusively working on small and medium-sized projects in WordPress.
