Develop A Simple WordPress Plugin Admin Panel

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

Set Up Admin Menu:

The 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 a few codes on our main plugin php page, which is usually in {plugin-name}.php format. Let’s 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';
}
Code language: PHP (php)

As you can see above, we first added an action for the 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 the current user’s permission and show the options 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 use the admin area’s ‘Settings’->’Like FB’ menu option.

Create Settings Template For WordPress Plugin Admin Panel:

Let’s move ahead and create the settings template. As we are creating a plugin for 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 the settings page template with WordPress standards:

<div class="wrap">
<?php screen_icon(); ?>
<h2>Welcome To Like FB Plugin Administration Page</h2>
</div>Code language: HTML, XML (xml)

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:

Let’s now create the settings option form. Here, I am using two simple checkbox options; you can change them 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>Code language: HTML, XML (xml)

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

Process Posted Data And Database Integration:

Now, we must add code to process the posted data and save them in the WordPress database. There are a few different ways to work with WordPress databases. Such as:

• WordPress Post Meta Data: The WordPress database contains a table with post-specific settings, and we can add options there using the WordPress API function. It uses the ‘wp_postmeta’ table.
• WordPress Option Data: These settings 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 heavyweight WordPress plugin that may require a different table structure, we will need to create a separate database table in the WordPress database to manipulate the plugin’s data there.

For this tutorial, we will 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);
}Code language: PHP (php)

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

You will also notice that, in case data is not posted, we have added code to retrieve the options instead, so now it needs 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>Code language: JavaScript (javascript)

Further References:

I hope this simple guide to WordPress plugin admin panel development will help you enhance your plugin development skills to a higher level. For more in-depth references, follow the links below.

• WordPress Plugin Developers Blog
• WordPress Codex

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