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

Updated on September 19, 2022

6 Min Read
Gutenberg custom post types

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

But before delving into the steps, let’s learn the basics of WordPress custom post types and how it helps you.

What Is Custom Post Type in WordPress?

Custom post types let you customize your WordPress CMS to create more content types to help you categorize your post types. By default, WordPress offers a few post types, including:

  • Posts
  • Media
  • Pages
  • Comments

But, with custom post types, you can cross these limitations and create your own post types to make the most of your WordPress CMS.

Before creating custom post types, you must analyze if you need to create extra post types or not. WordPress offers the basic post types by default, sufficient for most sites, but users seeking customizability can easily add more post types. And this blog covers the easy ways of adding them to your WordPress site.

The Latest Super Tool in WordPress: Gutenberg Editor

Gutenberg is only visible for the default pages and post types. Since WordPress custom post types are almost everywhere, the Gutenberg editor’s unavailability has been a topic of discussion in the community since WordPress 5.0.

If you have the latest WordPress version 6.0 installed on your server, you’ll see the latest Gutenberg version that gives you the full site editing feature. Gutenberg is the default block editor in WordPress and has replaced the classic WordPress editor.

Managed WordPress Hosting Starting From $10/Month

Say goodbye to all the hosting hassles, and save time & money with Cloudways automated processes.

Users who add custom post types on their WordPress sites using an old WordPress version (4.9 or below) will see the old Classic Editor when they create or edit a CPT.

I’ll demonstrate how to register or add Gutenberg custom post type on your WordPress website using a code snippet. Then I’ll show how you can enable Gutenberg on a site using an old WordPress version and how to add the post types in your enabled Gutenberg editor.

Register Gutenberg WordPress Custom Post Type

Let’s learn the easy steps to register Gutenberg for WordPress custom post type.

  • Access your site’s backend files via any FTP client.
  • Go to public_html > wp-content > themes.

You’ll see all the themes installed on your WordPress site in the theme folder.

  • Click the activated theme folder, and find the functions.php file.

FTP FileZilla

  • Open the function.php file on a text editor and add the following code at the bottom of the file.
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'),
           'excerpt', 'comments' )
       )
   );
}

add_action( 'init', 'cw_post_type' );
  • Here is the pictorial representation of where you have to add the code.

Function php file CPT code addition snippet 1

  • Save the changes on the function.php file and reupload it to your website.
  • Now go to your WordPress website and see the newly added Portfolio CPT on the left-side menu bar.

Portfolio Custom Post Type

When you try to create or edit a custom post type, you’ll see the default block editor (Gutenberg) on your WordPress website.

Note: If you are using an old WordPress version, you’ll see the Classic Editor.

Gutenberg Editor

Add Gutenberg Support and Enhance Functionalities to WordPress Custom Post Types

If you use the latest WordPress version, you’ll have Gutenberg pre-installed on your WordPress site.

But if you are using an old WordPress version, you must enable the Gutenberg editor on custom posts. Add the following code to the snippet mentioned in the previous section:

'show_in_rest' => true,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )

Function php file CPT code addition snippet 2

The above code snippet sets the ‘show_in_rest’ parameter to ‘True.’ After this step, the Gutenberg editor will be enabled when you create or edit a custom post type. And you’ll see the options like title, comments, and authors on the right-side menu.

Gutenberg Portfolio Custom Post Type

Web Hosting Savings Calculator

Save up to $7k+ annually by finding the ideal host based on your requirements & get a detailed comparison of top providers with one click.

The Complete Code for function.php File

Here is the complete code for the function.php file. You don’t need to add this code again in the function.php file. This is only the representation of the complete code:

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( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
       )
   );
}

add_action( 'init', 'cw_post_type' );

Function php file CPT code addition snippet 3

Note: Ensure to copy the code correctly and avoid putting any spaces, as it may break the code’s functionality, and you’ll start getting errors.

How to Display Custom Post Type by Using Code

You have learned about creating Custom Post Type, but how does it show on your site’s front end? It’s easy. You just have to add a PHP file with some lines of code in your WordPress theme directory.

You may think, why do I need to display a custom post type? Normally, you create a new post that starts showing on your site’s front end. However, with custom post types, you must also display your CPT content on your site’s front end so visitors/readers can easily access your content.

Create the template file in your activated theme having the name template-portfolio.php and insert the following code to display custom post types:

Template Portfolio ss 1

<?php /* Template Name: Portfolio */ $args = array( 'post_type' => 'portfolio',
   'post_status' => 'publish',
   'tax_query'   => array(
       array(
           'taxonomy' => 'testimonial_service',
           'field'    => 'slug',

       )
   )
);

$portfolio = new WP_Query( $args );
if( $portfolio->have_posts() ) :



       while( $portfolio->have_posts() ) :
           $portfolio->the_post();

            printf( '%1$s - %2$s', get_the_title(), get_the_content() );

       endwhile;
       wp_reset_postdata();



else :
   esc_html_e( 'No Post Found');
endif;

Template Portfolio code

Once you have added the display code, select the Default Template as ‘Portfolio’ to display the custom post type content. Follow the steps below:

  • Go to the WordPress Dashboard.
  • Click Pages > Add New.
  • Add the Title of your page.
  • From the right sidebar, select the Default Template as ‘Portfolio’ under the Template section.

Visit your site, and you’ll see the custom post type displayed with the name ‘Portfolio.’ You can now access your CPT content from your site’s front end.

Portfolio frontend display 1

Portfolio frontend display 2

Summary

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

If you find any blockages with this process, leave a comment, and I will get back to you ASAP.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

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 [email protected]

×

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

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Cyber Week

SAVINGS
Time Left In Offer
  • 0

    Days

  • 0

    Hours

  • 0

    Minutes

  • 0

    Seconds

40% OFF

On All Plans

GET THE DEAL NOW