Tag: form

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.