For most cases ACF (Advanced custom fields plugin for WordPress) free version is enough to meet you and your users’ requirements. For most themes, a custom site settings page is a necessary feature that gives the user a bit more control over the theme.

In ACF pro version, a custom options page can be created easily, as shown in the link. While the option is not available in the free version, a page can be created with the existing features by using a workaround.

Here are the steps to create a custom settings page using the free version of ACF. If you don’t have the plugin yet, first install it from the plugins page

Creating the “page”

For creating the settings page, we will be using a normal “page”. First, go to the Pages section and select “Add new”, you will see a page as shown below.

Now enter only the title and try to make it something simple. In my case, it was “Site settings”, so my permalink was “site-settings”.

That’s all the content that’s needed, for now.

Adding the fields.

Next, select the “Custom Fields” options from the menu to go to the ACF management page.

Select “Add New” to add a new field group.

Give the field group a title, and then add the necessary fields, then go to the “Location” part and add the rule so that the fields appear only for the “site-settings” page.

Next, scroll down to the “Settings” part, and in the “Hide on screen” section, tick the Content Editor checkbox and any other feature that you don’t need. But keep the Permalink and Slug option unchecked so, you can see your site settings slug which will be used later.

Publish the field group so that the changes are applied.

If you go to the pages and select the “Site Settings” page, you will see that the content editor and other features that were chosen to be hidden in the previous step are still visible (If you are using Gutenberg). In order to hide the selected features, we will have to manually hide Gutenberg for this specific page.

Hiding Gutenberg

If you are using a plugin that hides Gutenberg, you can skip this section.

Open your themes functions.php and paste the below code.

add_filter('use_block_editor_for_post', 'disable_gutenberg_on_settings_page', 5, 2);

function disable_gutenberg_on_settings_page($can, $post){
    if($post){
        // Replace "site-settings" with the slug of your site settings page.
        if($post->post_name === "site-settings"){
            return false;
        }
    }
    return $can;
}

The above code will disable Gutenberg on the “site-settings” page.

Now, if you go to the site settings page, you will see that only the custom fields and title bar appear.

By now we will have a basic working settings page.

Hide settings page in pages section

We would probably want the “site settings” page to be independent, mostly accessible via the admin menu. So the next step is to remove the page from pages listing.

In order to do this, copy the below code into your theme’s functions.php file

function hide_settings_page($query) {
    if ( !is_admin() && !is_main_query() ) {
        return;
    }    
    global $typenow;
    if ($typenow === "page") {
        // Replace "site-settings" with the slug of your site settings page.
        $settings_page = get_page_by_path("site-settings",NULL,"page")->ID;
        $query->set( 'post__not_in', array($settings_page) );    
    }
    return;

}

add_action('pre_get_posts', 'hide_settings_page');

This will remove our settings page from the query.

Adding the settings page to the admin menu

To make our custom page a part of the admin menu, paste the below code into your theme’s functions.php

// Add the page to admin menu
function add_site_settings_to_menu(){
    add_menu_page( 'Site Settings', 'Site Setttings', 'manage_options', 'post.php?post='.get_page_by_path("site-settings",NULL,"page")->ID.'&action=edit', '', 'dashicons-admin-tools', 20);
}
add_action( 'admin_menu', 'add_site_settings_to_menu' );

// Change the active menu item

add_filter('parent_file', 'higlight_custom_settings_page');

function higlight_custom_settings_page($file) {
    global $parent_file;
    global $pagenow;
    global $typenow, $self;

    $settings_page = get_page_by_path("site-settings",NULL,"page")->ID;

    $post = (int)$_GET["post"];
    if ($pagenow === "post.php" && $post === $settings_page) {
        $file = "post.php?post=$settings_page&action=edit";
    }
    return $file;
}

The above code has two parts,

  1. Add the page to the menu. To add a custom icon to the item, check the list of available icons here.
  2. Highlighting the menu when the custom settings page is visited.

By now the important parts of our custom settings page are finished.

The only remaining step is to add a custom title to the settings page. To do so, paste the below code to the functions.php file

function edit_site_settings_title() {
    global $post, $title, $action, $current_screen;
    if( isset( $current_screen->post_type ) && $current_screen->post_type === 'page' && $action == 'edit' && $post->post_name === "site-settings") {
        $title = $post->post_title.' - '.get_bloginfo('name');           
    }
    return $title;  
}

add_action( 'admin_title', 'edit_site_settings_title' );

That’s it, now you have a custom settings page.

Querying the data

To query the details you can use the slug of the settings page, ie “site-settings”.

Or find the id of the page from the admin section, for example

5 is the id of my settings page and to fetch all the acf fields for this page, we can use either get_option or get_options depending on the use case

$allOptions = get_fields(5);
$specificOption = get_field('option_field_name', 5);

Feel free to comment if you have any suggestions/improvements or you’re having any difficulties.