Adding Custom Post Types to Gutenberg Editor
Posted on 18th June 2023
The Gutenberg editor is a great way to manage your content in WordPress. But what if you want to add custom post types to the editor?
What are Custom Post Types?
Custom post types are a way to extend the functionality of WordPress. They allow you to add new content types to the site, such as products, events, or news items.
Why Add Custom Post Types to Gutenberg?
Adding custom post types to Gutenberg allows you to manage all your content in one place. This can be helpful if you have a lot of content on your site, or if you want to keep your content organized in a specific way.
How to Add Custom Post Types to Gutenberg
There are two ways to add custom post types to Gutenberg:
- Using a plugin
- Adding the code yourself
Using a Plugin
There are a few plugins that allow you to add custom post types to Gutenberg. We recommend the following plugins:
Adding the Code Yourself
If you’re comfortable adding code to your WordPress site, you can add custom post types to Gutenberg yourself.
First, you’ll need to create a new file in your WordPress theme. You can name this file anything you want, but we recommend using the name of the custom post type.
For example, if you’re creating a custom post type for products, you might name the file product.php.
In this file, you’ll need to add the following code:
‘Products’,
‘singular_name’ => ‘Product’,
‘menu_name’ => ‘Products’,
‘name_admin_bar’ => ‘Product’,
‘add_new’ => ‘Add New’,
‘add_new_item’ => ‘Add New Product’,
‘new_item’ => ‘New Product’,
‘edit_item’ => ‘Edit Product’,
‘view_item’ => ‘View Product’,
‘all_items’ => ‘All Products’,
‘search_items’ => ‘Search Products’,
‘parent_item_colon’ => ‘Parent Products:’,
‘not_found’ => ‘No products found.’,
‘not_found_in_trash’ => ‘No products found in Trash.’,
);
$args = array(
‘labels’ => $labels,
‘description’ => ‘Description.’,
‘public’ => true,
‘publicly_queryable’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘query_var’ => true,
‘rewrite’ => array( ‘slug’ => ‘product’ ),
‘capability_type’ => ‘post’,
‘has_archive’ => true,
‘hierarchical’ => false,
‘menu_position’ => null,
‘supports’ => array( ‘title’, ‘editor’, ‘author’, ‘thumbnail’, ‘excerpt’, ‘comments’ ),
);
register_post_type( ‘product’, $args );
}
add_action( ‘init’, ‘product_init’ );
?>
You can change the labels and arguments to match your custom post type.
Once you’ve added the code, you’ll need to activate your custom post type. You can do this by going to the Custom Post Types menu in the WordPress admin.
Your custom post type will now be available in the Gutenberg editor.
Conclusion
Adding custom post types to Gutenberg is a great way to extend the functionality of the editor. It can be helpful if you have a lot of content on your site, or if you want to keep your content organized in a specific way.
Adding Custom Post Types to the Gutenberg Editor
If you’re a WordPress developer, you’re probably aware of the new Gutenberg editor. Gutenberg is a block-based editor that completely changes the way content is created and edited in WordPress. One of the most significant changes in Gutenberg is the way custom post types are handled.
In the past, custom post types were added to the WordPress editor using a separate plugin or custom code. With Gutenberg, custom post types can be added directly to the editor using a block. In this tutorial, we’ll show you how to add a custom post type to the Gutenberg editor.
Adding a Custom Post Type
Adding a custom post type to Gutenberg is extremely easy. First, you need to create a new block. To do this, click on the “+” icon in the top-left corner of the editor.
This will open the block inserter. In the inserter, you need to search for the “Custom Post Type” block.
Once you find the block, click on it to insert it into the editor.
Now that the block has been added, you need to configure it. First, you need to select the post type you want to use from the “Post Type” dropdown.
In this example, we’re going to use the “Products” post type. Next, you need to select the taxonomy you want to use from the “Taxonomy” dropdown.
In this example, we’re going to use the “Categories” taxonomy. Finally, you need to select the number of posts you want to display from the “Posts Per Page” dropdown.
In this example, we’re going to display 10 posts. Once you’re finished configuring the block, click on the “Publish” button to publish your changes.
Your custom post type will now be displayed in the Gutenberg editor.
Conclusion
In this tutorial, we’ve shown you how to add a custom post type to the Gutenberg editor. This is a great way to make your custom post types more accessible to your users.
In the previous article, we looked at how to add custom post types to the Gutenberg editor. In this article, we’ll look at how to add taxonomies to Gutenberg.
Taxonomies are a way of grouping content together. For example, you might have a taxonomy for “countries” and another for “cities”. This would allow you to easily group your content by country and city.
To add a taxonomy to Gutenberg, you first need to register it. This is done by adding aTaxonomies” property to your custom post type. The property should be an array of taxonomy objects.
Each taxonomy object should have a “name” and a “label” property. The “name” property is the internal name of the taxonomy, while the “label” property is the label that will be displayed in the Gutenberg interface.
You can also optionally specify a “hierarchical” property. This property indicates whether the taxonomy is hierarchical (like categories) or not (like tags). The default value is false.
Once you’ve registered your taxonomies, you need to add them to your Gutenberg blocks. This is done by adding a “taxonomies” property to your block. The property should be an array of taxonomy names.
For each taxonomy, you need to specify a “label” and a “placeholder” property. The “label” property is the label that will be displayed in the Gutenberg interface, while the “placeholder” property is the placeholder text that will be displayed in the block when no taxonomy term is selected.
You can also optionally specify an “allowNull” property. This property indicates whether the block should allow the selection of no taxonomy term. The default value is false.
Once you’ve added the “taxonomies” property to your block, the taxonomies will be available in the “settings” panel of the block.
