PressTigers
How To Create Custom Post Meta Boxes In WordPress
- September 3, 2015
- Leave a comment
A post meta box is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post. Generally, two types of data is entered into meta boxes:
- Metadata (i.e. custom fields)
- Taxonomy terms.
Post Metadata:
Post Metadata is the data that is saved in wp_postmeta table in the database. Each entry is saved as the following four fields in this table:
- meta_id: A unique ID for a specific metadata
- post_id: The post ID to which this metadata is attached
- meta_key: A key which is used to identify Data (you’ll work with this often)
- meta_value: The value of metadata.
Building A Custom Post Meta Box:
The following code snippet will add your meta box creation function to the add_meta_boxes hook. WordPress provides this hook to add meta boxes:
|
1 2 3 4 5 6 7 |
<?php function add_custom_meta_boxes () { add_meta_box( $id, $title, $callback, $page, $context = 'advanced', $priority = 'default', $callback_args = null ); } add_action ( 'add_meta_boxes', 'add_custom_meta_boxes' ); ?>; |
In the above code snippet, you added add_custom_meta_boxes() function to the add_meta_boxes hook. This function’s purpose is to add post meta boxes. Before proceeding further, add_meta_box() function includes the following parameters:
- $id: This is a unique ID assigned to your meta box. It should have a unique prefix and be valid with HTML
- $title: This is a title of the meta box. You have to internationalize this for translators
- $callback: The callback function displays the output of your meta box
- $page: The admin page to display the meta box. In our case, this would be the name of the post type (post, page, or a custom post type)
- $context: A place on web page where meta box should be shown. The available options are normal, advanced, and side
- $priority: How high/low of the meta box should be prioritized. The available options are default, core, high, and low
- $callback_args: An array of custom arguments you can pass to your $callback function as the second parameter
The following code will then add the post meta box to the post editor screen:
|
1 2 3 4 5 6 |
/* Create one or more meta boxes to be displayed on the post editor function add_post_meta_boxes () { add_meta_box ( 'custom_post_meta_boxes', 'Menu Options', 'custom_post_meta_boxes', 'post', 'normal', 'high' ); } add_action ( 'add_meta_boxes', 'add_post_meta_boxes' ); |
We still need to display the meta box’s HTML though which is custom_post_meta_boxes function here:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
funciton custom_post_meta_boxes(){ global $post; wp_nonce_field( basename( __FILE__ ), 'custom_post_meta_nonce' ); ?> <p> <label for="custom-field"><?php _e( "Add a custom CSS class.", 'example' ); ?></label> <br /> <input class="pt_custom_class" type="text" name="pt_custom_class" id="pt_custom_class" value="<?php echo esc_attr( get_post_meta( $post->ID, 'pt_custom_class', true ) ); ?>" size="30" /> </p> <?php } |
At this point, you should have a nice-looking meta box on your post editing screen.
Save Meta Box Data:
We have created a meta box and it’s time now to save post metadata as follows:
|
1 2 |
/* Save post meta on the 'save_post' hook. */ add_action( 'save_post', 'custom_post_meta_save', 10, 2 ); |
That function will actually look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Meta box setup function. */ /* Save the meta box's post metadata. */ function custom_post_meta_save( $post_id, $post ) { /* Verify the nonce before proceeding. */ if ( !isset( $_POST['custom_post_meta_nonce'] ) || !wp_verify_nonce( $_POST['custom_post_meta_nonce'], basename( __FILE__ ) ) ) return $post_id; /* Get the post type object. */ $post_type = get_post_type_object( $post->post_type ); /* Check if the current user has permission to edit the post. */ if ( !current_user_can( $post_type->cap->edit_post, $post_id ) ) return $post_id; /* Now get the value of our custom field $ pt_custom_class = empty($_POST['pt_custom_class'])?'':$_POST[' pt_custom_class']; // update_post_meta( $post_id, $meta_key, $new_meta_value ); Update_post_meta( $post_id , 'pt_custom_class' , $ pt_custom_class ); } |
Now the meta value is saved. You can get the post meta value where you need by:
|
1 |
$pt_custom_class = get_post_meta( $post->ID , 'pt_custom_class' , true ); |
User Comments