Simple admin page with custom fields

How to use MD's developer tools to create custom admin settings page.

Preview PHP
Click to copy

Create new settings group, register fields to save, and build fields template HTML.

<?php
/**
 * Create test admin page with basic settings examples.
 *
 * @since 1.0
 */

class md_child_test_page extends md_api {

	/**
	 * Register admin page.
	 *
	 * @since 1.0
	 */

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

	/**
	 * Create admin page template.
	 *
	 * @since 1.0
	 */

	public function admin_page() { ?>

		<div class="wrap md">
			<div class="md-content-wrap-small">
				<h1>Admin Page Name</h1>
				<?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 }

}

new md_child_test_page;

Simple admin page with MD

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.

Leave a Comment

Start building your website with MD now

Get started with MD today. Pay once for use on unlimited websites.
* Save 40% on license key renewals every 12 months. Get auto-updates sent to 5 websites.

Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.