Add Options Page for the free version of ACF

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.

EAC components settings
ACF Options page enable
EAC components features 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.

ACF Options page sub menu entry
ACF Options Page admin

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

ACF Options page location rules
Applying the rules to the ACF group

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.
ACF options page view
ACF Options Page admin view

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.

ACF dynamic tags list
ACF dynamic tags list
ACF dynamic tags selection
ACF dynamic tags selection
ACF relationshop grid
ACF Options page for the ACF Relationship grid

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.

ACF Options Page grant access

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
});

2 thoughts on “Add Options Page for the free version of ACF”

  1. 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?

    Reply

Leave a Comment