Using the WordPress API to Register Custom Admin Pages and Settings

by admin in Code on July 9, 2019

If you are a wordpress theme or plugin developer, you can have the requirement that need to define your own admin pages settings for your own products. In this article, we will introduce how to register custom admin pages and settings using the wordpress API. It will be easily and quickly to create custom admin pages and settings after you read this tutorial.

Here you can find the full source code of this tutorial link

Creating Custom Plugin

Firstly, We will create a custom wordpress plugin for this tutorial. We can simply created a folder with the plugin name, which has a single PHP file inside it with the same name. I this tutorial, let’s Any make it wphobby-settings-api.php which looks like this:

<?php
/*
Plugin Name: WPHobby Settings API
Plugin URI: https://wphobby.com
Description: Custom Admin Pages and Settings.
Version: 1.0.0
Author: WPHobby
Author URI: https://wphobby.com
*/

Add Admin Page

After that we can just add a line of code to add our custom admin page now. According to the wordpress.org document, as you can see this link

So we can add the following code to our plugin:

add_action( 'admin_menu', 'wphobby_settings_page' );

function wphobby_settings_page() {
  add_menu_page( 'WPHobby Settings API',
      'WPHobby',
      'manage_options',
      'wphobby-panel',
      'wphobby_panell_general'
  );
}

Use Settings API

Now We can use the WordPress Settings API to define options for our settings page. You can check the reference on this link

add_action( 'admin_init', 'wphobby_register_settings' );

function wphobby_register_settings() {
  register_setting(
      'wphobby_settings_form', // A settings group name.
      'wphobby_settings_form_data' //The name of option to sanitize and save.
  );

  add_settings_section( 'wphobby_section_general', 
      '', 
      'wphobby_section_general_output' , 
      'wphobby_panel_general' 
  );
  add_settings_field( 'wphobby_field_text',
      __("WPHobby Field Text", "wphobby"),
      'wphobby_field_output', 
      'wphobby_panel_general', 
      'wphobby_section_general' 
  );

}

After that we can output our options on the admin page:

function wphobby_section_general_output() {
  echo "Display Settings";
}

function wphobby_field_output() {
  $options = get_option( 'wphobby_settings_form_data' ); 
?>
  <input type='text' name='wphobby_settings_form_data[wphobby_field_text]' value='<?php echo $options['wphobby_field_text']; ?>'>
<?php
}

function wphobby_panel_general() {
?>
  <div class="inner-panel">
    <h3>General Settings</h3>
    <form id="wphobby-panel" method="post" action="options.php">
      <?php
      settings_fields( 'wphobby_settings_form' );
      do_settings_sections( 'wphobby_panel_general' );
      submit_button( 'Save' );
      ?>
    </form>
  </div>
<?php
}

OK, We already have the custom admin page and custom settings now.

Conclusion

We just set an input type field on this tutorial, you can add more other types data on your own settings like select, option, textarea and etc.

In this article, we have introduced the WordPress Settings API. If you have more thoughts about this topic or need any help, please leave a comment or contact us directly. Thanks for Reading, Happy Coding.

Categories

Share Your Valuable Opinions