The component Options Page for the free version of ACF is a new feature that will allow you to create ACF fields globally for the website.
It allows you to build a top-level settings page with ACF custom fields without any coding.
In this tutorial you will see how to add Options Pages to your WordPress back office and use it with the Dynamic Tags feature from Elementor.
Because the ACF field data is not attached to a particular page you can display the fields in your templates with the standard ACF functions.
Overview of ACF Options Page
To enable the options page feature, the free versions of ACF is installed and active.
You should be familiar with the Dynamic Tags features of Elementor and the Advanced Custom Fields plugins.
Consult this help to find out which ACF fields are supported.
Pay attention: ACF Options page cannot be activated if Elementor Pro or ACF Pro are installed.
Activate ACF Options Page feature
In the admin panel select ‘EAC components’ link and ‘Features’ tab.
Enable the ‘ACF Options Page’ entry and save settings.
Create the ACF group and the related fields
If you create many groups in order to specialize each of the groups by nature, texts, URLs, images … you must make sure that the name of each of the fields is unique.
Select the rule ‘ACF Option‘ as Post Type. This rule is mandatory.
Create the Options Page
Now you have to associate the group of fields with the options page.
Select ‘ACF Options Pages‘ in the admin panel et click ‘Add New‘ to create the Options Page in which you must find the fields you defined previously. Make the necessary changes and save the post.
In the view you must find:
- The name of the group and its key
- The ‘meta_name’ of fields and their keys
- Fields are saved or not
- The ID of the Options Page
Create another options page
Before creating another Options page, you must add a new rule for the first ACF group with the title of the Options page.
Remember the rule Post Type === ‘ACF Option’ is mandatory.
If you create another options page (Ex: OP site global) you will see in the view the fields are not saved because the fields are global in the site and you cannot share the same ACF group between multiple options pages.
Use the Options Page fields with the Dynamic Tags
As for the other dynamic tags you must select the wrench icon and choose the tag that you want to use.
You will find in the list the name of the Options Page and the name of the field whose value will be displayed.
Grant access Options Page
You can grant additional capabilities to the ‘editor‘ and ‘shop_manager‘ roles.
These roles will be able to access the ‘ACF Options Page’ sub-menu and create or modify ACF global fields.
For that in the admin panel select ‘EAC components’ link, ‘WordPress’ tab and enable the ‘Grant access Options Page‘ entry and save settings.
Use ACF functions to retrieve fields values
The Option Pages are activated independently of ACF Dynamic tags. You can therefore display the global fields using the ACF functions.
Since ACF functions search for data in the current page by default, you will have to specify the ID of the options page that you will retrieve in the ‘ACF Options Page’ admin view.
See some examples below.
<?php
/** Action GeneratePress theme */
add_action( 'generate_before_main_content', function() {
global $post;
if ( ! function_exists( 'get_field' ) ) return;
if ( ! $post || 'page' === $post->post_type ) return;
?>
<div style="margin-top:20px;">
<?php
/** Relationship by field key with Options Page ID */
$fields = maybe_unserialize( get_field( 'field_60ec4dca8d808', 27329 ) );
if ( $fields && is_array( $fields ) ) {
foreach( $fields as $value ) {
echo "Relationship Title: " . $value->post_title . '<br>';
}
}
/** Select text multiple values by field name */
$fields = get_field( 'site_select_text', 27329 );
if ( $fields && is_array( $fields ) ) {
foreach( $fields as $value ) {
echo "Select Text: " . $value . '<br>';
}
}
/** Select URL value by field name */
$value = get_field( 'site_url', 27329 );
if ( $value ) {
echo "URL: " . $value;
}
/** Get all Options page fields without formating */
$fields = get_fields( 27329, false );
if ( $field s) {
foreach( $fields as $name => $values ) {
if ( ! is_array( $values ) ) {
echo $name . ": " . $values . '<br>';
} else {
foreach( $values as $value ) {
echo $name . ": " . $value . '<br>';
}
}
}
}
?>
</div>
<?php
});
Hello and thanks for this plugin!
I am using the options page among other features, and I would like to grant access to the EAC options page to a specific user role, not only admins.
More specifically, I want the Shop Manager (the default role created by WooCommerce) to access EAC options.
I tried some plugins to manage user roles, but in the end I always get the same result: the shop manager doesn’t even see the backend menu item EAC components and/or ACF option pages.
Can you help me?
Hello Luca
The next version (1.9.6) will include functionality to allow ‘Editor and Shop_manager’ to create/edit options pages
Rgds