Advanced Custom Fields Options Page: Ultimate Guide

Advanced Custom Fields(ACF) is a popular WordPress plugin that empowers developers and administrators to extend and customize the functionality of their WordPress websites. One of the powerful features ACF offers is the ‘Options Page’ functionality, which allows the creation of dedicated settings pages within the WordPress admin area.

It provides a centralized location for managing and storing global or site-wide settings. Instead of scattering configuration options throughout different admin panel pages or hardcoding them in your theme files, the options page feature organizes these settings into a single, user-friendly interface.

Its functionality is particularly useful when there’s a need to manage settings that affect the entire website, such as global styles, default behavior, or common elements. The options page interface within ACF enables administrators to define and customize fields specific to their requirements.

This flexibility allows for a wide range of input types, such as text fields, select dropdowns, checkboxes, image uploads, and more. It ensures that updates are instantly applied across the website, promoting consistency and saving time for both administrators and developers.

In this article, we will delve into the concept of ACF Option Pages, explore their various use cases, and provide a step-by-step guide on creating them.

Benefits of using the Options Page

• Centralized Management: With an ACF options page, you can consolidate all your site-wide settings and options in one central location. This makes it easy to access and modify these settings without having to navigate through different templates or code files. For example, imagine you have a website with multiple contact information fields such as phone number, email address, and physical address. By using an options page, you can store and manage these details in one place, simplifying updates and ensuring consistency across your entire site.

• Accessibility of Administrators: ACF options pages are accessible to users with appropriate admin privileges. This means that site administrators or content managers can access and modify the settings without needing technical knowledge or access to the codebase. They can conveniently update site-wide options without having to edit any code. For instance, consider a scenario where you have an options page with social media settings. Site administrators can easily update the social media profile links without touching the theme files, providing them with the flexibility to adapt to changing social media platforms or handles.

• Enhanced Code Organization: An ACF options page helps maintain a clean and organized codebase by separating site-wide settings and options from your template files. It keeps your website’s presentation and functionality aspects separate from the configuration settings. It improves the readability and maintainability of your code, making it easier to troubleshoot issues or make updates in the future.

• User-Friendly Interface for Non-Technical Users: ACF options pages provide a user-friendly interface for managing complex settings. You can create a wide range of field types, such as text inputs, checkboxes, select fields, and more. These fields can have predefined values or allow custom input, making it intuitive for non-technical users to modify site-wide options. For instance, imagine you have an options page for a site’s header settings. You can provide dropdown menus or color pickers to customize the header logo, background color, or navigation menu styles. It empowers non-technical users to customize the site’s appearance without needing any coding skills.

Let’s explore a few examples of how the ACF Options page feature can enhance your workflow and improve your way of working:

Consider a scenario where you’re building a custom WordPress theme for a client, and they want a dedicated settings page to manage various aspects of their website easily. This includes options like the site logo, colors, typography, social media links, and other global settings.

In this case, you can utilize the ACF options page feature to create a user-friendly interface for managing these settings. ACF provides a convenient way to create custom fields and organize them into logical groups on a dedicated options page within the WordPress admin area.

Let’s consider another example: Suppose you are working on a WordPress website that requires the inclusion of a promotional banner that will be displayed across multiple pages. However, the content and appearance of this banner may change frequently, and you want to provide a simple and efficient way for the website owner to manage it.

In this scenario, you can utilize the ACF options page to create a dedicated section for managing the promotional banner. Using custom fields provided by ACF, you can offer options to update the banner image, text, call-to-action button, and other relevant settings.

Through the ACF options page, the website owner gains a user-friendly interface where they can easily make modifications to the banner content without editing individual pages or templates. They can upload new images, change text, update links, and customize the banner’s design all in one place.

How to make an ACF Options Page

Let’s illustrate the process of creating an ACF options Page using a practical example. You can create an options page with two options through PHP code and through ACF itself.

Adding an Options Page through ACF

• Ensure that you have the ACF plugin installed and activated on your WordPress website.
• Go to ACF in your WordPress dashboard, then click on “Options Page” and select “Add New.”

• Then, you need to provide some information. First, you have to give it a title and slug, and you have to specify its parent page.
• Once you’ve filled in everything, click the “Save Changes” button to keep all your updates.

Adding an Options Page through PHP Code

• Open up your ‘functions.php’ file, and add these code snippets to register an ACF options page.

 if( function_exists('acf_add_options_page') ) {
 acf_add_options_page(array(
      'page_title' => 'Theme Options',
      'menu_title' => 'Theme Options',
      'menu_slug' => 'theme-options',
      'capability' => 'edit_posts',
      'redirect' => true
   ));
}

The ‘function_exists‘ function mentioned in the code snippet checks if a particular function is available on your website. If the function exists, it proceeds to create an options page using the provided details, including the page title, menu title, menu slug, capability, and the option to enable redirection.

Adding Multiple Subpages

You can also create subpages within an options page by using the following code snippet:

if( function_exists('acf_add_options_page') ) {
    
    acf_add_options_page(array(
        'page_title'    => 'Theme General Settings',
        'menu_title'    => 'Theme Settings',
        'menu_slug'     => 'theme-general-settings',
        'capability'    => 'edit_posts',
        'redirect'      => true
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Theme Header Settings',
        'menu_title'    => 'Header',
        'parent_slug'   => 'theme-general-settings',
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Theme Footer Settings',
        'menu_title'    => 'Footer',
        'parent_slug'   => 'theme-general-settings',
    ));
 }

This code snippet first checks for the existence of a specific function using the function_exists() function. Once confirmed, it proceeds to create sub-pages using the acf_add_options_sub_page() function. This function allows you to create sub-pages under the options page by specifying the parent slug, i.e., ‘theme-general-settings‘, which is defined earlier in the above code.

How to add Field Group to the Options Page

• Create a field group using the ACF plugin.
• Then, Within the field group, add subfields to define the specific types of data you want to display.

Please check our detailed article on How to Create a Field Group in ACF.

• Navigate to the Settings section within the ACF plugin and select the ‘Location Rules’ tab.

• Select the ‘Options Page‘ under the first dropdown, then specify the conditions and choose the specific options page where you want to show these subfields.

Displaying Subfields on the Options Page

Once you have configured the Location rules to specify the desired options page, the subfields you created within the field group will be displayed on that particular options page.

Retrieving ACF Options Page Subfields Data in Template files

To retrieve the value of the options page into your template files, you can follow these steps:

• Open the template file where you want to display the data. This could be a header.php, footer.php, or any other template file where you want to use the options page data.

• Add the following code snippet to retrieve and display the value of the desired field from the ACF options page and then save the file.

<?php the_field('header_title', 'option'); ?>

Here, ‘the_field’ is a function used to retrieve and display the value of a field.

The first parameter, ‘header_title,‘ specifies the name of the field you want to retrieve the value. Ensure it matches the field name you set up in your ACF options page field group.

The second parameter, ‘option,‘ indicates that you want to retrieve the value from the ACF options page. This parameter is only necessary if you are specifically retrieving a value from the options page.

Conclusion

As you can see ACF plugin’s Options page feature offers a powerful solution for extending and customizing WordPress websites. It provides a dedicated location for managing global settings, reducing the need to navigate through multiple files or hardcode theme files. By utilizing the ACF Options page, developers and administrators can create user-friendly interfaces for clients to easily modify site-wide settings, such as colors, logos, typography, and more.