How to Enable Gutenberg Editor for Custom Post Type

How to Enable Gutenberg Editor for Custom Post Type in 2 Easy Ways

Last updated on

by


Are you looking for a way to enable Gutenberg editor for custom post type?

With WordPress 5.0, the Gutenberg editor became the default for posts and pages, but custom post types (CPT) still use the classic editor by default. 

But don’t worry! In this Gutenberg editor WordPress tutorial, we will walk you through the step-by-step process to enable Gutenberg for custom post type.

We’ll explore two methods:

  1. Manual setup using `register_post_type()` 
  2. Utilizing the Custom Post Type UI plugin.

Ready? Let’s get started!

What Is WordPress Custom Post Type?

WordPress Custom Post Types are a powerful feature that allows you to customize your CMS by introducing additional content types beyond the default options like Posts and Pages. 

These custom post types enable you to expand from standard limitations and create your own unique content types within WordPress. 

Before you begin creating custom post types, it’s essential to assess whether your website truly requires extra post types beyond the defaults provided by WordPress. 

While the default post types are adequate for most websites, users who desire more customization have the flexibility to incorporate custom post types seamlessly.

2 Easy Ways to Enable Gutenberg Editor for Custom Post Type

Now that you better understand what a custom post type is in WordPress, let’s see how you can enable Gutenberg editor for custom post type.

Option #1: Enable Gutenberg Editor for Custom Post Type Using Code

First, to enable Gutenberg editor for custom post type, you need to add code to the functions.php file of your WordPress theme.

Now, follow the steps below to find the functions.php file and register Gutenberg for WordPress custom post type.

  1. Use an FTP client to access the backend files of your WordPress site.
  2. Navigate to public_html >> wp-content >> themes to find all installed themes.
  3. Open the activated theme folder and locate the functions.php file.
Access functions.php file to enable Gutenberg editor for custom post type
  1. Now, add the following code snippet at the bottom of the functions.php file using any text editor.
function cw_post_type() {

    register_post_type( 'portfolio',

        // WordPress CPT Options Start

        array(

            'labels' => array(

                'name' => __( 'Portfolio' ),

                'singular_name' => __( 'Portfolio' )

            ),

            'has_archive' => true,

            'public' => true,

            'rewrite' => array('slug' => 'portfolio'),

            'supports' => array('title', 'editor', 'excerpt', 'comments')

        )

    );

}

add_action( 'init', 'cw_post_type' );

Here’s a screenshot of where you need to add the above code.

Enable Gutenberg editor for custom post type using code
  1. Make sure to save the changes and re-upload the functions.php file to your website.
  2. Now, when you visit your WordPress site, you’ll notice the newly added Portfolio custom post type in the left-side menu bar.
Enable Gutenberg editor for custom post type

Upon creating or editing this portfolio custom post type, the WordPress Gutenberg editor will appear as a default on your WordPress website. 

PLEASE NOTE: However, the Classic Editor might still appear if your WordPress version is older.

Enable Gutenberg editor for custom post type

Option #2: Using the Custom Post Type UI Plugin

If you’ve installed the Custom Post Type UI plugin to create custom post types (CPTs) on your website, you don’t need to touch any code to enable Gutenberg. 

The plugin offers a user-friendly interface for managing all aspects of your custom post types. Typically, when you create any custom post type using the Custom Post Type UI plugin, you don’t need to do anything to add the Gutenberg for the custom post type separately.

However, if you find that your CPT still defaults to the classic editor, follow these steps: 

  1. Login to your WordPress dashboard as an admin.
  2. Navigate to the Registered Types/Taxonomies page within CPT UI.
Enable Gutenberg editor for custom post type using the Custom Post Type UI Plugin
  1. Select the specific CPT (custom post type) for which you want to enable Gutenberg.
  2. Scroll down to the Settings section and make sure that ‘Show in REST API’ is true.
Enable Gutenberg editor for custom post type using the Custom Post Type UI Plugin
  1. Continue to scroll down to the Supports section and make sure that ‘Editor’ is checked.
Enable Gutenberg editor for custom post type using the Custom Post Type UI Plugin

Once you’ve completed these steps, you should be able to edit your custom post type in the Gutenberg editor. 

Repeat the same process for any other custom post types as needed.

NOTE: For any reason, if you don’t want to use the Gutenberg editor, check out our detailed guide on how to disable Gutenberg editor in WordPress.

To Sum It Up

To enable Gutenberg editor for custom post type in WordPress, you have two options:

  1. Add code to the functions.php file of your WordPress theme.
  2. Using the Custom Post Type UI plugin.

By following the steps outlined in this Gutenberg editor WordPress tutorial, you can easily enable Gutenberg editor for custom post type. 

Additionally, don’t forget to deactivate the Classic Editor plugin if it’s active on your site, as it could conflict with Gutenberg’s functionality. 

If you encounter any difficulties during the process, don’t hesitate to leave a comment detailing your issue. We would love to help you troubleshoot any issue regarding enabling the Gutenberg editor for custom post types.

Frequently Asked Questions

How do I enable Gutenberg custom post type?

To enable Gutenberg for custom post type, you can either add code to your theme’s functions.php file or use plugins like Custom Post Type UI. Follow the steps outlined in the article to enable Gutenberg for your custom post types.