ACF options add submenu with a callback function

Question

I want to add a custom submenu to option page so that I can render page with callback function I add. If I create acf_add_options_sub_page I must use the acf field to generate the options page.

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'      => false
    ));
    
    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',
    ));
    
}

---

What i tried

add_action( 'admin_menu', 'main_home' );

/**
 * Adds a submenu page under a custom post type parent.
 */
function main_home() {
    add_submenu_page(
        'theme-general-settings',
        __( 'Books Shortcode Reference', 'textdomain' ),
        __( 'Shortcode Reference', 'textdomain' ),
        'manage_options',
        'books-shortcode-ref',
        'books_ref_page_callback'
    );
}
 
/**
 * Display callback for the submenu page.
 */
function books_ref_page_callback() { 
    ?>
    <div class="wrap">
        <h1><?php _e( 'Books Shortcode Reference', 'textdomain' ); ?></h1>
        <p><?php _e( 'Helpful stuff here', 'textdomain' ); ?></p>
    </div>
    <?php
}

Result It does not work : url becomes like : website.com/wp-admin/books-shortcode-ref

If I change books-shortcode-ref to theme-general-settings it works but the it becomes same as what acf plugin used to go.. I have to add options using acf fields.

Answer 1

Here the code I've just used to add custom sub option page to ACF option page applied to your example. You have to declare your option page twice with the same identifier (in ACF and with the normal way). So, it's a little tricky, but it works:

function add_acf_option_page() {
    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'    => 'manage_options',
            'redirect'      => false
        ));
        acf_add_options_sub_page( array(
            'page_title'  => __( 'Books Shortcode Reference', 'textdomain' ),
            'menu_title'  => __( 'Shortcode Reference', 'textdomain' ),
            'parent_slug' => 'theme-general-settings',
            'capability' => 'manage_options',
            'menu_slug'   => 'books-ref-page',
        ) );
    }
}
add_action('acf/init', 'add_acf_option_page' );

function add_custom_option_page() {
    add_submenu_page( 
        null, 
        __( 'Books Shortcode Reference', 'textdomain' ), 
        __( 'Shortcode Reference', 'textdomain' ),
        'manage_options', 
        'books-ref-page', 
        'books_ref_page_callback'
}
add_action('admin_menu', 'add_custom_option_page');

function books_ref_page_callback() {
     ?>
    <div class="wrap">
        <h1><?php _e( 'Books Shortcode Reference', 'textdomain' ); ?></h1>
        <p><?php _e( 'Helpful stuff here', 'textdomain' ); ?></p>
    </div>
    <?php
}