Creating interfaces
To create a new wordpress custom meta box two custom functions are needed. The first function is the main one, it creates a new meta box (defines the name and label) and calls the second one, which serves to display the inside of the meta box.
Outline of the meta box
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Adds a box to the main column on the Post and Page edit screens. function wpp_add_meta_box() { add_meta_box( 'wpp_section_id', // ID (also CSS ID) __( 'WPP metabox', 'wpp' ), // title 'wpp_meta_box_callback', // callback function, prints box content 'employee', // screen (post_type), 'side', // context (normal, side, advanced) 'high' // priority (low, core, high) ); } add_action( 'add_meta_boxes', 'wpp_add_meta_box' ); |
In the previous example, a custom function wpp_add_meta_box() was created to activate the meta box, and within it the wordpress function add_meta_box() is used:
add_meta_box()
|
1 |
add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args ) |
Where are the parameters:
- $id
(string) (required) HTML ‘id’ attribute - $title
(string) (required) The name visible to the end user - $callback
(callback) (Required) A function that prints HTML to the screen. Accepts max two arguments:
1.) $post object for the currently viewed post or page
2.) $metabox (string) - $screen
(string) (optional) The type on which the meta box will appear (Can be: ‘post’,’page’,’dashboard’,’link’,’attachment’,’custom_post_type’,’comment’ where custom_post_type is the custom post type slug) - $context
(string) (optional) The part of the screen where the “edit” section is displayed (‘normal’, ‘advanced’, or ‘side’). - $priority
(string) (Optional) Priority that determines where it will be displayed (‘high’, ‘core’, ‘default’ or ‘low’) - $callback_args
(array) (Optional) Arguments to pass to the callback function. The callback function will receive a $post object with the arguments passed.
Inside the Meta box
This second function, the so-called The callback function creates the inner form of the meta box and is called from the first function that creates the meta box frame. The core of the interior is usually an HTML form that allows data entry.
For the sake of security, it is necessary to use protection against malicious input, so we will create a nonce within the function, which will be verified later before saving the data to the database.
If the value of the field is entered and saved in the database, it is necessary that it be visible in the interface, i.e. so that the value does not disappear from the field after the SAVE action. For this reason, it is necessary to add a piece of code that returns the value of the field to the field.
Example No. 1
When all the above is taken into account, the function would look like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function myplugin_meta_box_callback( $post ) { // Add a nonce field so we can check for it later. wp_nonce_field( 'myplugin_save_meta_box_data', 'myplugin_meta_box_nonce' ); //Label iznad input polja echo '<label for="myplugin_new_field">'; _e( 'Description for this field', 'myplugin_textdomain' ); echo '</label> '; // Returning the value if it is already entered in the database, so that we can print it in the input field $value = get_post_meta( $post->ID, '_my_meta_value_key', true ); //Input polje echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_attr( $value ) . '" size="25" />'; } |
Example No. 2
If inside the meta box an input field is used to enter the date, then for a good “user experience” it would be good to use a date picker. In the following example, we will use the date picker from the jQuery UI library.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function wpp_meta_box_callback( $post ) { // Add an nonce field so we can check for it later. wp_nonce_field( 'wpp_meta_box', 'wpp_meta_box_nonce' ); //Label iznad input polja echo '<label for="wpp_new_field">'; _e( 'Date', 'wpp' ); echo '</label> '; // Returning the value if it is already entered in the database, so that we can print it in the input field $date_value = get_post_meta( $post->ID, '_date', true ); //Input polje za datum echo '<input type="text" id="wpp_date" name="wpp_date" value="' . esc_attr( $date_value ) . '" size="25" />'; ?> //Pozivanje javascript UI datepicker-a <script type="text/javascript"> jQuery(function($){ $("#wpp_date").datepicker(); }); </script> <?php } |
Saving data of custom fields
We need to verify this came from our screen and with proper authorization, because the save_post action can be triggered at other times.
|
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 |
function myplugin_save_meta_box_data( $post_id ) { //--------------------------------------------------------------------------------------------- //*********************** KONTROLA *********************************************************** //--------------------------------------------------------------------------------------------- // Check if our nonce is set. if ( ! isset( $_POST['myplugin_meta_box_nonce'] ) ) { return; } // Verify that the nonce is valid. if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_save_meta_box_data' ) ) { 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'] ) && 'page' == $_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['myplugin_new_field'] ) ) { return; } // Sanitize user input. $my_data = sanitize_text_field( $_POST['myplugin_new_field'] ); // Update the meta field in the database whose key is hidden update_post_meta( $post_id, '_my_meta_value_key', $my_data ); } add_action( 'save_post', 'myplugin_save_meta_box_data' ); |
Meta box generator
Online generator
You can see an excellent WordPress code generator on the
page
http://jeremyhixon.com/tool/wordpress-meta-box-generator-v2-beta/
Here is the generated code for one label and one check box:
|
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 |
function proba_get_meta( $value ) { global $post; $field = get_post_meta( $post->ID, $value, true ); if ( ! empty( $field ) ) { return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) ); } else { return false; } } function proba_add_meta_box() { add_meta_box( 'proba-proba', __( 'Proba', 'proba' ), 'proba_html', 'post', 'advanced', 'default' ); } add_action( 'add_meta_boxes', 'proba_add_meta_box' ); function proba_html( $post) { wp_nonce_field( '_proba_nonce', 'proba_nonce' ); ?> <p>ovo je probni meta box</p> <p> <label for='proba_dali_je_ovo_check_box'><?php _e( 'Is this a check box?', 'proba' ); ?></label><br> <input type="text" name="proba_dali_je_ovo_check_box" id="proba_dali_je_ovo_check_box" value="<?php echo proba_get_meta( 'proba_dali_je_ovo_check_box' ); ?>"> </p> <p> <input type="checkbox" name="proba_cekiraj" id="proba_cekiraj" value="cekiraj" <?php echo ( proba_get_meta( 'proba_cekiraj' ) === 'cekiraj' ) ? 'checked' : ''; ?>> <label for="proba_cekiraj"><?php _e( 'cekiraj', 'proba' ); ?><label> </p> <?php } function proba_save( $post_id ) { if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; if ( ! isset( $_POST['proba_nonce'] ) || ! wp_verify_nonce( $_POST['proba_nonce'], '_proba_nonce' ) ) return; if ( ! current_user_can( 'edit_post', $post_id ) ) return; if ( isset( $_POST['proba_dali_je_ovo_check_box'] ) ) update_post_meta( $post_id, 'proba_dali_je_ovo_check_box', esc_attr( $_POST['proba_dali_je_ovo_check_box'] ) ); if ( isset( $_POST['proba_cekiraj'] ) ) update_post_meta( $post_id, 'proba_cekiraj', esc_attr( $_POST['proba_cekiraj'] ) ); else update_post_meta( $post_id, 'proba_cekiraj', null ); } add_action( 'save_post', 'proba_save' ); Usage: proba_get_meta( 'proba_dali_je_ovo_check_box' ) Usage: proba_get_meta( 'proba_cekiraj' ) |
ACF plugin
ACF is a plugin that creates meta boxes and customized custom fields inside them.