How to Create a Simple Admin Settings Page With Custom Fields

With the MD API you can quickly and in a more manageable way extend the WordPress admin panel and create new settings pages and meta boxes.

In this example we are creating a basic admin page that will appear under the “Settings” tab in the WordPress admin panel.

Simply copy the starter example to your child theme to start building custom admin pages. You can take examples from the official MD Dropins located in the dropins folder. For now we will start this series with a simple example.

Create and save custom admin settings in two steps

In the register method you can setup the admin page and attach the settings field names of the page you are creating. There are many more methods available to register admin pages, post meta, or term meta.

This example creates a new admin page that will have two settings fields. One field is a text field, the other is a checkbox. The MD API must know the field name and type of setting you are trying to save for security purposes.

public function register() {
    return array(
        'admin_page' => array(
            'name' => __( 'Test Settings', 'md' ),
            'parent_slug' => 'options-general.php',
            'fields' => array(
                'test_title' => array( 'type' => 'text' ),
                'test_checkbox' => array(
                    'type' => 'checkbox',
                    'options' => array( 'value', 'value2', 'value3' )
                )
            )
        )
    );
}

Now your admin page will be created, but you must create the admin template HTML to display your fields.

Next we have created a method (another way of saying “function”) called admin_page which will hold the actual HTML of the settings fields.

With the $fields object, you can create versatile options data and well-designed admin pages.

public function admin_page() { ?>

    <div class="wrap md">
        <div class="md-content-wrap">
            <?php $this->fields->field( 'test_title', array(
                'type' => 'text',
                'label' => __( 'Test Title', 'md-child' )
            ) ); ?>
            <?php $this->fields->field( 'test_checkbox', array(
                'type' => 'checkbox',
                'label' => __( 'Test Checkbox', 'md-child' ),
                'empty_label' => __( 'Select value...', 'md-child' ),
                'options' => array(
                    'value1' => __( 'Value 1', 'md-child' ),
                    'value2' => __( 'Value 2', 'md-child' )
                )
            ) ); ?>
            <p><?php $this->fields->save(); ?></p>
        </div>
    </div>

<?php }

We are writing more documentation with more direct examples and explanations, but as a developer you are encouraged to take these basics and explore the more advanced possibilities in MD Dropins.

Welcome to a whole new world of Marketers Delight.