Search

Create a Settings Options Page for a Plugin

Listen to this article

90% of the plugins you use, will have some options in the dashboard. It makes sense to allow users some setting options, to tailor the functionality of a plugin, according to their preference. This can increase the usability of a plugin.

Plugin Settings Options

 

Create an Options Page for a Plugin under Settings Menu

To create a sub-menu for your plugin in the dashboard ‘Settings’ menu, you should use the Settings API provided by WordPress. Using this API, you can register a new options page, with fields for settings. Additionally, you can add settings to an existing options page.

Short on time? Let our experts create a settings page for your plugin.

Discuss your project for free

[space]

Register Settings For a Plugin

For settings belonging to a particular plugin, you need to register the settings in a single group, with a unique id. For example, you need to write something like the following:

function myplugin_register_settings() {
   add_option( 'myplugin_option_name', 'This is my option value.');
   register_setting( 'myplugin_options_group', 'myplugin_option_name', 'myplugin_callback' );
}
add_action( 'admin_init', 'myplugin_register_settings' );

Here, all the settings fields for the plugin will be grouped under myplugin_options_group. In an options page, this id will be used to display the fields.

 

Creating an Options Page

An options page will be used to display all your settings. This page will be added as a sub-menu to the Settings menu.

function myplugin_register_options_page() {
  add_options_page('Page Title', 'Plugin Menu', 'manage_options', 'myplugin', 'myplugin_options_page');
}
add_action('admin_menu', 'myplugin_register_options_page');

myplugin_options_page will be the function that will be called, when this page is displayed.

function myplugin_option_page()
{
  //content on page goes here
}

 

Does this feel overwhelming? Let our experts do the grunt for you!

Get started!

 

Display Settings on the Option’s Page

To display your settings on the option page, you have to link the settings group id to the options page using settings_fields function. Then using get_option, you can get the value of the settings. Remember to format the fields and text on your options page.

<?php function myplugin_options_page()
{
?>
  <div>
  <?php screen_icon(); ?>
  <h2>My Plugin Page Title</h2>
  <form method="post" action="options.php">
  <?php settings_fields( 'myplugin_options_group' ); ?>
  <h3>This is my option</h3>
  <p>Some text here.</p>
  <table>
  <tr valign="top">
  <th scope="row"><label for="myplugin_option_name">Label</label></th>
  <td><input type="text" id="myplugin_option_name" name="myplugin_option_name" value="<?php echo get_option('myplugin_option_name'); ?>" /></td>
  </tr>
  </table>
  <?php  submit_button(); ?>
  </form>
  </div>
<?php
} ?>

[space]

Your resulting options page would look something like this:

Plugin Options Page

[space]

Using methods provided by Settings API can help you easily create a settings options page for your plugin. But this only allows you to make a sub-menu in the dashboard settings menu.

Stay tuned for more articles, to help you make a separate dashboard menu for your plugin and create multiple option pages.

Want to get started quickly? Our WordPress experts use scalable code to customize your WordPress plugins and ensure that your site is optimized for fast loading speed. Share your requirements with us today!

Share your requirements for free!

 

 

Bharat Pareek

Bharat Pareek

5 Responses

  1. Great example, comes up first first when googling how to do a plugin. Only thing is for a newbie it’s a bit odd to find a deprecated warnings get_screen_icon and screen_icon. A nice touch would be to remove that code.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »