WP Snippet #004 Custom option pages with acf.
Tags: wordpress, webdev, php
Published: 2020-02-05 18:30:56

---
title: WP Snippet #004 Custom option pages with acf.
published: true
description: A tutorial on how to add custom admin option pages for your Wordpress theme with the Advanced Custom Fields plugin and Php
canonical_url: https://since1979.dev/snippet-002-adding-option-pages-with-acf/
cover_image: https://since1979.dev/wp-content/uploads/2020/01/snippet-004-custom-option-pages-with-acf.jpg
tags: wordpress, webdev, php
---
[Originally posted on my website on February 5th 2020](https://since1979.dev/snippet-002-adding-option-pages-with-acf/)

How to add custom option pages with Advanced Custom Fields.
-----------------------------------------------------------

Of-course WordPress offers a build in Api to create custom admin/option pages using *[add_options_page()](https://developer.wordpress.org/reference/functions/add_options_page/)* and related functions. But to be honest this can be quite tedious. Fortunately for us we can use the amazing [Acf plugin](https://www.advancedcustomfields.com/) to make this task a lot easier. In the snippet below we register a custom option page called "Theme options" with two Sub pages called "Theme logos" and "Seo options". The menu items for these pages will show just below the "Appearance" item.

{% gist https://gist.github.com/vanaf1979/74681488ba155dd7a9313324bbece146 %}

On the last line we hook into the *[acf/init](https://www.advancedcustomfields.com/resources/acf-init/)* hook and register a callback function called *add_acf_menu_pages*.

Inside the *add_acf_menu_pages* function we first use the *[acf_add_options_page](https://www.advancedcustomfields.com/resources/acf_add_options_page/)* function to register the "Theme options" page. To do so we pass it an array containing the following parameters:

-   **page_title:** This is the title that will be shown at the top of the page.
-   **menu_title:** This is the title that will be shown in the admin menu.
-   **menu_slug:** The name/slug to be used within the pages url.
-   **capability:** The [capability](https://wordpress.org/support/article/roles-and-capabilities/) a user must have for the menu item to show.
-   **position:** The position inside the menu. here we use 61.1 which is just below the appearance menu item.
-   **redirect:** Should this main page redirect to it's first child page or not.
-   **icon_url:** The icon to show in the menu. Should be a [dashicon](https://developer.wordpress.org/resource/dashicons/#admin-site) class.
-   **update_button:** The text to show in the submit button.
-   **updated_message:** The text to show at the top of the page when the options are saved.

Next we add two sub pages using the *[acf_add_options_sub_page](https://www.advancedcustomfields.com/resources/acf_add_options_sub_page/)* function. This function also takes an array of key/value pairs and can take the same parameters as the *acf_add_options_page* function.

In this example we just set the *page_title* and *menu_title*. But we also set the *parent_slug* to the same value as *menu_slug* of the "Theme options" page. Making these pages sub pages of that page.

**Note:** Because we set the redirect parameter of the Theme options page to true, when we click its menu item in the admin we will be redirected to it's first child page. In this case we will be redirected to the "Theme logos" page.

**Tip:** You can also just register a sub page and set the *parent_slug* to be an existing/core menu page slug to add the sub page to that menu group. For instance if you set the *parent_slug* to *"themes.php"* the sub page will show under the "appearance" menu group.

You can now create a new field group and set it's location to be any of the registered option pages like shown in the image below.

![Set an acf field group to a option page location](https://since1979.dev/wp-content/uploads/2020/02/acf-fields-to-options-page-1024x181.png)

Set an acf field group to a option page location

#### Follow
Found this post helpful? Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading**