How to Create Custom Fields in WordPress

WordPress has always been one of the favourite platform for a quick development of websites, blogs, and in some cases works very well for e-commerce applications using WooCommerce and other plugins to a scalable level with highly customisable options.

Customizing the WordPress websites have become easier with the rise in plugin developers who provide a ready-made solution for your task. There are some cases when as a developer you may need to create pages or posts with fields that don’t come with the theme that you are using or WordPress by default. Those are the times when you seek for an easy-to-use option to create Custom Fields that can be added to Posts, Pages or any other type in your WordPress Website.

You may want to read : How to Create Custom Post Type in WordPress

Here in this post, we will look into how to create Custom Fields in WordPress in the following two methods

Create Custom Fields via Plugin :

There are various plugins out there in the WordPress Plugins Repository (https://wordpress.org/plugins/). I prefer to use the plugin named Advanced Custom Fields by Elliot Condon for my projects as it is an amazing helper to quickly create the custom fields according to your post type. Like every other plugin, you can create the custom fields for a custom post type as well.

After installing the plugin, you will see the Custom Fields in the sidebar where you can create a Custom Field Group and create the type of fields for one post/ page type. Add new fields and select the Location and set the conditional rule and apply the needed settings.

You should be able to see the field that you have created in the corresponding Location that is set.

Create Custom Fields via Code :

To create a custom field manually is to an extent works well, if you don’t want to have the plugins do it for you. Here’s how you can do the manual custom field creation.

Custom Fields are created using add_meta_boxes hook using the add_meta_box function

/**
 * Register the Meta Box
 */
function vi_register_custom_meta_box() {
    add_meta_box( 'vi_custom_meta_box_id', esc_html__( 'Custom Fields', 'text-domain' ), 'vi_create_custom_field', 'post', 'advanced', 'high' );
}
add_action( 'add_meta_boxes', 'vi_register_custom_meta_box');

/**
 * Create the Custom Field 
 */
function vi_create_custom_field( $meta_id ) {

    $custom_field = '<label for="custom_title">'. esc_html__('Custom Title', 'text-domain') .'</label>';
    $custom_title = get_post_meta( $meta_id->ID, 'custom_title', true );
		wp_nonce_field( 'vi_custom_meta_box_id', '_nonce_custom_title' );
		$custom_field .= '<input type="text" name="custom_title" id="custom_title" class="custom_title" value="'. esc_attr($custom_title) .'" style="width:300px;"/>';

    echo $custom_field;
}

In the above snippet, we create a custom field with the label Custom Title. This will create a meta box with the title Custom Fields and that will have the custom field like below.

Our work is not done yet, as we have only created the custom field. Now, we will have to give this the functionality to save the meta field data.

add_action( 'save_post', 'save_custom_fields', 10, 2 );
function save_custom_fields( $post_id, $post ) {
    /*
     * We need to verify this came from the our screen and with proper authorization,
     * because save_post can be triggered at other times.
     */

		$nonce = $_POST['_nonce_custom_title'];

    // Check if our nonce is set.
    if ( ! isset( $_POST['_nonce_custom_title'] ) ) {
        return $post_id;
    }


    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $nonce, 'vi_custom_meta_box_id' ) ) {
        return $post_id;
    }

    /*
     * If this is an autosave, our form has not been submitted,
     * so we don't want to do anything.
     */
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }

    // Check the user's permissions.
     if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }

    // Sanitize the user input.
    $data = sanitize_text_field( $_POST['custom_title'] );

    // Update the meta field.
    update_post_meta( $post_id, 'custom_title', $data );
}

Register thesave_custom_fields function with two arguments via the hook save_post. The first argument is the post id and the second one is the post object. The nonce check is to make sure that the data is coming from the text box that we have created and only save the data if the nonce check succeeds.

update_post_meta will save the text box field value to the meta id custom_title.

For every new field that you create can be put under meta boxes based on your requirements. To retrieve the custom_title meta field value, we use below in the template file for the respective post/page.

get_post_meta( $meta_id->ID, 'custom_title', true );

This is it, you have created the custom field manually via code.

I prefer to choose the plugin method as it is easier for my projects as it can be managed from the admin end, but in some cases, where you have restricted choices to make, going ahead with the manual custom field creation would make sense.

Let me know in the comments on what worked out for you.

Image Credit : Photo by Luca Bravo on Unsplash