Advanced Custom Fields – Component Field Addon Review
Introduction
Are you tired of creating the same set of fields over and over again in your WordPress project? Do you want to reuse fields across different field groups with ease? Look no further than the Advanced Custom Fields – Component Field Addon. This simple yet powerful plugin allows you to treat a field group as a component and reuse it in any other field group. With this plugin, you can create a set of fields once and use it everywhere, forever.
When to Use This
This plugin is perfect for situations where you need to create a custom list menu, a testimonial block, sliders, or even a button. If you find yourself repeating the same set of fields in your project, this plugin is the solution you’ve been looking for. With the Component Field Addon, you can create a component field group once and reuse it as many times as you want, without having to recreate the same fields over and over again.
Requirements
To use this plugin, you’ll need:
- WordPress 6+
- ACF PRO 6+
Example and Live Demo
You can see the example usages and live demo of the Component Field Addon by visiting https://acf-component-field.gummi.io/.
Changelog
The plugin has a long history of updates, with the latest version being 2.0.8 (2024/07/02). Some notable changes include:
- Added support for Wp GraphQL for ACF
- Fixed warnings related to PHP 8.3
- Added backward compatibility to continue support for ACF PRO version 5
- New feature: convert existing repeater field into a component field
- UX enhanced: set default component field settings on the component field group
- Performance enhanced: removed hacky JS code for component field
Test Log
The latest version of the plugin is tested up to:
- WordPress 6.4.3
- ACF Pro 6.2.7
With a score of 4.73, this plugin has been thoroughly tested and proven to be reliable and effective.
Conclusion
In conclusion, the Advanced Custom Fields – Component Field Addon is a must-have plugin for anyone who works with ACF PRO and needs to create reusable field groups. With its simplicity, flexibility, and power, this plugin is the perfect solution for streamlining your workflow and reducing repetition in your WordPress project.
User Reviews
Be the first to review “Advanced Custom Fields – Component Field Addon”
Introduction
Advanced Custom Fields (ACF) is a popular WordPress plugin that allows developers and site administrators to easily add custom fields to their website's content, allowing for greater flexibility and control over the data. One of the most powerful features of ACF is its add-on system, which provides additional functionality for handling and displaying custom field data.
One of the most popular add-ons for ACF is the Component Field Addon, which enables developers to create complex custom field layouts by combining multiple fields into a single field. This addon provides a powerful way to create reusable and customizable field groups that can be used to store and display complex data structures.
In this tutorial, we will explore how to use the ACF Component Field Addon to create complex custom field layouts, and demonstrate how to add and configure component fields on your WordPress website.
Tutorial: Using the Advanced Custom Fields - Component Field Addon
Step 1: Installing and Activating the Component Field Addon
To get started with the Component Field Addon, you need to install and activate it. Follow these steps:
- Go to the WordPress plugins directory (wp-content/plugins/)
- Upload the
advanced-custom-fields-component-field.zipfile to the directory - Activate the plugin by going to the WordPress plugins page (Settings > Plugins)
- Click on the "Activate" button to activate the plugin
Step 2: Creating a Component Field
Once the plugin is installed and activated, you can create a component field by following these steps:
- Go to the WordPress Customizer (Customizer > Customize)
- Click on the "Custom Fields" tab
- Click on the "Add New" button
- Select "Component Field" as the field type
- Give the field a name and label
- Click on the "Add Field" button
The component field is now created, but it is empty. To add fields to the component, follow the next step.
Step 3: Adding Fields to the Component Field
To add fields to the component field, follow these steps:
- Click on the "Fields" tab next to the "Add New" button
- Click on the "Add New" button again
- Select the field type you want to add (e.g. text, select, etc.)
- Configure the field settings as desired
- Click on the "Add Field" button
Repeat the above steps to add as many fields as you want to your component field. The component field will display a preview of the fields as you add them.
Step 4: Assigning the Component Field to a Field Group
Once you have created and configured the component field, you need to assign it to a field group. A field group is a group of custom fields that can be displayed on a post, page, or other custom post type.
To assign the component field to a field group, follow these steps:
- Go to the WordPress Customizer (Customizer > Customize)
- Click on the "Field Groups" tab
- Click on the "Add New" button
- Give the field group a name and description
- Click on the "Add Field Group" button
- Click on the "Add Field" button in the field group and select the component field you created earlier
- Configure the field settings as desired
- Click on the "Add Field" button
The component field is now assigned to a field group and can be displayed on a post or page.
Step 5: Displaying the Component Field
To display the component field on a post or page, you need to use the get_field() function to retrieve the field value.
For example, if you have a component field called "My Component Field" assigned to a field group, you can display the field value using the following code:
<?php
$field_values = get_field('my_component_field', $post_id);
if ($field_values) {
echo '<h2>'. $field_values['name']. '</h2>';
echo '<ul>';
foreach ($field_values['fields'] as $field) {
echo '<li>'. $field['label']. ': '. $field['value']. '</li>';
}
echo '</ul>';
}
?>This code retrieves the component field values using the get_field() function, and then displays the field values in a list format.
Conclusion
In this tutorial, we have explored how to use the Advanced Custom Fields - Component Field Addon to create complex custom field layouts and display them on your WordPress website. We covered installing and activating the plugin, creating and configuring component fields, assigning component fields to field groups, and displaying component fields on a post or page.
By using the Component Field Addon, you can create complex custom field layouts that are reusable and customizable, giving you greater flexibility and control over the data on your website.
Here is an example of configuring the Advanced Custom Fields - Component Field Addon:
Field Options
field_key: This is the key used to store the component field values. For example:my_component_field.label: This is the label displayed in the WordPress admin dashboard. For example:My Component Field.instructions: This is a message displayed below the component field input. For example:Enter your component field value.
'key' => 'my_component_field',
'label' => 'My Component Field',
'instructions' => 'Enter your component field value',Component Field Settings
component: This is the component type that will be used to render the field. For example:acf/components/input.settings: This is an array of settings passed to the component. For example:array('type' => 'text').
'component' => 'acf/components/input',
'settings' => array('type' => 'text'),Component Options
template: This is the template file used to render the component. For example:components/input/templates/input.fields: This is an array of field settings passed to the template. For example:array('size' => 20).
'template' => 'components/input/templates/input',
'fields' => array('size' => 20),Location
location: This is an array of rules defining where the field should be displayed. For example:array('post_type' => 'page', 'post_status' => 'publish').
'location' => array('post_type' => 'page', 'post_status' => 'publish'),Order
position: This is the position of the field in the acf_form object. For example:5.
'position' => 5,Here are the features mentioned in the content:
- Build once, use everywhere and forever: The plugin allows you to create a field group as a component and reuse it in any other field groups.
- Create reusable field sets: The plugin enables you to create a set of fields once and reuse it multiple times throughout your project.
- Reusable component field groups: The plugin allows you to treat a field group as a component and reuse it in any other field groups.
- Edit component field group once, applies to all: If you want to make changes to a component field group, you only need to edit it once, and it will apply to all the field groups that use the component.
- Support for Wp GraphQL for ACF: The plugin adds support for Wp GraphQL for ACF.
- PHP 8.3 warnings fix: The plugin fixes warnings related to PHP 8.3.
- PHP 8.2 warnings fix: The plugin fixes warnings related to PHP 8.2.
- Compatibility with ACF PRO version 6: The plugin is compatible with ACF PRO version 6.
- New layout and UI/UX for ACF PRO version 6: The plugin adds support for the new layout and UI/UX of ACF PRO version 6.
- Backward compatibility for ACF PRO version 5: The plugin maintains backward compatibility with ACF PRO version 5.
- Import compatibility with v1 export JSON file: The plugin adds import compatibility with v1 export JSON file.
- Admin tool to run migration manually: The plugin adds an admin tool to run migration manually.
- 2.0.1 migration to fix corrupted component fields: The plugin adds a migration to fix corrupted component fields when upgrading to component field v2 in incorrect order previously.
- Complete rewrite for better performance: The plugin has a complete rewrite for better performance.
- New hot features and small UX changes: The plugin adds new hot features and small UX changes.
- Minimize requirement for ACF pro is now 5.7+: The plugin requires ACF PRO version 5.7+ due to JavaScript changes.
- Core changes: V2 no longer uses custom post status: The plugin no longer uses custom post status in V2.
- Core changes: Field group property renamed: The plugin renames the field group property 'field_group_id' to 'field_group_key'.
- Convert repeater field to component field: The plugin adds the ability to convert an existing repeater field into a component field.
- Convert component field to repeater field: The plugin adds the ability to convert a component field to a repeater field.
- UX enhanced: Default component field settings: The plugin adds the ability to set default component field settings on the component field group.
- UX enhanced: Component usage count: The plugin adds a feature to show the component usage count in the list table.
- UX enhanced: Redirect after duplicating component field group: The plugin adds a feature to redirect to the component tab after duplicating a component field group.
- Performance enhanced: New JS in ACF pro 5.7: The plugin benefits from the new JavaScript changes in ACF PRO version 5.7.
- Code enhanced: Plugin code rewrite: The plugin has a complete rewrite of its code for better performance and readability.
Note that some of these features may not be exclusively new features, but rather updates or fixes to existing features.
Related Products
$20.00
There are no reviews yet.