Options Pages

You can create an 'Options Page' on the WordPress sidebar to create a space for global ACF fields.

Creating and consuming an options page can be completed in a few steps:

• Create a new Options Page — check out backend/options.php for some example code, noting that show_in_graphql must be set to true.
• Create a new ACF field group, with the fields you need.
  • Set the Location Rule to Options Page is equal to <your new options page>.
  • Make sure Show in GraphQL is checked.
  • Set GraphQL Field Name to something short and sweet, using pascalCase, eg myOptions.
• Check the GraphiQL IDE, and look for a root-level field with a similar name to the menu_slug defined in your PHP, code, eg. themeGeneralSettings. It should have a child field with you GraphQL Field Name, which contains your settings!

The PHP code should look something like this:

acf_add_options_page([
  'page_title' 	=> 'Theme Settings',
  'menu_title'	=> 'Theme Settings',
  'menu_slug' 	=> 'theme-general-settings',
  'capability'	=> 'edit_posts',
  'redirect'		=> false,
  'show_in_graphql' => true
]);

Assuming that all worked, you can then query these fields in an .graphql file. If it needs to be globally accessible, you can add it to the _app.graphql file, and access it using the useAppData hook. It'll even be typed with TypeScript.

query AppData {
  themeGeneralSettings {
    myOptions {
      footerText
    }
  }
}

const footerText = useAppData(
  (data) => data?.themeGeneralSettings?.myOptions?.footerText
);