Add Options Page for the free version of ACF

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.

Table of Contents

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.

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
Enable options page
EAC components features 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.

ACF group- ield post_type
Select ACF Option as Post Type

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
Components settings options page
Options page view
The Options Page admin view and columns content

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.

Add new rule for the ACF group

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.

ACF Options Page URL
ACF Options Page site settings URL
ACF Options Page site settings image

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($post->ID == 6889) return;
	if($post->post_type === 'post') 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($fields) {
    		foreach($fields as $name => $values) {
    			if(!is_array($values)) {
    				echo $name.": ".$values.'<br>';
    			} else {
    				foreach($values as $value) {
    					echo $name.": ".$value.'<br>';
    				}
    			}
    		}
    	}
	?>
	</div>
	<?php
});

Leave a Comment