How to Add Custom Fields to Your WordPress

With WordPress custom fields, you can create a section in the editor to add a specific type of data to each of your posts, pages, and also for your Custom Post Types.

For example, you can include an input field in the admin panel to display the post tagline just below the main heading of the page.

In this post, we are going to give a small custom fields WordPress tutorial to explain what is custom fields in WordPress are and how they will work. We’ll also walk you through the process of adding the fields and using them. While this is a moderately exceptional technique, it’s easier than you might expect.

Let’s get to work!

Introduction to custom fields

Custom Fields feature is hidden by default in WordPress, but it can be a beneficial option to know about it. From the view of the content management system (CMS), custom fields allow users to add quickly important data in a separate input field, Instead of modifying the content, you can directly change the value of your custom field.

There are 3 ways to add custom fields to WordPress :

1. Using WordPress Feature
2. Using a Plugin – Advanced Custom Fields(ACF)
3. Using a hook

Here I’m going to explain the 3 simple possible ways to create custom fields for your post or page or any other custom post types.

let’s get started!!

1. Using WordPress Feature

As you can see from the above image, the first step is to enable the custom fields checkbox from the Screen Options in the top right corner. After enabling it, in the last segment there will be an option called Custom Fields. here you can specify and add the required information.

2.Using a Plugin – Custom Fields WordPress Plugin Advanced Custom Fields(ACF)

Using the Advanced Custom Fields WordPress plugin you can take full control of your WordPress custom field data. This Plugin Custom Field builder allows you to instantly and easily add fields to WP edit screens with only a few clicks!

Add them everywhere. Fields can be added all over the WordPress including Posts, Pages, or any custom post types and even custom options pages! Reveal them everywhere. Load and display your custom field values in any theme or template file with our hassle-free and developer-friendly functions!

Features :

• Easy & Intuitive
• Powerful Functions
• Covering 30 Field Types(Inputs)
• Widespread Documentation
• Millions of active Users

3. Using a hook – Custom Field Using Hook

I’ve needed to display custom fields on Post or Pages or any other Post-types. If your WordPress is already filled up with many Plugins or your customer will not recommend using the plugins, this way will help you to achieve your requirement by registering a few lines of codes in an active theme’s function.php

add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );
/* Do something with the data entered */
add_action( 'save_post', 'myplugin_save_postdata' );
/* Adds a box to the main column on the Post and Page edit screens */
function myplugin_add_custom_box() {
  add_meta_box( 'wp_editor_test_1_box', 'Sessions', 'wp_editor_meta_box', 'your_required_post_type' );
}
/* here you can add the inputs */
function wp_editor_meta_box( $post ) {
  // Use nonce for verification
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );
  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );
  // Settings that we'll pass to wp_editor
  $args = array (
        'tinymce' => false,
        'quicktags' => true,
  );
  wp_editor( $field_value[0], '_wp_editor_test_1', $args );
}
/* When the post is saved, saves our custom data */
function myplugin_save_postdata( $post_id ) {

  // verify if this is an auto save runtine. 
  // If it is our form has not been submitted, so we dont want to do anything
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;
  // verify this came from the our screen and with proper authorization,
  // because save_post can be triggered at other times
  if ( ( isset ( $_POST['myplugin_noncename'] ) ) && ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) ) )
      return;
  // Check permissions
  if ( ( isset ( $_POST['post_type'] ) ) && ( 'page' == $_POST['post_type'] )  ) {
    if ( ! current_user_can( 'edit_page', $post_id ) ) {
      return;
    }    
  }
  else {
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
      return;
    }
  }

  // OK, we're authenticated: we need to find and save the data
  if ( isset ( $_POST['_wp_editor_test_1'] ) ) {
    update_post_meta( $post_id, '_wp_editor_test_1', $_POST['_wp_editor_test_1'] );
  }

}

In the line number 6, you have to mention the post type whether it is post or page or any other post types.
If you are a developer, the above code will help you to display custom fields as well as function to save the custom value according to the customer requirement. And the above code consists of all the required functions for the custom fields, For example displaying an input in Add new Post form and also in Edit Post form and saving the value in the DataBase.