ACF Options Page: Usage Guide

If you're looking to enhance your WordPress website with custom fields and options, the Advanced Custom Fields (ACF) plugin is a fantastic tool to consider. One of its features that's outstanding is the ACF options page. This powerful feature allows you to create a dedicated page in your WordPress admin panel to manage global site settings and other related fields.

Let's imagine you have a website with a customizable theme, and you want to provide a centralized location where administrators can control site-wide settings. The ACF options page can be your solution.

You can attach any fields from its rich set - from the plain text field or the image field (e.g. logo) to the repeater field, enabling you to easily manage site-wide options. The possibilities are endless!

Unlike the 'hard' coded way, by utilizing the options page, you streamline the management of these settings. And making it more convenient and efficient for administrators to maintain the site's look and feel.

Note: The options page is a Pro feature, and requires the Pro version of the Advanced Custom Fields plugin.

To understand how the ACF options page works, it's essential to know how ACF stores data. While ACF typically stores fields associated with posts or pages in the wp_postmeta table of your WordPress database, in this case, the plugin handles options page fields differently. ACF stores the fields for the options page in the wp_options table. This separation allows for better organization and retrieval of data.

On the practice, for us it means only one change about getting values: you must define the "options" source as the get_field() second argument, instead of a post id.

Adding an options page to your WordPress admin panel using ACF is a straightforward process. The process consists of two parts:

1. Adding an options page
2. Creating an ACF field group and 'attaching' it to the options page

Let's begin with the first. Here we have 2 ways to achieve it: using the built-in feature, or coding. You can choose whatever is preferred by you.

Since version 6.2, ACF Pro includes a built-in UI for creating options pages. Previously, an addon was required for this UI solution. While the use of that addon is no longer as relevant as it once was, there are still other valuable ACF addons available.

Watch the official video below to see how to add a new options page using the plugin's UI.

If you prefer the coding approach, then open your theme's functions.php file and paste the code snippet below. We use the acf_add_options_page() function to create the options page:

add_action('acf/init', function () {
    acf_add_options_page([
        'page_title' => 'Global Site Settings',
        'menu_title' => 'Site Settings',
        'menu_slug' => 'site-settings',
        'capability' => 'manage_options',
        'position' => 30,
        'icon_url' => 'dashicons-admin-generic',
    ]);
});

In this example, we create an options page titled "Global Site Settings" with a menu title of "Site Settings." The menu slug defines the URL of the options page. We set the capability to manage_options to ensure only administrators can access it. The position parameter determines the placement of the options page in the WordPress admin menu. Finally, the icon_url specifies the icon to display next to the options page in the menu. You can use any of the available dashicons by providing the corresponding class name.

Now save the changes to the functions.php file, and you're done! The options page will now appear in the WordPress admin panel. It's ready for you to add custom fields and manage global site settings.

Now it's time to assign fields to our options page.

Create a new field group in ACF and add the necessary fields.

Then under the "Location" settings for the field group, select "Options Page" as the rule to display the fields on the options page. Just like it's shown in the screenshot below.

Save the field group, and you're done! Now you can visit your options page and see the fields from your group there.

We've added the options page and assigned the fields. Now, we need to display these fields, all or some of them on the front of our website. Below we'll share 2 approaches, the shortcode approach (with a plugin) and the other with coding. Choose whichever method you prefer.

Another ACF addon, called ACF Views is going to do the work for us. ACF Views is a free and smart addon, that allows us to display selected ACF fields (or even Posts) anywhere using shortcodes, HTML markup is automatically created by the plugin.

The plugin's approach solves a row of issues at once, removing a lot of hassle from our shoulders.

So, install the ACF Views plugin from the WordPress.org repository, and activate it.

When you activate the ACF Views plugin a new item appears in the admin menu, called "ACF Views". The item has several sub-items, but in our case, we'll be working only with the one called "ACF Views".

The following video provides an overview of how to add a new ACF View to a single page. While you watch, you'll get an idea of how the plugin functions. However, please note that our specific objective is slightly different. We intend to display fields from the options page.

To display the fields from the options page, follow the text instructions below:

1. Click on the "ACF Views" menu item to access the ACF Views page.
2. Click the "Add New" button to create a new View.
3. On the new page, give your View a descriptive name. For example, let's name it "Site Settings".
4. Choose the fields you want to display from the dropdown menu.
5. Press the "Publish" button to generate the shortcode for the View.
6. Copy the generated shortcode and amend it, to pass the 'options' string to the 'object-id' parameter as the argument. So you shortcode will look like this: [acf_views view-id="5" name="Site Settings" object-id="options"]. But for sure, the view-id and name arguments will contain your specific values.
7. Paste the shortcode in the appropriate location. This can be any Gutenberg page or even a widget. Remember to use the correct element, such as the shortcode block of the Gutenberg editor.
8. Save and visit the page, to see the result.
9. Congratulations! You have successfully displayed the fields from the options page.

Unlike using custom code, you don't need to worry about the field's name, type, or return format. The plugin automatically generates the HTML markup for you.

Additionally, you can apply CSS rules to style the output directly within the View. The CSS Code field can be found under the "Advanced" tab.

While the ACF Views plugin provides an excellent solution for displaying fields from the options page, some developers may prefer a more hands-on coding approach. In such cases, using PHP code to retrieve and display the data is a viable option.

However, it's important to note that this method requires a higher level of coding knowledge and may not be as user-friendly for beginners. It involves using functions like get_field() to fetch the values from the options page fields and then manually echoing or manipulating them within your PHP template files.

Here's a simple example of how you can display an options page field using PHP code:

// the code below expects the 'Image URL' Return Format 
$logoUrl = get_field('logo', 'options')?? '';
printf('<img src="%s" alt="logo">', $logoUrl);

You can use the same get_field() function, like in other cases, just passing the 'options' string as the second argument.

The complexity of this approach is that ACF has over 30 field types, and get_field's response depends not only on the field type but also on the field return format. Check the list of main field types to get specific how-to guides.

To get additional information, watch the video below and read the official ACF article.

So, while this approach offers more control and customization possibilities, it requires a deeper understanding of PHP and WordPress development, making it less accessible to those who prefer a more intuitive solution.

This is an essential note for multilingual websites, which have (or will have) content in several languages.

As we mentioned in the Behind the Scenes chapter, ACF stores values of the option page fields in the wp_options table. This difference means that you can't translate them in the same way, like plain pages or posts, by creating 'another' post in a specific language.

It may sound scary, but don't worry, most of the multilingual plugins already took care of it.

For example, if you use Polylang, there is an addon that handles it. If you use WPML, the solution is built-in, and you just need to select the right translation option for your ACF group to make fields translatable.

The ACF options page feature empowers WordPress administrators to easily manage global site settings and related fields.

By creating a dedicated options page, you can streamline the customization process and enhance the overall user experience. Whether you choose to use the ACF Views plugin or opt for a PHP coding approach, the options page unlocks the potential to centralize and control essential aspects of your WordPress site.

Experiment with the options page and discover how it can make your website management more efficient and enjoyable.