{"id":6245,"date":"2016-11-18T18:22:40","date_gmt":"2016-11-18T23:22:40","guid":{"rendered":"https:\/\/themespress.ca\/?p=6245"},"modified":"2022-09-05T11:38:09","modified_gmt":"2022-09-05T15:38:09","slug":"build-and-display-a-wordpress-metabox","status":"publish","type":"post","link":"https:\/\/themespress.ca\/en\/build-and-display-a-wordpress-metabox\/","title":{"rendered":"Build and Display a WordPress Metabox"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

This tutorial will help you learn how to create a metabox allowing users to collect data from a Post or custom Post Type. In the example below, we will use Themespress.ca<\/strong> as an example.<\/p>\n

We want to create a Metabox with the following structure:
\n\u2013 Easy
\n\u2013 Intermediate
\n\u2013 Hard<\/p>\n

This metabox will let you measure the post or post type for users. There are multiple ways to create a metabox. We recommend: <\/p>\n\n\t\t<\/div>\n\t<\/div>\n

Build and Display a WordPress Metabox<\/h2>
function statut_diffucult_get_meta( $value ) {\n\tglobal $post;\n\t$field = get_post_meta( $post->ID, $value, true );\n\tif ( ! empty( $field ) ) {\n\t\treturn is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) );\n\t} else {\n\t\treturn false;\n\t}\n}\n\nfunction statut_diffucult_add_meta_box() {\n\tadd_meta_box(\n\t\t'statut_diffucult-statut-diffucult',\n\t\t__( 'Statut Difficulté', 'statut_diffucult' ),\n\t\t'statut_diffucult_html',\n                'post',\n\t\t'side',\n\t\t'high'\n\t);\n}\nadd_action( 'add_meta_boxes', 'statut_diffucult_add_meta_box' );<\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
In this function statut_hard_add_meta_box<\/strong>, we can figure out how to build our structure. We also use it for WordPress posts. (‘post’) == \/\/ Changer pour votre Post Type.<\/p>\n
The side of our function represents the positioning in the Post Type.<\/p>\n
In this case, the side is the lateral bar of WordPress. The High defines its priority; in this case we want it higher because we want it at the top. The metabox is for the posts and will be positioned in the top right section of the post you’re currently editing.<\/p>\n
Now we want our metabox to include three checkbox; one for each choice: Easy, Intermediate, Hard. It’s also done so we can save the checkbox (or checkboxes) selected.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n
function statut_diffucult_html( $post) {\n\twp_nonce_field( '_statut_diffucult_nonce', 'statut_diffucult_nonce' ); ?>\n\t<p>\n        <input type="checkbox" name="statut_diffucult_facile" id="statut_diffucult_facile" value="facile" <?php echo ( statut_diffucult_get_meta( 'statut_diffucult_facile' ) === 'facile' ) ? 'checked' : ''; ?>>\n\t\t<label for="statut_diffucult_facile"><?php _e( 'Facile', 'crio-child' ); ?><\/label>\t\n\t\t\n\t<\/p>\t\n\t<p>\n        <input type="checkbox" name="statut_diffucult_intermdiaire" id="statut_diffucult_intermdiaire" value="intermdiaire" <?php echo ( statut_diffucult_get_meta( 'statut_diffucult_intermdiaire' ) === 'intermdiaire' ) ? 'checked' : ''; ?>>\n\t\t<label for="statut_diffucult_intermdiaire"><?php _e( 'Intermédiaire', 'crio-child' ); ?><\/label>\t\n\t<\/p>\t\n\t<p>\n\t    <input type="checkbox" name="statut_diffucult_difficile" id="statut_diffucult_difficile" value="difficile" <?php echo ( statut_diffucult_get_meta( 'statut_diffucult_difficile' ) === 'difficile' ) ? 'checked' : ''; ?>>\n\t\t<label for="statut_diffucult_difficile"><?php _e( 'Difficile', 'crio-child' ); ?><\/label>\t\n\t<\/p>\t\n\t<p>\n\t    <input type="checkbox" name="statut_diffucult_expert" id="statut_diffucult_expert" value="expert" <?php echo ( statut_diffucult_get_meta( 'statut_diffucult_expert' ) === 'expert' ) ? 'checked' : ''; ?>>\n\t\t<label for="statut_diffucult_expert"><?php _e( 'Expert', 'crio-child' ); ?><\/label>\t\n\t<\/p>\n<?php\n}\n\nfunction statut_diffucult_save( $post_id ) {\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;\n\tif ( ! isset( $_POST['statut_diffucult_nonce'] ) || ! wp_verify_nonce( $_POST['statut_diffucult_nonce'], '_statut_diffucult_nonce' ) ) return;\n\tif ( ! current_user_can( 'edit_post', $post_id ) ) return;\n\n\tif ( isset( $_POST['statut_diffucult_facile'] ) )\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_facile', esc_attr( $_POST['statut_diffucult_facile'] ) );\n\telse\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_facile', null );\n\t\n\t\n\tif ( isset( $_POST['statut_diffucult_intermdiaire'] ) )\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_intermdiaire', esc_attr( $_POST['statut_diffucult_intermdiaire'] ) );\n\telse\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_intermdiaire', null );\n\t\n\t\n\tif ( isset( $_POST['statut_diffucult_difficile'] ) )\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_difficile', esc_attr( $_POST['statut_diffucult_difficile'] ) );\n\telse\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_difficile', null );\n\t\n\tif ( isset( $_POST['statut_diffucult_expert'] ) )\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_expert', esc_attr( $_POST['statut_diffucult_expert'] ) );\n\telse\n\t\tupdate_post_meta( $post_id, 'statut_diffucult_expert', null );\n\t\n\t\n}\nadd_action( 'save_post', 'statut_diffucult_save' );<\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
Learn more about the get_post_meta function<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"This tutorial will help you learn how to create a metabox allowing users to collect data from a Post or custom Post Type. In the example below, we will use
Read More<\/a><\/div>","protected":false},"author":81,"featured_media":4564,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[283],"tags":[318],"class_list":["post-6245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-functions"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/comments?post=6245"}],"version-history":[{"count":0,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6245\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media\/4564"}],"wp:attachment":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media?parent=6245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/categories?post=6245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/tags?post=6245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}