Adding Custom Fields to Custom Post Types
What is a Custom Post Type?
WordPress is a Content Management System (CMS) with the ability to create custom content types. One of its biggest advantages is Custom Post Types which is an easy way to organize and create data that is stored in the database. This allows for a more intuitive experience and makes WordPress extremely powerful.
In the latest article I discussed what is a custom post type, how to create a custom post and how to query that information. Make sure to read What is a Custom Post Type to get a better understanding of custom fields. In this article we will go more in depth on creating custom fields that will make your post types even more powerful.
What are Advanced Custom Fields?
A custom post type allows you to add on the defaulted supports for WordPress. The defaulted supports can be found in the codex. This is an awesome feature, however, there is an even better feature, it’s called Advanced Custom Fields (ACF) by Elliot Condon. This plugin allows for custom fields to be created on a custom post type. It is a quick and easy way to organize information in multiple ways. Whether you want a simple text box or adding a relationship between post types advanced custom fields makes it super easy to use.
How to use Advanced Custom Fields?
Once installed and activated, in the WordPress admin there will be a Custom Fields tab on the left sidebar menu. Once you click the menu item, it will take you to a field group. A field group in ACF contains a title, the different types of fields being added, and a location for these fields. To create a field group click ‘Add New’, the first step is selecting a title, for instance for a portfolio custom post type, I selected ‘Portfolio Items’ which will have the fields logo, url and portfolio team members.
Inputting Fields
Each field requires a label, name and type. The field label is displayed on the post type and can be human readable, such as ‘Logo’. The label will not be entered in the API. The second is the field name, which should be lowercase, have no spaces, nor special characters. It will be used to retrieve the information inputted in our templates. An example for this may be ‘logo_image’, in the following paragraphs we will discuss this more deeply. Lastly is field type, here we will set the appropriate type, the defaulted one shown is text. But there are various types such as relationships, images, number, email, checkboxes and more. The other fields are optional but can be very powerful. We will discuss conditional logic soon.
In each field group there is also a location box at the bottom. Where users can decide where they would like to have these fields located. Once set the fields will be added to each post object and edit screen. Another great tool ACF location box uses is the and or statements, this will be useful if you would like the same fields in multiple post types.
In this example I will be using the custom post type Portfolio. Which will have a logo, url, and portfolio team members that were apart of the portfolio.
Logo:
field label: Logo
field name: logo_image
field type: Image
Primary Division:
field label: Primary Division
field name: primary_division
field type: checkbox
Portfolio Team Members:
field label: Portfolio Team Members
field name: portfolio_team_members
field type: relationship
Displaying
It is super simple to display these custom fields. The two ways is with get_field() and the_field(). get_field() allows you to retrieve the field value as a variable. This is crucial because you can always check if the field is empty using this format. The second it the_field(), this function will display the value.