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. This is a tutorial on how to use metabox wordpress plugin. It will help you create a metabox in wordpress with ease and without any technical knowledge. This metabox on wordpress which can be used to add some custom fields to your posts and pages.

Today I’d like to show you how to go further with custom metaboxes and specifically how to use them according to post formats. This Metabox support in gutenberg you can use it for your own websites or for other sites.

This is a metabox wordpress tutorial that will show you how to use metabox wordpress in your website. First to be sure that your theme is “post formats”supported, check that it accepts different formats by looking for this function.

The custom post type metabox is a great way to add content, images, videos and more. If you have a custom post type with metaboxes, you can use them to add content as well as images and videos. In order to add content in the metabox, you must specify a name for it. The name is just like the name of any other custom post type except that it has a suffix after it – “metabox”.

Follow these step to add metabox in WordPress website:

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' ) && 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.

Part 1: WordPress Metabox Tutorial for beginners from scratch | About Metabox, Custom Meta Box

WordPress Metabox Tutorial for beginners from scratch (Part#1) | About Metabox, Custom Meta Box

Part 2: WordPress Metabox Tutorial for beginners from scratch | add_meta_box() parameters and use

WordPress Metabox Tutorial for beginners from scratch (Part#2) | add_meta_box() parameters and use
Spread the love

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 .