Skip links

WordPress create custom meta boxes

This post is explaining creating wordpress custom meta boxes/meta data in easy,secure & proper way.A post meta box is a draggable box shown on the post adding/editing page. Its purpose is to allow the user to enter information in addition to the main post content.
There are two types of meta boxes.

1-Meta data

Check this attachment to get an idea about the meta box.
Wordpress custom meta box
Post metadata is data that’s saved in the wp_postmeta table in the database.
Following functions are using working with post meta data.
add_post_meta() – Add post metadata.
update_post_meta() – Update post metadata.
delete_post_meta() Delete post metadata.
get_post_meta()Retrieve post metadata.

2-Taxonomy terms

Check this attachment to get an idea about the Taxonomy in wordpress.
Wordpress custom post types
I’ll explain about creating a custom post types in next post.

Creating a custom post meta box

ok.Now I’m going to show you how to create custom meta box in wordpress.
Look at this diagram and you can understand what I’m going to do now.
Wordpress custom meta box

1-Add meta boxes on the ‘add_meta_boxes’ hook.

Open your theme’s folder functions.php file and add the following codes at the end of that file.
wp-content/themes/yourthemefolder/functions.php

/* Add meta boxes on the 'add_meta_boxes' hook. */
function my_portfolio_url_meta_box($post_type) {
$types = array('portfolio'); // you can limit by post or page ..etc
	if (in_array($post_type, $types)) {
      add_meta_box(
        'my_portfolio_url',
        'Topic',
        'my_portfolio_url_meta_box_callback',
        $post_type,
        'normal',
        'high'
      );
   }  
}
add_action( 'add_meta_boxes', 'my_portfolio_url_meta_box' );

 

 

2-Display the meta value

function my_portfolio_url_meta_box_callback( $post ) {

    // Add a nonce field so we can check for it later.
    wp_nonce_field( 'my_portfolio_url_nonce', 'my_portfolio_url_nonce' );

    $value = get_post_meta( $post->ID, '_my_portfolio_url', true );

    echo '';
}

 

3-Save post meta on the ‘save_post’ hook

 /* Save post meta on the 'save_post' hook. */
function save_my_portfolio_url_meta_box_data( $post_id ) {

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

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $_POST['my_portfolio_url_nonce'], 'my_portfolio_url_nonce' ) ) {
        return;
    }

    // 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;
    }

    // Check the user's permissions.
    if ( isset( $_POST['post_type'] ) && 'portfolio' == $_POST['post_type'] ) {

        if ( ! current_user_can( 'edit_page', $post_id ) ) {
            return;
        }

    }
    else {

        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return;
        }
    }

    /* OK, it's safe for us to save the data now. */

    // Make sure that it is set.
    if ( ! isset( $_POST['my_portfolio_url'] ) ) {
        return;
    }

    // Sanitize user input.
    $my_data = sanitize_text_field( $_POST['my_portfolio_url'] );

    // Update the meta field in the database.
    update_post_meta( $post_id, '_my_portfolio_url', $my_data );
}

add_action( 'save_post', 'save_my_portfolio_url_meta_box_data' );

That’s only you have to do. Now clear the browser cache and check the post edit/create page and you can see the custom meta data value there.
I’ll show how to create custom post type of wordpress in next post.