Using ACF Options Page as Template Settings

The functions acf_add_options_page and acf_add_options_sub_page in the Advanced Custom Fields (ACF) plugin are essential for creating customizable Options Pages in WordPress. These functions allow you to organize your settings efficiently, making it easier for users to manage their site configurations.

Creating an ACF Options Page in the wordpress dashboard

Here’s an example demonstrating the use of these functions in a WordPress theme’s function.php file:

if( function_exists('acf_add_options_page') ) {
    acf_add_options_page(array(
        'page_title' => 'Theme Settings',
        'menu_title' => 'Theme Settings',
        'menu_slug' => 'theme-settings',
        'capability' => 'edit_posts',
        'redirect' => false
    ));

    acf_add_options_sub_page(array(
        'page_title' => 'Header Settings',
        'menu_title' => 'Header',
        'parent_slug' => 'theme-settings',
    ));
}

In this example, the acf_add_options_page function creates a top-level ‘Theme Settings’ page, while acf_add_options_sub_page adds a subpage ‘Header Settings’ under it. This structure allows for better organization of theme customization options, making it more user-friendly and intuitive for site administrators to manage settings efficiently.

Output of the option in the template

Next, you need to create a group of fields in the WordPress admin panel that will be used in the template. In the group, you need to find Location (Rules) and select Form > Options Page and the created Theme Settings.
For example, create the 'telephone' field.

To output this field in the template, you need to use this code:

<?php $telephone = get_field('telephone', 'option');
if( $telephone ): ?>
<div class="telephone"><?php echo $telephone; ?></div>
<?php endif; ?>

One practical application of acf_add_options_page is to create a settings page for a custom theme where users can define global variables such as colors, fonts, or social media links without needing to edit the code directly.