In previous tutorials we showed you how you can easily add custom post types and custom taxonomies to your Divi WordPress website using the free Advanced Custom Fields (ACF) plugin. In this tutorial we’re going to show you how you can use the same plugin to add custom fields to your newly created custom post type. We’ll also show you how to display these custom fields using our Divi FilterGrid plugin.
What are Custom Fields?
Custom fields in WordPress allow you to add metadata to your posts, pages and custom post types. Staying with our events custom post type example, additional data might include: event date, event time, event price, etc. Custom fields should be specific to the post or custom post type and should NOT be used for organizing your posts.
WordPress includes a built-in interface for adding custom fields. However, the interface can be a bit simple and clunky. If you want a more polished interface with a lot options and features, the ACF plugin is a great option.
Custom Fields VS Custom Taxonomies
There is an important distinction between custom fields and custom taxonomies. Custom fields should be used to store information that is unique to individual posts and post types: date, time, price, etc. Custom taxonomies should be used to structure and organize your posts and post types: type and location.
A quick question you can ask yourself is “Do I want to be able to organize or filter my post type using this data?” If the answer is yes, you should add it as a taxonomy. If the answer is no, you should probably add it as a custom field. The reason for this is the way WordPress structures the two in the database. It is much more efficient to filter posts by taxonomy terms than by custom fields.
Another question to help determine which you should use is “Do I want to be able to order my posts using this data?” If the answer is yes, you should add it as a custom field. The reason for this is that it’s possible in WordPress to order posts by custom field value(s) but not by taxonomy term value(s).
Our Divi FilterGrid plugin can filter by any taxonomy registered on your site. It cannot filter by custom field as that is not the purpose of custom fields and is not an efficient way to filter. It can also order posts by custom field but not taxonomy term.
Sticking with our events custom post type example, you can imagine site visitors might want to filter your events by event type or event location. For this reason, we’ve added them as taxonomies. However your visitors are not likely to want to filter events by price, time, etc. But it is possible they’ll want to order by those values. For these reasons, they should be added as custom fields.
* The argument could be made that visitors might want to filter by date. For example, users may want to filter events by the current year and the current month to see all upcoming events for the month. In this case, you would want to create a “Year” taxonomy and a “Month” taxonomy in addition to a date custom field. This would allow users to filter by date and order by date. The date custom field is also needed for displaying the exact day of the event. In our example, we’ll simply create a date custom field.
Adding Custom Fields
Again, we’ll be using the ACF plugin to add custom fields to our events custom post type. Assuming this plugin has been installed and activated, go to your WordPress admin dashboard -> left sidebar -> ACF -> Taxonomies page. Click the blue Add New button at the top of this page to create your first field group.
ACF uses field groups to add custom fields. This method makes it easy to assign different groups of custom fields to different post types.
On the Add New Field Group page, add a title near the very top of the screen. For our example, we’ll call this group “Event Details”.
Below the title in the Fields section, a new custom text field is already added. Click on the Field Type dropdown and let’s change the field type from Text to Date Picker. For Field Label, enter “Event Date”. For Field Name, enter “event_date”. The field name is the identifier used to fetch the field value from the database. For this reason it should not have any spaces.
For the Display and Return Format, choose the date format your country uses. We’ll add more fields later. For now let’s assign our field group to our new events custom post type created in a previous tutorial.
Scroll down to the Settings section and you should see a Rule has already been added – Show this field group if Post Type is equal to Post. In the last dropdown, change Post to Event. Click the Save Changes button in the top right corner of the screen.
We’ve now added a date custom field to our event custom post type so we can define the event’s start date. If you were to edit an event, you would see an Event Details label with an empty input. Clicking on the input would display a popup window where you could then select the date from a calendar. Before we do that, let’s add a few more fields.
Scroll back up to the Edit Field Group page and click on the Add Field button below our existing Event Date field.
For this example, I’ll be adding Event Time (time picker field type) and Event Price (number field type) custom fields. ACF allows you to create lots of different field types and offers even more if you upgrade to the Pro version of the plugin. For our purposes, the free version can do everything we need it to.
Click the Save Changes button to save the event time and price fields we added. Now let’s add our new fields to an event.
Go to the Events page in the left sidebar of your WordPress dashboard and click Add New Event. You’ll see the standard WordPress post editor with the content editor at the top and our Event Details custom fields below that. Click on the empty input for each field to enter the values. The date and time fields will display a popup window, allowing you to easily select the date and times. We’ll type the price in manually.
Displaying Custom Fields
Now that we’ve added our date, time and price custom fields to our event, let’s display them on our events page. Using our Divi FilterGrid module, open the Posts Elements section in the module’s Content tab. Scroll down near the bottom of this section and turn on the Show Custom Fields toggle. Click on the “Add” icon in the new Custom Fields box that appears.
A new window will appear with all available custom fields. You can manually find and select your event custom fields or you can simply start typing “event” in the search input at the top of the window. Your event custom fields should appear below. Select the custom field you want to display first and then click the green checkbox. I’ll select the event_date custom field first.
After returning to the previous screen, you’ll see your selected field with the option to add a label. Leave empty if you prefer to not display a label at all. I’ll add “Event Date: ” for my label. Repeat the process for the event_time and event_price custom fields, adding your desired labels to each. You can also drag and drop these fields to reorder them if needed.
* Notice the “Show Custom Content” toggle below the module’s Custom Fields field. For complex and advanced layout options, you can create a custom HTML output for each event using our Custom Content filter hook. If achieving your desired layout is difficult using the Custom Fields interface, you can turn that toggle off and use the custom content method instead. This method requires PHP and HTML knowledge but we are always happy to help. Simply create a support ticket if you need help with the custom content filter hook.
That’s it! We have now added three custom fields to our event custom post type and displayed them on our events page using the Divi FilterGrid module. To display the custom fields on individual events, simply add the default Text module included in Divi and click on the Use Dynamic Content icon in the text module’s Body field. A window will appear allowing you to select your custom field name. For multiple custom fields, add multiple text modules.
