Tag: admin-page

WP: Add A Form To The Plugin Admin Page

In the previous post, I created a plugin page. And now I’ve added a form to it with the help of the following code:

<?php 
/*
Plugin Name: Noice Plugin
Plugin URI: https://csmumbai.com
Description: This plugin is Noice!
Author: Omkar Bhagat
Version: 1.0
*/ 
 
add_action('admin_menu', 'noice_create_menu');
 
function noice_create_menu() {
	add_options_page('Noice Plugin Title', 'Noice Plugin Settings', 'administrator', __FILE__, 'noice_settings_page');
}
 
function noice_settings_page() {
    echo '<h2>Hello Noice Person!</h2>';
?>
 
<form method="post" action="options.php">
 
    <table class="form-table">
 
        <tr>
        <th>First Field: </th>
        <td><input type="text" name="g_first_option" value="<?php echo get_option('g_first_option'); ?>" /></td>
        </tr>
 
        <tr>
        <th>Second Field: </th>
        <td><input type="text" name="g_second_option" value="<?php echo get_option('g_second_option'); ?>" /></td>
        </tr>
 
    </table>
        
    <p class="submit">
        <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
 
</form>
 
<?php } ?>

The lines which have been changed or added are highlighted in the code above. This gets us a form as follows:

At this point it does nothing because I’m yet to register these fields. In other words, WordPress doesn’t know what to do with these fields when the form is submitted.

<?php 
/*
Plugin Name: Noice Plugin
Plugin URI: https://csmumbai.com
Description: This plugin is Noice!
Author: Omkar Bhagat
Version: 1.0
*/ 
 
add_action('admin_menu', 'noice_create_menu');
 
function noice_create_menu() {
    add_options_page('Noice Plugin Title', 'Noice Plugin Settings', 'administrator', __FILE__, 'noice_settings_page');
    add_action( 'admin_init', 'noice_form_settings' );
}
 
function noice_form_settings() {
    register_setting('noice_form_settings_group', 'g_first_option');
    register_setting('noice_form_settings_group', 'g_second_option');
}
 
function noice_settings_page() {
    echo '<h2>Hello Noice Person!</h2>';
?>
 
<form method="post" action="options.php">
 
    <?php settings_fields('noice_form_settings_group'); ?>
 
    <table class="form-table">
 
        <tr>
        <th>First Field: </th>
        <td><input type="text" name="g_first_option" value="<?php echo get_option('g_first_option'); ?>" /></td>
        </tr>
 
        <tr>
        <th>Second Field: </th>
        <td><input type="text" name="g_second_option" value="<?php echo get_option('g_second_option'); ?>" /></td>
        </tr>
 
    </table>
        
    <p class="submit">
        <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
 
</form>
 
<?php } ?>

Here’s a short explanation of this code:

  1. Line 14: Added a way to call noice_form_settings function as admin_init is the action hook which is triggered before any other hook when a user accesses the admin area.
  2. Line 17-20: Registering the form fields with WP
  3. Line 28: This puts some hidden fields in the form to check if the request is valid. More on this here and here.

Entering something in the form and saving it returns this page:

The options will stay there even if I deactivate and reactivate the plugin. That’s fine but I’ll need to remove the data when the plugin is deleted/uninstalled. I’ll work on that in a future post.

Note: I can find this data in the database by going to wp_options table.

WP: Create A Plugin Admin Page

To create a WordPress plugin admin page, I’ll need to first add a menu item in the WP-Admin dashboard.

Instead of creating a totally new item using add_menu_page, I’m going to add my menu item under Settings option with the help of add_options_page function as follows:

<?php 
/*
Plugin Name: Noice Plugin
Plugin URI: https://csmumbai.com
Description: This plugin is NOICE!
Author: Omkar Bhagat
Version: 1.0
*/ 
 
 
// ONE
add_action('admin_menu', 'noice_create_menu');
 
// TWO
function noice_create_menu() {
	add_options_page('Noice Plugin Title', 'Noice Plugin Settings', 'administrator', __FILE__, 'noice_settings_page');
}
 
// THREE
function noice_settings_page() {
    echo '<p>Hello, this is a Noice Plugin!</p>';
}
 
?>

Here’s what I basically did:

  1. Added an action hook for admin_menu to call noice_create_menu
  2. noice_create_menu creates an options page for us with the following arguments:
    1. Page Title
    2. Menu Item Name
    3. Who can access it?
    4. Slug name (I used the file name here).
    5. Function to call to output content on the page
  3. noice_settings_page outputs content on the page

This results in the following menu item under the Settings option in WP-Admin dashboard –

And clicking on this new menu items takes me to –

Notice three things here:

  1. Output content – Hello, this is a Noice Plugin!
  2. Page title in the tab – Noice Plugin Title
  3. And the slug at the end of the URL – noice-plugin.php

This results in a simple WordPress admin page that prints some text. Let’s see how to do more with this in the next post.