Samuel Elh Blog

WordPress, bbPress, BuddyPress, JavaScript tutorials and snippets

How to create a WordPress settings page for your WordPress plugin

How to create your first WordPress plugin and settings page

By the end of this tutorial, we’ll be able to:

  • Initiate a WordPress plugin
  • Create an options/settings page for this plugin

Requirements:

  • Some basic knowledge of HTML

To get you guys started, browse the root of your site or local installation, and then browse wp-content/plugins/ folder, and then, create a new folder there with the name of your plugin. I am going to name it my-awesome-plugin

creating my-awesome-plugin wordpress plugin folder

Creating my-awesome-plugin wordpress plugin folder

Next, open this file you have just came to create, and there, we’re going to open a new PHP file where we could add our basic code.

In the folder my-awesome-plugin, create a new PHP file and name it what ever you could think of, index.php, awesome.php etc; WordPress will look for this file where our actions and filters will reside..

I am going to name it loader.php for the sake of this tutorial. I am running a WAMP server on windows 7, to let you know

creating main plugin file WordPress

creating main plugin file WordPress

Now, there are some basic requirements for a WordPress plugin to work, some tags that you need to add information about your plugin to, in order for WordPress to accept it:

/*
Plugin Name: Your plugin name
Plugin URI: Your plugin link (URI)
Description: Information about your plugin
Author: Your name
Version: version number
Author URI: Your link
*/

Now we will add information about my awesome plugin to the above snippet:

/*
Plugin Name: My awesome plugin
Plugin URI: http://blog.samelh.com
Description: This is my awesome plugin, the first one I create btw :/
Author: Samuel Elh
Version: 0.1
Author URI: http://samelh.com
*/

Great!! and we have some exciting news, WordPress has recognized the plugin and you can activate it:

my awesome plugin recognized by WordPress, activated

my awesome plugin recognized by WordPress, activated

OK great, again. Now, this tutorial is not supposed to teach you what you should do in your plugin; you should be creating and think of something cool and then, play around and have fun with the code and get that done. Instead, we’re going to show you how to add an admin settings page in WordPress admin interface, and add options fields which you can update.

First off, in the process of adding this options page, we will apply admin_menu action hook and add_options_page to register an admin menu and an admin page in the settings section:

add_action('admin_menu', function() {
  add_options_page( 'Plugin settings page Title', 'Menu item name', 'manage_options', 'slug', 'admin page callback' );
});

So, filling out those information for our plugin:

add_action('admin_menu', function() {
	add_options_page( 'My awesome plugin settings', 'my awesome plugin', 'manage_options', 'my-awesome-plugin', 'my_awesome_plugin_page' );
});

The saving the code, we can see that a new item is added to settings menu. That’s our awesome plugin!

my awesome plugin settings menu item

my awesome plugin settings menu item

Great. now we want to get started with the settings updating process. First, we call admin_init action hook to register a settings group for our plugin, thus we register the first option “my awesome plugin name”:

add_action( 'admin_init', function() {
    // register options here, copy and paste the following line and to add options beside map_name (map: my awesome plugin 😉 )
    register_setting( 'my-awesome-plugin-settings', 'map_name' );
});

Great. now is the time to build the markup code for the admin page. remember we talked earlier about a callback function we named my_awesome_plugin_page ? we are going to use it for the main page:

function my_awesome_plugin_page() {
 ?>
   <div class="wrap"&amp;amp;gt;
     <!-- markup code goes here -->
   </div>
 <?php
}

Now we will add an HTML form with fields, the form action will be options.php, method will be post, and we will add input fields and set their name attributes to match our options that we registered through register_settings function. We will also want to call settings_fields and do_settings_sections functions inside our form and add the settings field name we registered, as a parameter for those functions:

function my_awesome_plugin_page() {
 ?>
   <div class="wrap"&amp;amp;gt;
     <form action="options.php" method="post"&amp;amp;gt;
       <?php
       settings_fields( 'my-awesome-plugin-settings' );
       do_settings_sections( 'my-awesome-plugin-settings' );
       ?>
     </form>
   </div>
 <?php
}

Now, we add the fields. You can use various type of HTML5 tags:

  • <input type="text" .. />
  • <textarea></textarea>
  • <input type="email" .. />
  • <input type="number" .. />
  • <input type="checkbox" .. />
  • <input type="date" .. />
  • <input type="radio" .. />
  • <select><option>option</option></select>
  • <select multiple="multiple"><option>option</option></select

To make those fields work, add a name attribute containing the name of the option you have registered through register_setting function:

register_setting( 'my-awesome-plugin-settings', 'map_option_1' );

Then, add the option in the name (map_option_1) and to get the value (get_option( 'map_option_1' )):

<input type="text" name="map_option_1" value="<?php echo esc_attr( get_option( 'map_option_1' ) ); ?>

And we do the same thing with other tags, ie we use textarea for long texts, etc..

Don’t forget to add a button at the end for saving settings, You have 3 options to do that:

  • <input type="submit" value="Save changes" />: input type submit,
  • <?php submit_button(); ?>: function echoing a paragraph containing an input for submitting the form,
  • <button>Save changes</button>: since the button is within the form, it will submit the form on-click.

But I highlight using the second, the function which echos a paragraph containing an input for submitting the form

Here’s a little code I put together for the tutorial’s settings page:

<?php

/*
Plugin Name: My awesome plugin
Plugin URI: http://blog.samelh.com
Description: This is my awesome plugin, the first one I create btw :/
Author: Samuel Elh
Version: 0.1
Author URI: http://samelh.com
*/

add_action('admin_menu', function() {
	add_options_page( 'My awesome plugin settings', 'my awesome plugin', 'manage_options', 'my-awesome-plugin', 'my_awesome_plugin_page' );
});


add_action( 'admin_init', function() {
	register_setting( 'my-awesome-plugin-settings', 'map_option_1' );
	register_setting( 'my-awesome-plugin-settings', 'map_option_2' );
	register_setting( 'my-awesome-plugin-settings', 'map_option_3' );
	register_setting( 'my-awesome-plugin-settings', 'map_option_4' );
	register_setting( 'my-awesome-plugin-settings', 'map_option_5' );
	register_setting( 'my-awesome-plugin-settings', 'map_option_6' );
});


function my_awesome_plugin_page() {
  ?>
    <div class="wrap">
	  <form action="options.php" method="post">

	    <?php
	      settings_fields( 'my-awesome-plugin-settings' );
	      do_settings_sections( 'my-awesome-plugin-settings' );
	    ?>
	    <table>
	    	
	    	<tr>
	    		<th>Your name</th>
	    		<td><input type="text" placeholder="Your name" name="map_option_1" value="<?php echo esc_attr( get_option('map_option_1') ); ?>" size="50" /></td>
	    	</tr>
	    	<tr>
	    		<th>Your biography</th>
	    		<td><textarea placeholder="Your bio" name="map_option_2" rows="5" cols="50"><?php echo esc_attr( get_option('map_option_2') ); ?></textarea></td>
	    	</tr>

	    	<tr>
	    		<th>Your age</th>
	    		<td>

		    		<select name="map_option_3">
		    			<option value="">&mdash; select &mdash;</option>
		    			<option value="10-20" <?php echo esc_attr( get_option('map_option_3') ) == '10-20' ? 'selected="selected"' : ''; ?>>10-30</option>
		    			<option value="20-30" <?php echo esc_attr( get_option('map_option_3') ) == '20-30' ? 'selected="selected"' : ''; ?>>20-30</option>
		    			<option value="30-50" <?php echo esc_attr( get_option('map_option_3') ) == '30-50' ? 'selected="selected"' : ''; ?>>30-50</option>
		    		</select>

	    		</td>
	    	</tr>

	    	<tr>
	    		<th>Your gender</th>
	    		<td>
	    			<label>
	    				<input type="radio" name="map_option_4" value="male" <?php echo esc_attr( get_option('map_option_4') ) == 'male' ? 'checked="checked"' : ''; ?> /> Male <br/>
	    			</label>
	    			<label>
	    				<input type="radio" name="map_option_4" value="female" <?php echo esc_attr( get_option('map_option_4') ) == 'female' ? 'checked="checked"' : ''; ?> /> Female
	    			</label>
	    		</td>
	    	</tr>

	    	<tr>
	    		<th>Do you love WordPress?</th>
	    		<td>
	    			<label>
	    				<input type="checkbox" name="map_option_5" <?php echo esc_attr( get_option('map_option_5') ) == 'on' ? 'checked="checked"' : ''; ?> />Yes, I love WordPress
	    			</label><br/>
	    			<label>
	    				<input type="checkbox" name="map_option_6" <?php echo esc_attr( get_option('map_option_6') ) == 'on' ? 'checked="checked"' : ''; ?> />No, I love WordPress
	    			</label>
	    		</td>
	    	</tr>

	    	<tr>
	    		<td><?php submit_button(); ?></td>
	    	</tr>

	    </table>

	  </form>
    </div>
  <?php
}

// That's it, have fun !!

And this is the options/settings page we have built:

my awesome plugin WordPress settings page options saved

Settings and fields saved

Feel free to leave your comments below..

Digital Ocean

Cheap Cloud SSD Hosting

Get a VPS now starting at $5/m, fast and perfect for WordPress and PHP applications

Sign Up with $10 Credit

1 Comment

  1. how am i going get access to the various form data

Leave a Reply

Your email address will not be published.

*

© 2017 Samuel Elh - Powered by WordPress, DigitalOcean & NameCheap

Theme by Anders NorenUp ↑

Subscribe to our mailing list

Sign up to receive updates about WordPress, free and premium plugins and themes in general and tips and tricks

* indicates required