Custom field or post meta is a feature that allows users to add additional information when writing a post. This article will show you how to create custom fields in WordPress step by step.
Step 1: Create a meta box to store custom fields.
|
1 2 3 4 5 6 7 8 9 10 |
add_action( 'add_meta_boxes', 'custom_meta_box' ); function custom_meta_box() { add_meta_box( 'custom_meta_box', 'Meta box 1', 'my_custom_meta_box', 'post', 'normal' ); } function my_custom_meta_box() { } |
Step 2: Add html input elements into my_custom_meta_box function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function my_custom_meta_box() { // Add nonce field to validate that the request comes from this meta box wp_nonce_field( 'custom_meta_box_nonce_function', 'custom_meta_box_nonce' ); ?> <div> Text field: <input type="text" name="custom_txt"> </div> <div> Checkbox field: <input type="checkbox" name="custom_ckb"> </div> <div> Radio field: <input type="radio" name="custom_rad" value="Yes" checked="checked"> <input type="radio" name="custom_rad" value="No"> </div> <div> Select option: <select name="custom_sl"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> <?php } |
Step 3: Create a function to save your custom fields data into database
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* * Save custom fields meta data * * @param int $post_id Post ID * * @return void|int */ function save_custom_fields( $post_id ) { // Verify nonce if( ! isset( $_POST['custom_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['custom_meta_box_nonce'], 'custom_meta_box_nonce_function' ) ) { return $post_id; } // If this post type isn't post or the logged in user doesn't have permission to edit this post if ( 'post' != $_POST['post_type'] || ! current_user_can( 'edit_post', $post_id ) ) { return $post_id; } // Save meta data update_post_meta( $post_id, 'custom_txt_name', $_POST['custom_txt'] ); update_post_meta( $post_id, 'custom_ckb_name', empty( $_POST['custom_ckb'] ) ? 0 : 1 ); update_post_meta( $post_id, 'custom_rad_name', 'Yes' == $_POST['custom_rad'] ? 1 : 0 ); update_post_meta( $post_id, 'custom_sl_name', $_POST['custom_sl'] ); } // Hook save_cusmtom_fields function to action save_posts add_action( 'save_post', 'save_custom_fields' ); |
Step 4: Get custom fields data from database and assign them to inputs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
global $post; $custom_txt_name = get_post_meta( $post->ID, 'custom_txt_name', true ); $custom_ckb_name = get_post_meta( $post->ID, 'custom_ckb_name', true ); $custom_rad_name = get_post_meta( $post->ID, 'custom_rad_name', true ); $custom_sl_name = get_post_meta( $post->ID, 'custom_sl_name', true ); ... <input type="text" name="custom_txt" value="<?php echo $custom_txt_name; ?>"> ... <input type="checkbox" name="custom_ckb" <?php echo 1 == $custom_ckb_name ? 'checked="checked"' : ''; ?>> ... <input type="radio" name="custom_rad" value="No" <?php echo 0 == $custom_rad_name ? 'checked="checked"' : ''; ?>> ... <option value="2" <?php echo 2 == $custom_sl_name ? 'selected="selected"' : ''; ?>>Option 2</option> <option value="3" <?php echo 3 == $custom_sl_name ? 'selected="selected"' : ''; ?>>Option 3</option> |
Full source:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
add_action( 'add_meta_boxes', 'custom_meta_box' ); function custom_meta_box() { add_meta_box( 'custom_meta_box', 'Meta box 1', 'my_custom_meta_box', 'post', 'normal' ); } function my_custom_meta_box() { global $post; $custom_txt_name = get_post_meta( $post->ID, 'custom_txt_name', true ); $custom_ckb_name = get_post_meta( $post->ID, 'custom_ckb_name', true ); $custom_rad_name = get_post_meta( $post->ID, 'custom_rad_name', true ); $custom_sl_name = get_post_meta( $post->ID, 'custom_sl_name', true ); // Add nonce field to validate that the request comes from this meta box wp_nonce_field( 'custom_meta_box_nonce_function', 'custom_meta_box_nonce' ); ?> <div> Text field: <input type="text" name="custom_txt" value="<?php echo $custom_txt_name; ?>"> </div> <div> Checkbox field: <input type="checkbox" name="custom_ckb" <?php echo 1 == $custom_ckb_name ? 'checked="checked"' : ''; ?>> </div> <div> Radio field: <input type="radio" name="custom_rad" value="Yes" checked="checked"> <input type="radio" name="custom_rad" value="No" <?php echo 0 == $custom_rad_name ? 'checked="checked"' : ''; ?>> </div> <div> Select option: <select name="custom_sl"> <option value="1">Option 1</option> <option value="2" <?php echo 2 == $custom_sl_name ? 'selected="selected"' : ''; ?>>Option 2</option> <option value="3" <?php echo 3 == $custom_sl_name ? 'selected="selected"' : ''; ?>>Option 3</option> </select> </div> <?php } /* * Save custom fields meta data * * @param int $post_id Post ID * * @return void|int */ function save_custom_fields( $post_id ) { // Verify nonce if( ! isset( $_POST['custom_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['custom_meta_box_nonce'], 'custom_meta_box_nonce_function' ) ) { return $post_id; } // If this post type isn't post or the logged in user doesn't have permission to edit this post if ( 'post' != $_POST['post_type'] || ! current_user_can( 'edit_post', $post_id ) ) { return $post_id; } // Save meta data update_post_meta( $post_id, 'custom_txt_name', $_POST['custom_txt'] ); update_post_meta( $post_id, 'custom_ckb_name', empty( $_POST['custom_ckb'] ) ? 0 : 1 ); update_post_meta( $post_id, 'custom_rad_name', 'Yes' == $_POST['custom_rad'] ? 1 : 0 ); update_post_meta( $post_id, 'custom_sl_name', $_POST['custom_sl'] ); } // Hook save_cusmtom_fields function to action save_posts add_action( 'save_post', 'save_custom_fields' ); |
Thanks for your time reading!