WordPress Gutenberg Custom Fields Tutorial: Plugin and Manual Methods Fully Explained

Custom Fieldsis a powerful feature for adding additional metadata to posts and pages in WordPress. This approach allows you toExpanding the content structure of the website(math.) genusProvide more information, such as author profiles, product ratings, reviews, or other domain-specific content. In this article, we will explain in detail how to create a WordPress Gutenberg Adding and displaying custom fields in your website, covering both plugin methods and manual methods with detailed steps and tips.

What are custom fields in WordPress?

Custom fields, also known as metadata, can add specific additional information to each WordPress post or page. These fields not only store additional data in the back-end administration, but can also be displayed to visitors via front-end pages.

The advantage of custom fields is that unique information can be added to the content for different needs without changing the page template or structure. This is very helpful for specific industries and uses such as e-commerce, real estate, blogging, etc.

Creating Custom Fields with Plugins

For most WordPress users, using a plugin is the easiest way to implement custom field functionality. Take Advanced Custom Fields (ACF) plugin as an example, it is one of the most popular custom field plugins.

Step 1: Install and activate the ACF plug-in

1. Log in to the WordPress dashboard.
2. switch to Plugins > Add New PluginThe
3. Type in the search box Advanced Custom FieldsWhen you find the plugin, click on the mounting furthermore activateThe

Step 2: Create Custom Field Groups

1. After activating the plugin, in the menu of the WordPress dashboard see Custom Fields Options. Click on it to enter the ACF plugin settings.

2. In the ACF screen, click Add New to create a new field group.

3. On the Field Groups page, enter a name and description for the group. Create as many fields as needed. Common field types arecopies,numeric,dates,checkboxetc., the appropriate field type can be selected via the drop-down menu.

4. Specify the label, name, and default value for each field. The label is the name that the front-end displays to the user, and the name is the internal identifier of the field.

5. To add multiple fields: click + Add field button to add more custom fields to the field group.

Step 3: Setting Field Group Position Rules

exist Positioning rules tab, you can set rules for where field groups are displayed. You can control the display of custom field groups only on specific pages or posts.

For example, set the rule Pages - Equals - Shopping Cartto ensure that fields are only used in thecartThe template appears in the page of the template. Additional conditions can also be selected, such as displaying groups of fields based on categories, page types, or custom templates.

Step 4: Save the Field Group

After completing the settings, click Save Changes button, the custom field group will be saved and activated.

Now that a custom field group has been successfully created, the next step can be to move these fields to theApply to your page or postThe

How to Use Custom Fields in a Gutenberg Website

With the custom fields created, the next task is to add them to the content in the Gutenberg editor. In Gutenberg, the value of a custom field can be displayed on a page through the Dynamic Content feature.

Install and enable the GutenKit plugin

1. The GutenKit plugin is an extension for the Gutenberg editor that provides additional functionality, including integration of custom fields.
2. Install and enable the GutenKit (Pro) plug-in to use more dynamic content features in the Gutenberg editor.

Adding Custom Fields with GutenKit

1. Create or edit aPage or postIn the Gutenberg editor, add a GutenKit Title Block.

2. In the block's settings panel, click dynamic content icon (usually located in the toolbar).

3. option Advanced Custom Fields (ACF) option, the system will display all available field groups and fields.

4. Select the fields you want to display from the drop-down list by clicking the application formatThe

Successfully added custom fields to a Gutenberg page. In this way, custom fields can be created that are dynamically associated with page content, displaying specific metadata.

View Results

After saving your page, you can preview your page to see if the custom fields are displayed correctly.

Manually configure custom fields (without plugin)

If you wish to add custom fields to a Gutenberg page manually without using the plugin, you need to edit the theme files. This method is suitable for developers, but is not recommended for beginners, as mishandling may lead to errors on the site.

Enable WordPress Default Custom Fields

1. When editing a page or post, click the upper right corner of the three-point menu(more options).

2. option preferencesand enable it in the pop-up window Custom Fields Options.

3. After saving the settings, you see the Custom Fields panel at the bottom of the edit page.

Adding Custom Fields

1. In the Custom Fields panel, click Adding Custom Fields, enter the field name and value.
2. If you need more than one field, you can continue to click Adding Custom Fields button to add more fields.

Display custom fields (manual)

1. Open your theme folder, find and edit functions.php Documentation.
2. utilization get_post_meta() function gets the value of the custom field from the database.
3. In the template file, use the echo Outputs the value of a custom field.

Example:

<?php 
$value = get_post_meta(get_the_ID(), 'your_custom_field', true);
echo $value.
?>

This code will fetch and display the current post or page's your_custom_field The value of the field.

Frequently Asked Questions

How to add custom meta fields in WordPress without using a plugin?

It is possible to use add_meta_box() respond in singing update_post_meta() function in the functions.php The custom fields are added manually in the file. The manual method is suitable for developers with coding experience, but for most users theEasier plug-in approachThe

How to add custom user meta fields in WordPress?

Similar to post or page fields, custom user fields can be created through a plugin (such as ACF) with thePositioning rulesAssign them to specific user roles.

How do I add multiple values to a custom field?

When using the ACF plugin, you can add multiple values to a field group using the "and" condition and display them on the front end.

How do I display a sidebar using a custom field?

You can choose to display fields in the sidebar in the ACF plugin's Fields group, andAdjustment of display position by position rules(ACF Pro).