The component Options Page for the free version of ACF is a 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 ACF Pro is installed and active.
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 Options Page
First of all, you need to create the options page.
For that select ACF Options Pages in the admin panel et click Add New to create the Options Page.
Give it a meaningful name such as Site settings, Global settings… and save it.
Create the ACF group and related fields
After creating the options page, you need to create the ACF group and the related fields or open an existing group.
If you create many groups in order to specialize each of the groups by nature, texts, URLs, images etc, you must make sure that the name of each of the fields is unique.
The important part: select the Location rules (mandatory)
Post type is equal to ACF Options page
Post is equal to the title of the options page you’ve created
Assign data to option page fields
Now that the ACF group has been created, you can assign data to the Options page fields.
To do this, go to the Dashboard/EAC components/ACF Options page and open the options page you have created.
Fill in the fields and save.
In the view you must find:
- Options page title,
- The name of the ACF group associated with the options page and its group key,
- The ‘meta_name’ of fields and their field keys,
- The ID of the Options Page.
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 can also use the options page with the Relationship grid widget.
You will find in the list the title of the ACF group and the related fields 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: ' . esc_html( $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: ' . esc_html( $value ) . '<br>';
}
}
/** Select URL value by field name */
$value = get_field( 'site_url', 27329 );
if ( $value ) {
echo 'URL: ' . esc_url( $value );
}
/** Get all Options page fields without formating */
$fields = get_fields( 27329, false );
if ( $fields) {
foreach( $fields as $name => $values ) {
if ( ! is_array( $values ) ) {
echo esc_html( $name ) . ': ' . esc_attr( $values ) . '<br>';
} else {
foreach( $values as $value ) {
echo esc_html( $name ) . ': ' . esc_attr( $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