Create Settings Page for Customizer Options
Tags: wordpress
Published: 2020-07-15 02:14:19

Normally, to edit settings of a theme, users must go to Customizer. But there is another way to do it. It's creating a settings page that includes options from Customizer so that users can edit these options without going to Customizer. You can do it easily by using the MB Settings Page extension of Meta Box.

For example, in the **Footer Settings** section in **Customizer** of the [Memory theme](https://gretathemes.com/wordpress-themes/memory/) which I'm using, there are the following choices:

![ there are the following choices in this section of Customizer](https://imgur.com/9v1PeGQ.png)

I will include 3 choices which are **Show Logo**, **Site Title**, and **Site Description** into another settings page in the admin dashboard as following:

![I will include 3 choices from Customizer to another settings page](https://imgur.com/qyPnkzv.png)

Let's see how we do it.

First of all, make sure that you installed and activated the [Meta Box plugin](https://wordpress.org/plugins/meta-box/) (the free version) and the [MB Settings Page](https://metabox.io/plugins/mb-settings-page/) extension (premium).

Step 1: Create a New Settings Page in the Admin Dashboard
---------------------------------------------------------

Add this code into the `functions.php` file of your theme:

```
function memory_filter_settings( $settings_pages ) {
    $settings_pages[] = array(
        'id'                   => 'customizer',
        'option_name' => 'theme_mods_memory-1',
        'menu_title'     => 'Theme Options',
        'tabs'               => array(
            'general'      => 'General Settings',
            'footer'        => 'Footer Settings',
        ),
    );
    return $settings_pages;
}
add_filter( 'mb_settings_pages', 'memory_filter_settings' );
```

Explanation:

-   `'mb_settings_pages'`: it's the hook to create a settings page in the admin dashboard.
-   `'id' => 'customizer'`: this is the ID of this settings page. We will use it in the next step.
-   `'tabs`': in this settings page, we create 2 tabs named **General Settings** and **Footer Settings**. We will also use these tabs' IDs in the next step.
-   `'option_name' => 'theme_mods_memory-1'`: you should pay attention to this attribution. The `option_name` attribution must be set in the right syntax as `'theme_mods_$themeslug'` to synchronize this settings page's fields with options in Customizer of the theme. To get `$themeslug`, go to the theme's folder and see its name. It's the `$themeslug` that you need. For example, my theme's folder name is `memory-1` so my `option_name` is `theme_mods_memory-1`.

![Create a New Settings Page that includes Customizer options](https://imgur.com/HNk1U7p.png)

You can see more options for this hook [here](https://docs.metabox.io/extensions/mb-settings-page/).

Now, go back to the admin dashboard, a new menu will appear with the content inside it as follows:

![a new menu will appear with the content inside it as follows](https://imgur.com/ItPNpIz.png)

This is the settings page that we've created.

Step 2: Create Custom Fields for Settings Page
----------------------------------------------

To create custom fields, you have some options:

1.  Manual coding (add code to the `functions.php` file).
2.  Using the [Online Generator](https://metabox.io/online-generator/) tool (free) of Meta Box to create custom fields then copy the generated code to the `functions.php` file.
3.  Using the Meta Box Builder to have an intuitive UI to create custom fields in the admin dashboard.

Whatever way you do, finally, you will have the following code in the `functions.php` file as a result:

```
function memory_register_settings( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'header',
        'title'          => esc_html__( 'General', 'memory' ),
        'settings_pages' => 'customizer',
        'tab'            => 'general',
        'fields'         => array(
            array(
                'id'   => 'custom_logo',
                'name' => esc_html__( 'Custom Logo', 'memory' ),
                'type' => 'single_image',
            ),
        ),
    );
    $meta_boxes[] = array(
        'id'             => 'footer',
        'title'          => esc_html__( 'Footer', 'memory' ),
        'settings_pages' => 'customizer',
        'tab'            => 'footer',
        'fields'         => array(
            array(
                'id'      => 'ft_show_logo',
                'name'    => esc_html__( 'Show Logo', 'memory' ),
                'type'    => 'checkbox',
            ),
            array(
                'id'      => 'ft_site_title',
                'name'    => esc_html__( 'Site Title', 'memory' ),
                'type'    => 'checkbox',
            ),
            array(
                'id'      => 'ft_site_description',
                'name'    => esc_html__( 'Site Description', 'memory' ),
                'type'    => 'checkbox',
            ),
        ),
    );
    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'memory_register_settings' );
```

Explanation:

-   `'rwmb_meta_boxes'`: it's the hook to create custom fields.
-   `'settings_pages' => 'customizer'`: this is used to assign the created custom fields to the settings page whose ID is `'customizer'`.
-   `'tab' => 'general'`: This is used to assign the created custom fields to the tab whose ID is `'general'` (that we created in step 1). Likewise, the `'tab' => 'footer'` is used to assign custom fields to the tab whose ID is `'footer'`.
-   `'id' => 'ft_show_logo'`: `ft_show_logo` is the ID of the option named **Show Logo** in Customizer of the theme. To see this ID, you can check the theme's coding section.

[Create Custom Fields for Settings Page](https://imgur.com/GbW84s8.png)

Now, go to the created settings page, you'll see that custom fields display as follows:

[Inspect the elements on the website to view its code.](https://imgur.com/eaGggo0.png)

Now, go to the created settings page, you'll see that custom fields display as follows:

Last Words
----------

Similar to other custom fields, you just need to assign the field to the settings page. When users edit options in this settings page, it's similar to go to Customizer to edit. You may want to use this way when your Customizer has too many options and you want users to focus on certain settings. Good luck!