How to Create a Custom Metabox field in WordPress without a Plugin

How to Create a Custom Metabox field in WordPress without a Plugin?

Are you going to Create a Custom Metabox field in WordPress without a Plugin? I will teach you how to do it.

When a user edits a post, the edit screen is composed of several default boxes: Editor, Publish, Categories, Tags, etc. These boxes are meta boxes. Plugins can add custom meta boxes to an edit screen of any post type.

In this article, I will create a custom Metabox for you. Please read this article carefully. At the end of the article, You can create a custom Metabox.

Register Metabox for Any Post Type: 

For this job, We have WordPress official function add_meta_box. By using this function you can add Metabox on any post type. 

Let’s see how to use it (Place this function on your function.php or plugin file);

function wpk_register_metabox() {
    add_meta_box( 'wpk-1', __( 'WPK Custom Field', 'wpk' ), 'wpk_display_metabox_callback', 'post' );
}
add_action( 'add_meta_boxes', 'wpk_register_metabox' );

Don’t be rush, I have put an callback function in add_meta_box parameter named “wpk_custom_metabox_callback”. Let’s add fields using this callback function.

Add Custom Fields into a Metabox:

In the preview section, We discuss about register Metabox. Now We will add custom fields.  Let’s create a form in the callback function.

Use this code:

function wpk_display_metabox_callback( $post ){
	$wpk_select_val = get_post_meta( get_the_ID(), 'wpk_select', true );

	?>
	 <div class="wpk_box">
	 	<style scoped>
	        .wpk_box{
	            display: grid;
	            grid-template-columns: max-content 1fr;
	            grid-row-gap: 10px;
	            grid-column-gap: 20px;
	        }
	        .wpk_field{
	            display: contents;
	        }
	    </style>
	 	<p class="meta-options wpk_field">
	        <label for="wpk_desc_title">Description Title:</label>
	        <input id="wpk_desc_title"
	            type="text"
	            name="wpk_desc_title"
	            value="<?php echo esc_attr( get_post_meta( get_the_ID(), 'wpk_desc_title', true ) ); ?>">
	    </p>

	    <p class="meta-options wpk_field">
	        <label for="wpk_select">Select Subject:</label>
	        <select name="wpk_select" id="wpk_select">
	        	 <option value="dog" <?php (isset($wpk_select_val))? (selected($wpk_select_val, 'dog', true)): ('') ?>>Dog</option>
	        	 <option value="cat"  <?php (isset($wpk_select_val))? (selected($wpk_select_val, 'cat', true)): ('') ?>>Cat</option>
	        	 <option value="hamster" <?php (isset($wpk_select_val))? (selected($wpk_select_val, 'hamster', true)): ('') ?>>Hamster</option>
	        </select>
	    </p>

	    <?php $checkboxvalue = get_post_meta( get_the_ID(), 'wpk_checkbox', true )? 'checked':''; ?>
	    <p class="meta-options wpk_field">
	        <label for="wpk_checkbox">You Like wpknifer.com:</label>
	        <input id="wpk_checkbox"
	            type="checkbox"
	            name="wpk_checkbox"
	            <?php echo esc_attr( $checkboxvalue); ?>>
	    </p>

	    <p class="meta-options wpk_field">
	        <label for="wpk_description">Description:</label>
	        <textarea  id="wpk_description"
	            name="wpk_description"><?php echo esc_attr( get_post_meta( get_the_ID(), 'wpk_description', true ) ); ?>
	        </textarea>
	    </p>
	    
	 </div>
	<?php
}

I have created a text field, select fields, checkbox, and Textarea for example. Remember the field id I have used.

Save the Custom Fields Value:

Now we have ready to see the custom Metabox field. But it’s won’t save any value. To save value use update_post_meta  WordPress function and save in post use save_post use save post hook.

Put this code into your function.php or plugin file.

function wpk_save_metabox( $post_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( $parent_id = wp_is_post_revision( $post_id ) ) {
        $post_id = $parent_id;
    }
    $fields = [
        'wpk_desc_title',
        'wpk_select',
        'wpk_checkbox',
        'wpk_description',
    ];
    foreach ( $fields as $field ) {
        if ( array_key_exists( $field, $_POST ) ) {
            update_post_meta( $post_id, $field, sanitize_text_field( $_POST[$field] ) );
        }
     }
}
add_action( 'save_post', 'wpk_save_metabox' );

Hope now your field value will be saved. Then you can use get_post_meta() to get field value. But this function works only under the while loop. Because it a post data we are saving. 

Like this:

echo get_post_meta( get_the_ID(), 'wpk_desc_title', true );echo '</br>';
echo get_post_meta( get_the_ID(), 'wpk_select', true );echo '</br>';
if (get_post_meta( get_the_ID(), 'wpk_checkbox', true ) == true) {
  echo 'yes';echo '</br>';
}
echo get_post_meta( get_the_ID(), 'wpk_description', true );echo '</br>';

I hoop you can Create a Custom Metabox field in WordPress without a Plugin. 

Conclusion:

If you are a WordPress theme developer, You must know that sometimes you need one or two meta fields. We install a plugin for that simple field. When you could add Metabox manually. You can add fields freely. 

In this article, I try to show how to add Metabox manually. I hope you benefited from it.

See More:

How to get the next and previous post link in WordPress

Leave a Reply

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