WordPress custom meta-box is very helpful if you want to show custom field’s value on frontend. In this case you need to create a function that will create meta field at admin panel, then save its value to database and at last show those info at frontend.
An explanation for the metabox will be helpful so I’ll show you a metabox with a simple checkbox field. The custom field will be added in the admin panel and then we can show that’s field value on any page.
add_action( 'add_meta_boxes', 'add_custom_box' );
function add_custom_box( $post ) {
add_meta_box(
'Meta Box', // ID, should be a string.
'Name Checkbox', // Meta Box Title.
'services_meta_box', // Your call back function, this is where your form field will go.
'post', // The post type you want this to show up on, can be post, page, or custom post type.
'side', // The placement of your meta box, can be normal or side.
'core' // The priority in which this will be displayed.
);
}
// code for display the checkbox fields at admin panel
function services_meta_box($post) {
wp_nonce_field( 'my_awesome_nonce', 'awesome_nonce' );
$checkboxMeta = get_post_meta( $post->ID );
?>
<!-- Below are the checkbox fields -->
<input type="checkbox" name="iamjohn" id="iamjohn" value="yes" <?php if ( isset ( $checkboxMeta['iamjohn'] ) ) checked( $checkboxMeta['iamjohn'][0], 'yes' ); ?> />I am John<br />
<input type="checkbox" name="iamdoe" id="iamdoe" value="yes" <?php if ( isset ( $checkboxMeta['iamdoe'] ) ) checked( $checkboxMeta['iamdoe'][0], 'yes' ); ?> />I am Doe<br />
<?php }
// code to save the metabox
add_action( 'save_post', 'save_services_checkboxes' );
function save_services_checkboxes( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( ( isset ( $_POST['my_awesome_nonce'] ) ) && ( ! wp_verify_nonce( $_POST['my_awesome_nonce'], plugin_basename( __FILE__ ) ) ) )
return;
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;
}
}
if( isset( $_POST[ 'iamjohn' ] ) ) {
update_post_meta( $post_id, 'iamjohn', 'yes' );
} else {
update_post_meta( $post_id, 'iamjohn', 'no' );
}
//saves new-airdrop's value
if( isset( $_POST[ 'iamdoe' ] ) ) {
update_post_meta( $post_id, 'iamdoe', 'yes' );
} else {
update_post_meta( $post_id, 'iamdoe', 'no' );
}
}
I have explained above what for what. So, you will easily understand the code if you go through it. Copy and paste the above code in functions.php file of your theme. You will see 2 check-boxes area at Post page.
Look at the bottom of the above image. We have just created the metabox “Name Checkbox” at admin panel which has 2 checkbox field. Now we can show information if any checkbox is selected.
How to show the metabox value at front-end?
We can show the the value at front-end by creating a conditional logic that if the checkbox is selected the show it otherwise show nothing.
<?php if(get_post_meta($post->ID, 'iamjohn', true) == 'yes') { ?>
<!-- Show here anything if selected-->
<?php } ?>
Isn’t it easy? You can add any type of custom field at admin panel with the help of metabox hook. Comment below if you have any problem working with custom mextabox. If you create a premium theme you may add custom fields to your theme for some awesome extra features.