How to Add Post Metadata in Gutenberg: A Comprehensive Guide

In WordPress, postsmetadata(Post Meta) is the term attached to a post, page, or product'sAdditional information, e.g., author's name, posting date, category tags,SEO Data, products SKU etc. This information not only improves the user experience, but alsoImprove the search engine visibility of your content, adding more value to the site.

By combining Essential Blocks plug-in (software component)Post Meta block,built-in functionality,Plugin CustomizationA variety of methods, such as the Gutenberg Editorin adding post metadata. This article will integrate these methods to help you build more efficient and feature-rich websites.

What is post metadata?

Post metadata is additional information related to WordPress content that describes or supports the content. Example:

• Blog site: Metadata typically includes the author's name, date of publication, classification, and tags.
• E-commerce website: Metadata displays product SKUs, prices, inventory status, and more.

Method 1: Use Essential Blocks' Post Meta Block

Essential Blocks The plugin simplifies the addition and management of metadata through Post Meta blocks, providing a friendly, visual way to manipulate metadata.

Step 1: Activate the Post Meta block

1. In the WordPress backend navigate to Essential Blocks > BlocksThe

2. exist Creative Blocks Partially found Post Meta block to enable the feature.

3. Open any Gutenberg editorPage or TemplateThe Post Meta block will appear in the Block Add option.

Step 2: Adding Metadata to a Page or Template

1. To open the metadata that needs to be added to theweb page,cardmaybe WooCommerce Product TemplatesThe
2. Click the "+" button, search Post Meta, and added to the page.

3. Customize the displayed metadata fields (e.g. author, release date, SKU, etc.) and adjust their display position.

Step 3: Configure and Style the Post Meta Block

1. General Settings: Controls the display of fields (e.g., whether author, date, etc. are enabled) and reorders field labels.
2. Style Settings: Set font style, color, spacing, etc. to optimize the visual effect.

3. Advanced Settings: Adjust margins, fills, and background styles to ensure that metadata areas are consistent with the overall design.

Add and manage metadata quickly and without writing code with Essential Blocks' Post Meta blocks.

Method 2: Add metadata using built-in functions

WordPress itself provides a number of metadata fields such asCategories, tags and author informationThese can be managed directly through the Gutenberg interface.

Steps:

1. Open in the Gutenberg editorArticle or PageThe
2. On the right side of the Document Settings Panel Found in:
   • Categories and labels: Add article categories or tags.
   • Release time: Set or edit the posting time of an article.
   • Author Information: Select the article author from the drop-down menu.

Pros:

• Easily add basic metadata without additional plugins.
• WordPress automatically saves and displays the information on the front end.

Method 3: Customizing metadata using plugins

If more flexible metadata management is required, plugins can be used, such as the Advanced Custom Fields (ACF) maybe Meta BoxThe

Steps for using the ACF plug-in:

1. Installation of plug-ins
   Search and install in the WordPress backend Advanced Custom Fields Plug-ins.

2. Creating custom field groups
   • switch to ACF > Custom FieldsThe
   • strike (on the keyboard) Add new field groupInput the group name (e.g. "Article Extra Information").
   • Add custom fields, such as "Article Ratings","recommended index"etc.

3. Specify field display location
   • Select "Display only under the following conditions" in "Display rules", and set it to "Equivalent articles".
   • Save the field group.

4. Edit post metadata
   In the Gutenberg editor, fill in the just createdfield informationThe

5. Displaying metadata on the front end
   Edit the theme file (e.g. single.php), use the following code to display the metadata:

<?php echo get_field('your_custom_field_name'); ?>

Steps to use the Meta Box plugin:

Meta Box Provides similar functionality, but is more developer-friendly, supporting complex metadata manipulation and advanced features.

Method 4: Use REST API to get metadata

If you need to integrate metadata with front-end applications or third-party tools, you can do so via the REST API Access to registered metadata.

Example:

Access the following URL:

https://yourwebsite.com/wp-json/wp/v2/posts/{post_id}

The JSON data will contain custom_meta_key value (provided that theRegistered metadata).

Summarizing: The Importance of Post Meta

Adding post metadata through Gutenberg can significantly improve content organization and SEO performance. Here are a few common application scenarios:

• Blog posts: displays key information such as author, date, and category.
• WooCommerce Store: Display dynamic data such as SKUs, prices and stock status.
• News sites: highlight the time of publication and source information.