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.

Future-Proof Your WordPress Site with Autonomous

With Cloudways Autonomous, your WordPress sites will be ready for unexpected traffic spikes. Stay ahead of the curve with advanced scalability and cutting-edge technology.

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

Think Your Hosting Provider Is Charging Extra?

Use the Web Hosting Pricing Calculator to find out what leading hosting providers charge.

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

Owais Khan

Owais works as a Marketing Manager at Cloudways (managed hosting platform) where he focuses on growth, demand generation, and strategic partnerships. With more than a decade of experience in digital marketing and B2B, Owais prefers to build systems that help teams achieve their full potential.

×

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!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now