Creating custom fields

Introduction

Personal fields are inseparable from personal types. A field with a personal data has no meaning outside a personal type and vice versa. Thinking about personal fields started well before this chapter, it is perhaps one of the first tasks I started to work on. Indeed, while thinking about the different information I wanted to display on my site, the trend quickly divided into two distinct groups, on one side, the type, and on the other, the different information related to the type. Without really knowing it, I had discovered on my own that I would have to create custom fields.

The custom fields

Once the custom types are introduced in WordPress using the CPT UI plugin, the question naturally arises for the custom fields. The first step is certainly to make a list of them. I give you in bulk those of my type “Travels”.

• Title
• Description (excerpt)
• Featured image (background image)
• Classification (type of trip)
• Display of the most beautiful images at the beginning of the posts
• The country
• Month and year

Following this idea, the possibilities of WordPress are quickly browsed.

• The title, the description and the background image are already integrated in WordPress.
• The classification, which has the clever name of taxonomy in WordPress is also integrated, but only for the type “Posts”. A post type has two taxonomies, “Categories” and “Tags”.
• The display of the most beautiful images is an option that does not exist, as well as data on the country, month and year of the trip. So we needed an additional plugin, the fourth one, after Elementor, Elementor Pro and CPT UI. The choice fell on ACF.

ACF and the custom fields

Creating a personal field with ACF is simple. You start by creating a group of fields, then the fields one after the other. For my “Travels” type, I filled in the five data items below, as well as the min and max values for the year of the trip. There are other fields that I did not use, feel free to try them out.

The dropdown list

For the “Month” field, a dropdown list must be created. Manually, it can be created in ACF by entering in the “Choices” field, the twelve months of the year by respecting the following syntax “january : January”. The first is a label, the second is the value.

Laziness being a bad habit, the PHP code below, will automatically fill an ACF dropdown list with the months if it is named “travel_month”. It’s up to you to use it or not, but I find it very convenient, especially if you multiply the dropdown lists with the months of the year.

// Populate ACF selector form field with Travel months
function populate_travels_acf_dropdown_list ($field) {

  // Reset choices
  $field['choices'] = array();

  // Add the placeholder item
  $field['choices'] = array(
    'january'     =>  'January',
    'february'    =>  'February',
    'march'       =>  'March',
    'april'       =>  'April',
    'may'         =>  'May',
    'june'        =>  'June',
    'july'        =>  'July',
    'august'      =>  'August',
    'september'   =>  'September',
    'october'     =>  'October',
    'november'    =>  'November',
    'december'    =>  'December'
  );
    
  return $field;
}
add_filter ('acf/load_field/name=travel_month', 'populate_travels_acf_dropdown_list',10,1);

Display of the most beautiful images

If you have followed my progress, you will have noticed that there is no mention of the field “Display the most beautiful images”. This is not an omission, but an option that is not free. Indeed, the gallery field is only provided with the ACF Pro version.

ACF Pro has other useful options, such as repeating fields, a custom block editor for Gutenberg, etc… Another nice feature is the ability to import and export your fields.

Link custom fields with the corresponding type

The next step is to link these new fields with the “Travel” type. This is done simply by modifying a rule located just below the fields. Select “Post Type”, then “is equal to” and finally the “Travel” type.

The classification (Taxonomy)

While the type Posts has two default classifications, the category and the tag, the custom types have none. You have to create them. This option is not in the ACF plugin, but in the CPT UI. So go back to the CPT UI control panel, but this time in the taxonomy section.

Adding a “Travels Types” taxonomy is similar to adding a new custom type.

• Enter a slug for your taxonomy
• Enter the label for the plural
• Enter the label for the singular
• Check the type to which the taxonomy is attached

Now you can add classifications to the “Travels” type. For the example, I added “Leisure”, “Cultural” and “Business”.

The publishing interface

Once the new classifications and custom fields have been added, a new post can be created. The new fields are displayed below the post’s input fields.

As WordPress integrates the excerpt, the featured image and the classification, these are displayed in the column on the right. This is not very nice and we will correct this.

• Go back to CPT UI and uncheck the options.
• Go back to ACF, and add the image, extract and classification fields, like this.

This time, all custom fields, including the featured image, classification and description (excerpt) are placed below the post’s input fields. Only the taxonomy appears twice. But don’t worry, the two areas synchronize automatically.

The next logical step is to display the archive page with posts containing custom fields. The surprises weren’t over. Elementor, with its “Archive Posts” widget, does not allow custom fields to be displayed. If you have been following this blog so far, you may remember that a wireframe was drawn, representing a completely modified skin. This design idea was mentioned at the beginning of this project, when Elementor Pro had not yet been introduced or adopted as a page builder. Consulting other sites for inspiration confirmed that it was possible to modify the skin of the archive. And the solution is called Elementor Custom Skin, the subject of the next chapter.