Develop A Simple WordPress Plugin Admin Panel

In this tutorial, we will explore how we to develop a simple WordPress plugin admin panel. This tutorial is not for complete beginners and I do assume/strongly recommend that, you already have gained some knowledge about how to create a simple WordPress plugin. I have recently created very simple settings page for my own like fb WordPress plugin and I will share that experience here.

Set Up Admin Menu:

First thing to develop the administration area is to give the user menu option to navigate to the settings page. For this, we will have to add few codes on our main plugin php page, which is usually in {plugin-name}.php format. Lets see the code example for this:

add_action( 'admin_menu', 'like_fb_menu' );

function like_fb_menu() {
	add_options_page( 'Like FB Plugin Options', 'Like FB', 'manage_options', 'like-fb-option', 'like_fb_plugin_options' );
}

function like_fb_plugin_options() {
	if ( !current_user_can( 'manage_options' ) )  {
		wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
	}
	include __DIR__."/options.php";
} 

as you can see above, we first added an action for admin menu creation event. in the handler, we added our plugin option details with add_options_page method. and in the target method specified here do the real task of checking current user’s permission and show the option page. We have separated the settings page into a different options.php file.

well, as we have completed this phase, we should now be able to navigate to the settings page(which is blank at this moment). I will on admin area’s ‘Settings’->’Like FB’ menu option.

Create Settings Template For WordPress Plugin Admin Panel:

Lets move ahead to create the settings template. As we are creating a plugin of WordPress CMS, we will want to keep its look and feel in our implementation as well. So, let us use a small code snippet for settings page template with WordPress standard:

<div class="wrap">
<?php screen_icon(); ?>
<h2>Welcome To Like FB Plugin Administration Page</h2>
</div>

Now if you have a look in the administration area, you should be able to see a nice screen icon of WordPress and header text at the top of the screen as like below:

Lets now create the settings option form. Here I am using two simple check box option, you can change it with your own settings controls.

<fieldset>
    <legend>General Settings</legend>
    <form method="post" action=""> 
        <input type="checkbox" name="like_fb_show" checked='checked' /> &nbsp; <span> Show Facebook Like Button </span>
        <br /><br />
        <input type="checkbox" name="like_gplus_show"  /> &nbsp; <span> Show Google+ Button </span>
        <p><input type="submit" value="Save" class="button button-primary" name="submit" /></p>
    </form>
</fieldset>

We have kept the form action to an empty string, so that, after submission, it post the data to same page/URI. The name of the controls should be very unique, so that they doesn’t conflict with others. Also, we have added CSS class to submit button, which will help it render in WordPress look and feel way.

Process Posted Data And Database Integration:

Now, we will have to add code to process the posted data and save them in WordPress database. They are few different way to work with WordPress database. Such as:

• WordPress Post Meta Data: There is a table in WordPress database which contains post specific settings and we can add options there with wordpress’s given API function. It uses the ‘wp_postmeta’ table.
• WordPress Option Data: The settings which aren’t post specific and are global to the application, we can use these options to save/retrieve our plugins data as well.
• Create Separate Database Table: If you are creating a heavy weight WordPress plugin which may require a different table structure, we will need to create separate db table in WordPress database to manipulate the plugins data there.

For this tutorial, we will simply use the wordpress options table (‘wp_options’) to retrieve and save our options. Add the following code snippet at the top of the options page.

$fb_opt_name = "like_fb_show";
$gp_opt_name = "like_gplus_show";

if(isset($_POST["submit"])){ 
    $fb_show = $_POST[$fb_opt_name];
    update_option($fb_opt_name, $fb_show);
    $gplus_show = $_POST[$gp_opt_name];
    update_option($gp_opt_name, $gplus_show);
    
    echo '<div id="message" class="updated fade"><p>Options Updates</p></div>';
}
else{
    $fb_show = get_option($fb_opt_name);
    $gplus_show = get_option($gp_opt_name);
}

Initially, there will be no options in the database table for our plugin. In that case, ‘update_option’ will automatically call the ‘add_option’ method to insert them. From then on, each time, it will only update the existing options. So, we don’t need to use the ‘add_option’ method ourselves at all. We have added class to the shown message block as well to give the wordpress look and feel.

You will also notice that, in case of data not posted, we have added code to retrieve the options instead, so, now it need to be added to our existing template. So, as a complete functional page, our options.php page should be something like as follows:

<?php
$fb_opt_name = "like_fb_show";
$gp_opt_name = "like_gplus_show";

if(isset($_POST["submit"])){ 
    $fb_show = $_POST[$fb_opt_name];
    update_option($fb_opt_name, $fb_show);
    $gplus_show = $_POST[$gp_opt_name];
    update_option($gp_opt_name, $gplus_show);
    
    echo '<div id="message" class="updated fade"><p>Options Updates</p></div>';
}
else{
    $fb_show = get_option($fb_opt_name);
    $gplus_show = get_option($gp_opt_name);
}
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>Welcome To Like FB Plugin Administration Page</h2>
<br />
<br />
<div class="like-fb-left">
    <fieldset>
            <legend>General Settings</legend>
        <form method="post" action=""> 
            <input type="checkbox" name="<?php echo $fb_opt_name; ?>" <?php echo $fb_show?"checked='checked'":""; ?> /> &nbsp; <span> Show Facebook Like Button </span>
            <br /><br />
            <input type="checkbox" name="<?php echo $gp_opt_name; ?>" <?php echo $gplus_show?"checked='checked'":""; ?> /> &nbsp; <span> Show Google+ Button </span>
            <p><input type="submit" value="Save" class="button button-primary" name="submit" /></p>
        </form>
    </fieldset>        
</div>

Further References:

Hope this simple guide to wordpress plugin admin panel development will help you enhance your plugin development skill to a higher level. For more in-depth references, you can follow the links below.

• Worpdress Plugin Developers Blog
• WordPress Codex

Feel free to ask any questions here by commenting. Happy coding 🙂