In our previous post, we introduced Custom Post Types (CPT) in WordPress, what they are, why you would use them, etc. In this post, we begin discussing the plugin Advanced Custom Fields (ACF), which works really well in conjunction with custom post types to take your website designs to the next level.
Advanced Custom Fields allows you to add additional custom fields to any edit screens in WordPress. This allows additional data to be captured for your posts, which can then be styled and displayed in your own custom templates. WordPress provides custom fields functionality out of the box, but it is very basic and lacks a lot of management features which ACF offers.
What are ACF fields used for?
ACF allows you to add additional blocks of custom fields to your post edit screens, users, media, comments, and more. If you are familiar with WordPress development and know PHP and WordPress hooks, ACF comes with a great set of actions and filters which allows you to manipulate, manage and display your custom fields.
For example, you could have a custom post type for events that you run, and you could set up ACF fields to store data about events such as:
- Event name
- Location of event
- Date of event
- Time of event
- Details of event
Each event would have its own set of data for the ACF fields, and can then be managed, formatted and displayed as desired.
How to create advanced custom fields (ACF)
ACF is built around the concept of field groups. Field Groups are sets of fields which can then be given locations to appear in. There are also tools to import and export fields groups which can be used in different WordPress sites which also have the ACF plugin installed.
You need to create a field group for a set of fields to appear on a post edit screen. When creating a field group, add fields one by one which you like to appear on the edit screen (or elsewhere). Fields can be given labels, values, data types, and much more. The Pro (paid) version of ACF also adds additional data types which can be useful depending on your requirements.
Once all of your fields have been added to the field group, they can be reordered, deleted, duplicated, or modified.
At this point, the Field Group needs to be added to different locations in your WordPress installation where you would like the fields to appear. These are known as Rule Groups. There are all sorts of locations where field groups can be added, but to add them to custom post type edit screens, simply select where Post Type is equal to Event (or your custom post type name). You can add the field group to multiple locations as required based on different criteria you specify.
There are a number of other settings which can be set around styling, ordering, and so on. One of the most useful settings though is Hide On Screen. This setting allows different parts of the edit screen to be hidden if they are not required. For example, you may not want to display the default Gutenberg content editor when creating new posts for your custom post type, or you may not want to use Categories and Tags. You can turn these on and off as required.
Keep note though that these settings can also be set when using custom post types with the CPT UI plugin, so if you have set an item to be hidden but it still appears on the edit screen, check the post type in CPT UI as the item may not be hidden in there.
The ACF field group blocks should now display on the post edit screen (or wherever you added it to for the Location). The data in these fields will now save when posts are published.
How to display advanced custom fields on your templates
Once data has been saved for your custom fields, it can now been retrieved and displayed on your blog posts on your website (and other areas). The best way to display ACF data depends on the level of control you need for your website project. At a basic level, if you just want the data to be displayed as it is on a post, you can do so via a plugin or if you use a popular page builder. If you need to perform some kind of manipulation or formatting on the data (or just need more control), you may need to write custom PHP in your child theme’s functions.php file (or via a custom plugin). There are many ACF actions and filters which gives you full control over the data that is stored.
But to keep things simple in this article, we use the Elementor page builder which offers built in support for displaying dynamic ACF fields. Elementor offers a Theme Builder where you can create templates for your custom post types which can be built to include ACF fields. While this is not an Elementor tutorial, you can drop in elements onto your template such as a Text Editor, and there will be a dynamic tag option where you can select your ACF field to display on the template.
The ACF field will now be added to your template and the correct post data will display on the post page for your post type.
How are advanced custom fields stored?
Data from ACF fields are stored in the WordPress database in the wp_postmeta table. This is a standard WordPress table, and like the name says, it is used to store metadata about posts. When creating any post (regardless of if it is a custom post type or not), the post is stored in the wp_posts table and is given a post ID (primary key).
The ACF fields are stored in the wp_postmeta table linking back to the post through the post_id field.
This is the data stored for the post from the screenshots above. This screen shows that each ACF field is given its own generated field name. Note that dates are ALWAYS stored in the format of YYYYMMDD. The format of the dates can be displayed in any format you like (but you cannot change how they are stored in the database table). This can be set from the field within the Field Group by setting the Display Format and Return Format settings. Alternatively, the format can be set through PHP custom code.
This article is just a basic introduction to how ACF works. There is a lot you can do with this plugin which is outside the scope of this introductory blog post.
Hopefully you now have an understanding of how advanced custom fields work. There are free and paid versions of the ACF plugin. ACF is generally considered an essential plugin for WordPress developers, and it will make your life a lot easier! Check out the ACF plugin site.