[WordPress] How to Fill Custom Field with Meta Box Interface

WordPress is amazing CMS which you can customize it as you want, depend on your needed and creativity. WordPress have a feature called custom field, where with custom field, you can add and enhancing blog post. So, wordpress is very flexible.

But custom field interface in wordpress admin is not easy for newbie or for non-tech guys. So, many wordpress theme developer using custom field combine it with meta box. What is metabox and what difference with custom fields, you can follow that link. But, meta box makes user easily when fill custom fields.

Ok, this post will explain how to fill custom fields through meta box interface, so its easy and fast. I have modified of wordpress snippet code,

// Little function to return a custom field value
function toko_get_custom_field( $value ) {
	global $post;

    $custom_field = get_post_meta( $post->ID, $value, true );
    if ( !empty( $custom_field ) )
	    return is_array( $custom_field ) ? stripslashes_deep( $custom_field ) : stripslashes( wp_kses_decode_entities( $custom_field ) );

    return false;

// Register the Metabox
function create_meta_box() {
	add_meta_box( 'meta-box', __( 'Title of Metabox', 'textdomain' ), 'process_meta_box', 'post', 'normal', 'high' );
add_action( 'add_meta_boxes', 'create_meta_box' );

// Output the Metabox
function process_meta_box( $post ) {
	// create a nonce field
	wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?>
		<label><?php _e( 'Harga Mahal', 'textdomain' ); ?>:</label>
		<input type="text" name="harga"  value="<?php echo get_custom_fields_content( 'harga' ); ?>" size="50" />
		<label ><?php _e( 'Harga Murah', 'textdomain' ); ?>:</label>
		<input type="text" name="hargamahal"  value="<?php echo get_custom_fields_content( 'harga_mahal' ); ?>" size="50" />
		<label ><?php _e( 'Kode Cincin', 'textdomain' ); ?>:</label>
		<input type="text" name="kode"  value="<?php echo get_custom_fields_content( 'kode' ); ?>" size="50" />
		<label ><?php _e( 'Rating', 'textdomain' ); ?>:</label>
		<input type="text" name="rating"  value="<?php echo get_custom_fields_content( 'rating' ); ?>" size="50" />


// Save the Metabox values
function toko_meta_box_save( $post_id ) {
	// Stop the script when doing autosave
	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

	// Verify the nonce. If insn't there, stop the script
	if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;

	// Stop the script if the user does not have edit permissions
	if( !current_user_can( 'edit_post' ) ) return;

    // Save the textfield
	if( isset( $_POST['harga'] ) )
		update_post_meta( $post_id, 'harga', esc_attr( $_POST['harga'] ) );
	if( isset( $_POST['hargamahal'] ) )
		update_post_meta( $post_id, 'harga_mahal', esc_attr( $_POST['hargamahal'] ) );
	if( isset( $_POST['kode'] ) )
		update_post_meta( $post_id, 'kode', esc_attr( $_POST['kode'] ) );
	if( isset( $_POST['rating'] ) )
		update_post_meta( $post_id, 'rating', esc_attr( $_POST['rating'] ) );

add_action( 'save_post', 'toko_meta_box_save' );

Those code support for 4 custom field with key : harga, harga_mahal, kode and rating. Its my code for my online shop, but you can use it and modify it as you want.

How to Use Those Code?

Just paste it on functions.php file and you’re done.

I was looking for how to easily and fast to build meta box, but i found confused tutorial and libary. Even, you can use plugin, but its not meet my needed. And this snippet is small and useful, and work for me.


As bonus, i am listed many resource for meta box. You can learn more and making your theme is powerful.

  1. How to Create Custom WordPress Write/Meta Boxes (codetuts)
  2. Custom Metaboxes and Fields (CMB) Library
  3. Plugin CMB2 on WordPress
  4. How to Add Custom Meta Boxes in WordPress Posts and Post Types

And, this video on youtube


No Responses

Show all responses

Write a response