[rank_math_breadcrumb]

Enable Gutenberg Editor in Custom Post Type

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

In this tutorial i will teach you how to Enable Gutenberg Editor in Custom Post Type.

Please open your child theme and find your register custom post type code, below is a sample Custom Post Type CODE.

function review_post_type() {
  $labels = array(
    'name'                => __( 'Reviews', 'Post Type General Name', 'text_domain' ),
    'singular_name'       => __( 'Review', 'Post Type Singular Name', 'text_domain' ),
    'menu_name'           => __( 'Reviews', 'text_domain' ),
    'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
    'all_items'           => __( 'All Reviews', 'text_domain' ),
    'view_item'           => __( 'View Review', 'text_domain' ),
    'add_new_item'        => __( 'Add New Review', 'text_domain' ),
    'add_new'             => __( 'Add New', 'text_domain' ),
    'edit_item'           => __( 'Edit Review', 'text_domain' ),
    'update_item'         => __( 'Update Review', 'text_domain' ),
    'search_items'        => __( 'Search Review', 'text_domain' ),
    'not_found'           => __( 'Not found', 'text_domain' ),
    'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
  );
  $args = array(
    'label'               => __( 'Reviews', 'text_domain' ),
    'description'         => __( 'This is a custom post type for reviews.', 'text_domain' ),
    'labels'              => $labels,
    'supports'            => array( 'title', 'editor', 'thumbnail' ),
    'hierarchical'        => true,
    'public'              => true,
    'show_ui'             => true,
    'show_in_menu'        => true,
    'show_in_nav_menus'   => true,
    'show_in_admin_bar'   => true,
    'menu_position'       => 6,
    'menu_icon'           => 'dashicons-star-half',
    'can_export'          => true,
    'has_archive'         => false,
    'exclude_from_search' => false,
    'publicly_queryable'  => true,
    'capability_type'     => 'page',
  );
  register_post_type( 'review', $args );
}
add_action( 'init', 'review_post_type', 0 );

Only you need to enable Gutenberg Editor is add this code below

'show_in_rest' => true,

Here’s the result of edited code that support Gutenberg in your custom post type. Code Below

function review_post_type() {
  $labels = array(
    'name'                => __( 'Reviews', 'Post Type General Name', 'text_domain' ),
    'singular_name'       => __( 'Review', 'Post Type Singular Name', 'text_domain' ),
    'menu_name'           => __( 'Reviews', 'text_domain' ),
    'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
    'all_items'           => __( 'All Reviews', 'text_domain' ),
    'view_item'           => __( 'View Review', 'text_domain' ),
    'add_new_item'        => __( 'Add New Review', 'text_domain' ),
    'add_new'             => __( 'Add New', 'text_domain' ),
    'edit_item'           => __( 'Edit Review', 'text_domain' ),
    'update_item'         => __( 'Update Review', 'text_domain' ),
    'search_items'        => __( 'Search Review', 'text_domain' ),
    'not_found'           => __( 'Not found', 'text_domain' ),
    'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
  );
  $args = array(
    'label'               => __( 'Reviews', 'text_domain' ),
    'description'         => __( 'This is a custom post type for reviews.', 'text_domain' ),
    'labels'              => $labels,
    'supports'            => array( 'title', 'editor', 'thumbnail' ),
    'hierarchical'        => true,
    'public'              => true,
    'show_ui'             => true,
    'show_in_menu'        => true,
    'show_in_nav_menus'   => true,
    'show_in_rest'        => true,
    'show_in_admin_bar'   => true,
    'menu_position'       => 6,
    'menu_icon'           => 'dashicons-star-half',
    'can_export'          => true,
    'has_archive'         => false,
    'exclude_from_search' => false,
    'publicly_queryable'  => true,
    'capability_type'     => 'page',
  );
  register_post_type( 'review', $args );
}
add_action( 'init', 'review_post_type', 0 );

Adding Taxonomy in gutenberg sidebar

'show_in_rest' => true,

Sample taxonomy code of the register review CPT above

function jw_createcustom_tax() {
  register_taxonomy(
    'review_category',
    'review',
    array(
      'label' => __( 'Category' ),
      'rewrite' => array( 'slug' => 'review-cat' ),
      'hierarchical' => true,
      'show_ui' => true,
    )
  );
}
add_action( 'init', 'jw_createcustom_tax' );

Result code is

function jw_createcustom_tax() {
  register_taxonomy(
    'review_category',
    'review',
    array(
      'label' => __( 'Category' ),
      'rewrite' => array( 'slug' => 'review-cat' ),
      'hierarchical' => true,
      'show_ui' => true,
      'show_in_rest' => true,
    )
  );
}
add_action( 'init', 'jw_createcustom_tax' );

If you liked this article, then please subscribe to our YouTube Channel for more WordPress video tutorials.

Related Posts

Leave a Reply

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

You want to Learn WordPress?

Be automatically notified of all new posts. No spam. No annoying marketing emails.

How to

Install

WORDPRESS

(Step by Step)

How to

start a

WP BLOG

(Step by Step)

WordPress Help for Beginners

Please join our Facebook group to connect WordPress experts.