Tutorial 2: How to Create WordPress Plugin Admin Panel

How to create wordpress plugins, few days back I explained about the basic structure of a plugin. We activated the plugin and integrated its function in our Single.php file also. If you missed that tutorial, I’ll surely recommend to go through it and back here, as this is a sequential part of that tutorial.

Tutorial: How to Create WordPress Plugins

Well, in this tutorial, I’ll show you how to create Admin Panel Settings for the My First Plugin. Below is a list of overview which I will cover up during the tutorial:

• We create two functions, one to add a new database field and other to remove the database field.
• A function to create Option Setting Menu item in Dashboard > Settings.
• Function to output the saved data in database.

Here we go, so as to complete the Inventory, we have for the Plugin. When the plugin is activated, we have to create database field for our My First Plugin Data. Also, when the plugin is deactivated, we will have to drop the database field. Below is the code, which we will write in my-first.php file we created in our last tutorial.

Code-Activate/Deactivate Plugin

   1: <?php

   2:

   3: /* When plugin is activated */

   4: register_activation_hook(__FILE__,'my_first_install');

   5:

   6: /* When plugin is deactivation*/

   7: register_deactivation_hook( __FILE__, 'my_first_remove' );

   8:

   9: function my_first_install() {

  10: /* Creates new database field */

  11: add_option("my_first_data", 'Testing !! My Plugin is Working Fine.', 'This is my first plugin panel data.', 'yes');

  12: }

  13:

  14: function my_first_remove() {

  15: /* Deletes the database field */

  16: delete_option('my_first_data');

  17: }

  18:

  19: ?>

The above code explains about the function call when plugin is activated and when it is deactivated. When it is activated, my_first_install function is called, while my_first_remove function is called when the plugin is deactivated.

Moving further with the list, we have to create and menu item in admin panel area and also the interface with the basic configurations. Below code will create a menu item under WordPress Admin Panel > Settings.

Code-Add Admin Panel Menu Item

   1: <?php

   2: if ( is_admin() ){

   3:

   4: /* Call the html code */

   5: add_action('admin_menu', 'my_first_admin_menu');

   6:

   7: function my_first_admin_menu() {

   8: add_options_page('My First', 'My First Settings', 'administrator',

   9: 'my-first', 'my_first_plugin_page');

  10: }

  11: }

  12: ?>

In the above code, is_admin function checks whether the user logged in as administrator or not. Further it list the Menu Item with name “My First Settings”.

Now our next step is to create a Plugin Interface page for the updating the basic configurations required by the Plugin. I’ll create a function which creates Admin menu Interface page.

Code-Plugin Interface Settings Page

   1: /* Call the Plugin Interface Page Code */

   2: add_action('admin_menu', 'my_first_admin_menu');

   3:

   4: function my_first_admin_menu() {

   5: add_options_page('My First', 'My First Settings', 'administrator',

   6: 'my-first', 'my_first_plugin_page');

   7: }

   8: }

   9: ?>

  10:

  11: <?php

  12: function my_first_plugin_page() {

  13: ?>

  14: <div>

  15: <h2>My First Plugin Options Page</h2>

  16:

  17: <form method="post" action="options.php">

  18: <?php wp_nonce_field('update-options'); ?>

  19:

  20: <table width="510">

  21: <tr valign="top">

  22: <th width="92" scope="row">Enter Text:</th>

  23: <td width="406">

  24: <input name="my_first_data" type="text" id="my_first_data"

  25: value="<?php echo get_option('my_first_data'); ?>" />

  26: (ex. Hello World)</td>

  27: </tr>

  28: </table>

  29:

  30: <input type="hidden" name="action" value="update" />

  31: <input type="hidden" name="page_options" value="my_first_data" />

  32:

  33: <p>

  34: <input type="submit" value="<?php _e('Save Changes') ?>" />

  35: </p>

  36:

  37: </form>

  38: </div>

  39: <?php

  40: }

  41: ?>

  42:

The above code is the basic html page, and can be optimized and designed as per the requirements.

Now we are left with the Output, how to fetch the values from the database

Code-Fetch My-First Plugin Data

   1: <?php

   2:

   3: /* This calls my_first() function when wordpress initializes.*/

   4: function my_first()

   5: {

   6: echo get_option('my_first_data');

   7: }

   8:

   9: ?>

The code above is similar to the one we used in our previous tutorial. Hence, this completes our inventory list and the tutorial. You may now, refresh the site and

This ends our tutorial-2 for WordPress Plugin Development. For any queries or any other assistance, post comments as your feed-backs.