Custom Post TypesPHP Development

Creating Custom Fields for Custom Posts In WordPress

We are going to see two methods to create custom fields in WordPress, In functions.php & Using ACF Plugin
ACF Add new field page

Creating posts custom fields in WordPress allows users to add additional data or meta-information to their posts beyond the default title, content, and featured image. These fields can store various types of data, such as text, numbers, dates, or even files, providing flexibility in organizing and presenting content. Custom fields are commonly used for adding extra information like author bio, event dates, product prices, or any other details specific to the post. They can be easily implemented using plugins or by adding custom meta boxes to the post editor, enhancing the functionality and customization options of WordPress websites.

We are going to see two methods to create custom fields in WordPress

1) Adding Custom fields support option on Custom post registration

In WordPress there is 'custom-fields' value that can be added to array element of register_post_type(); The 'custom-fields' array item in the 'supports' parameter enables users to add and manage custom metadata associated with the post. It allows for the creation and editing of additional key-value pairs of information that can be used to store various types of data relevant to the post.

function create_events_post_type() {
register_post_type( 'event', array(
  'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'
  ),
  'public' => true,
  'labels' => array(
    'name' => __( 'Events' ),
    'singular_name' => __( 'Event' ),
    )
  ));
}

add_action( 'init', 'create_events_post_type' );

Displaying Custom Field in WP Admin Edit Post Page

In this instance I have created Events post type by including 'custom-fields'.

After adding 'custom-fields' inside 'supports' array argument for register_post_type array, WordPress doesn’t automatically enable it for editor. To enable for editing for WP admin,

1) Go to custom created post type and click on add new, then in add new post page, at the top right corner, click on the three vertical dots

Three vertical dot at the top right corner of edit post page.
Three vertical dot at the top right corner of edit post page.

2) Then the options page will appear and scroll down to the bottom and click on preferences option

Preferences option popping out when the three dots are clicked in edit post page
Preferences option popping out when the three dots are clicked in edit post page

3) After you click on Preferences option Preferences window will popup & in general tab, scroll down to the bottom of the window then turn on the Custom Fields option, and then click on show and reload page button

Option to enable custom field when preferences clicked
Option to enable custom field when preferences clicked
Show & Reload option after turning on the Custom field option
Show & Reload option after turning on the Custom field option

4) After turning on the Custom fields, you will see option to create custom fields at the bottom of the edit post screen.

The custom fields in the edit post page
The custom fields in the edit post page

2) Creating Custom Fields With ACF Plugin

While creating custom field for custom post type, using the 'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'custom-fields' ), does in fact add custom field option in post editor but it gives option to create any field by giving key-word and Value which is not quite efficient, which means the user has to remember keys used for each fields created and it is rigid somehow.

The Advanced Custom Fields(ACF) Plugin gives you to create any type of custom field with specific value & Label so that when displaying on pages you don’t have to remember every fields. And, it has wide range of functionalities check the Pro version of ACF here

For example, to create custom field that has specific key and value of date picker, using ACF plugin, follow these steps.

1) Install and activate Advanced Custom Fields(ACF) from WordPress Plugins repository or from here.

2) Add new field group, with field type -> date picker, Any Field Label & Any Field name(field must be all_lower_case & can include ‘_‘ or ‘-‘ signs), You can also make field required. Remember to give the field group a name.

ACF Add new Field Page Items name
ACF Add new Field Page Items name

3) Bellow the Fields editing area, You will find Settings Area. Here, select location rules where to display on custom post (Events in our case)

ACF Location Rules Tab
ACF Location Rules Tab

3) Edit events and select event dates with created field.

Displaying Custom Field Created by ACF on page templates

After installing and using ACF, ACF offers the the_field() function, simplifying the retrieval and display of custom field values for posts. This function accepts lowercase field names as arguments, enhancing accessibility and usability. It streamlines the process of accessing and presenting additional post metadata, contributing to a more efficient development workflow.

After creating custom field with ACF plugin, In front-page.php or any page or post template you can use the_field(); and pass in the_field_name. It’s like <?php the_field('event_date'); ?>

But remember you have to query for the custom post using WP_Query(); class before you can display the custom field of the post. You can refer to this post.

—- Thankyou for Reading —-

Shares:

Related Posts

Top Categories

PHP Development
22
WordPress Theme Development
21
Wordpress Development
18
WordPress JS Development
13
Show Comments (0)
Leave a Reply

Your email address will not be published. Required fields are marked *