How to add meta box for current post format gutenberg supported

How to add meta box for current post format gutenberg supported

How to Display Metaboxes According to the Current Post Format

Today I’d like to show you how to go further with custom metaboxes and specifically how to use them according to post formats.

First to be sure that your theme is “post formats”supported, check that it accepts different formats by looking for this function:

add_theme_support( 'post-formats', array( 'audio', 'video' ) );

1. Adding Custom Metaboxes in your function.php file

// add custom metabox field
 function skb_custom_metabox(){
     add_meta_box( 'skb_audio_post_format', __('Post Option', 'skb'), 'skb_audio_post_format_cb', 'post' );
 }
 add_action( 'add_meta_boxes', 'skb_custom_metabox' );

2. Add Callback function for render HTML code

// Metabox call back function
 function skb_audio_post_format_cb( $post ) {

// Add an nonce field so we can check for it later.
wp_nonce_field( 'skb_metabox_nonce', 'skb_metabox_nonce_check' );

// Use get_post_meta to retrieve an existing value from the database.
$audio_link = get_post_meta( get_the_ID(), 'skb_post_format_audio_link', true );
$video_link = get_post_meta( get_the_ID(), 'skb_post_format_video_link', true );


// Display the form, using the current value.
?>
<div id="skb_post_audio_wrapper" class="skb_post_format_wrapper">
    <input type="text" id="skb_post_audio" name="skb_post_audio" value="<?php echo esc_attr( $audio_link ); ?>" size="25" />
</div>
<div id="skb_post_video_wrapper" class="skb_post_format_wrapper">
    <input type="text" id="skb_post_video" name="skb_post_video" value="<?php echo esc_attr( $video_link ); ?>" size="25" />
</div>
<?php 
}

3. Save the meta when the post is saved

/**
 * Save the meta when the post is saved.
 *
 * @param int $post_id The ID of the post being saved.
 */
function skb_save_metabox( $post_id ) {

    /*
     * We need to verify this came from the our screen and with proper authorization,
     * because save_post can be triggered at other times.
     */

    // Check if our nonce is set.
    if ( ! isset( $_POST['skb_metabox_nonce_check'] ) ) {
        return $post_id;
    }

    $nonce = $_POST['skb_metabox_nonce_check'];

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $nonce, 'skb_metabox_nonce' ) ) {
        return $post_id;
    }

    /*
     * If this is an autosave, our form has not been submitted,
     * so we don't want to do anything.
     */
    if ( defined( 'DOING_AUTOSAVE' ) &amp;&amp; DOING_AUTOSAVE ) {
        return $post_id;
    }

    // Check the user's permissions.
        if ( 'page' == $_POST['post_type'] ) {
            if ( ! current_user_can( 'edit_page', $post_id ) ) {
                return $post_id;
            }
        } else {
            if ( ! current_user_can( 'edit_post', $post_id ) ) {
                return $post_id;
            }
        }

    /* OK, it's safe for us to save the data now. */

    // Sanitize the user input.
    $aduio_data = sanitize_text_field( $_POST['skb_post_audio'] );
    $video_data = sanitize_text_field( $_POST['skb_post_video'] );

    // Update the meta field.
    update_post_meta( $post_id, 'skb_post_format_audio_link', $aduio_data );
    update_post_meta( $post_id, 'skb_post_format_video_link', $video_data );
}
add_action( 'save_post', 'skb_save_metabox' );

4. Create a jquery file in your directory and do enqueue it in admin

// load admin script
function skb_admin_script(){
    wp_enqueue_script( 'skb-admin-script', get_theme_file_uri( '/inc/admin/js/skb-admin-js.js' ), array('jquery'), null, true );
}
add_action( 'admin_enqueue_scripts', 'skb_admin_script' );

5. Paste this code in your js file

(function ($) {
    "use strict";
   wp.data.subscribe(() => {
       var postFormat = wp.data.select('core/editor').getEditedPostAttribute('format');
       $('#skb_post_audio_wrapper, #skb_post_video_wrapper').hide();

       if( postFormat == 'audio' ) {
         $('#skb_post_audio_wrapper').fadeIn();
       };
       if( postFormat == 'video' ) {
         $('#skb_post_video_wrapper').fadeIn();
       };
   });
})(jQuery);

If you like this tutorial you can share on your social profile. Thank you.

Published by skyboot

Skybootstrap is a web Design and Development service provider. Our Service: WordPress Theme Development | PSD to WordPress | Dropshipping Store Create | Shopify Store Create | Wp Error Fix | Contact Form | Landing Page Create | Bootstrap Landing Page .

Leave a Reply

Your email address will not be published. Required fields are marked *