Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Use Gutenberg with WordPress Custom Post Types

February 11, 2019

3 Min Read
Gutenberg WordPress CPT
Reading Time: 3 minutes

Over the years, the WordPress community has been using WordPress Custom Post Types (CPT) for extending the functionality of the default WordPress platform. Given the popularity, the feature is an integral part of WordPress 5.x.

The Latest “Super” Tool in WordPress: Gutenberg Editor

With the current version of WordPress ( 5.1 RC), Gutenberg is only visible for the default pages and post types. Since WordPress custom post types are almost everywhere, the unavailability of Gutenberg editor is something that the community has been talking about since the release of WordPress 5.0.

This means that if you have CPT on your WordPress 5.x website, you will see the dear old Classic Editor when you create or edit a CPT. While there are plans to take care of this peculiar state of affairs in the upcoming versions, you don’t have to wait for the WordPress core maintenance team to release that update.

IdeaBox – Case Study

Read how Cloudways Helped a WordPress Agency Build Better Products.

Thank You

Your Ebook is on its Way to Your Inbox.

In fact, if you wish to use Gutenberg editor with the current CPT on your website, all you have to do is read on!

I will begin by explaining how to register a Gutenberg WordPress custom post type. Next, I will show you how to enable Gutenberg for WordPress custom post types.

Register Gutenberg WordPress Custom Post Type

Start by registering a Gutenberg WordPress custom type. The process is fairly easy and involves adding the following the code snippet.

/*Register WordPress  Gutenberg CPT */
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'),
 
        )
    );
}
 
add_action( 'init', 'cw_post_type' );

Once the snippet in place, the custom post type has been registered. However, in a surprising twist, when you try to create or edit a custom post type, you will still see the old Classic editor.

Gutenberg WordPress CPT Editor

Add Gutenberg Support to WordPress Custom Post Types

Now, in order to make the Gutenberg editor visible on WordPress custom posts, you need to carry out an additional easy step of adding the following code snippet to the code snippet in the previous section:

add support for the editor.

add the show_in_rest key and set it to true via your custom post type.

'show_in_rest' => true,
   'supports' => array('editor')

As you can see, the above code snippet just set the ‘show_in_rest’ parameter to ‘TRUE’. After this step, when you create or edit a custom post type, you will see the Gutenberg editor visible and enabled.

WordPress CPT Gutenberg

The Complete Code

Here is the complete code which you put in functions.php, located in the theme folder:

/*Register WordPress  Gutenberg CPT */
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'),
            'show_in_rest' => true,
            'supports' => array('editor')
        )
    );
}
 
add_action( 'init', 'cw_post_type' );

Wrapping up!

Using Gutenberg editor with WordPress custom post types is a simple matter of setting the right parameters in the functions.php file. Once the right snippet is in place, you can easily access Gutenberg editor on your custom posts.

If you need help with this process, do leave a comment and I will get back to you ASAP.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!