Wordpress services, tutorials and news

Adding a form to the WordPress admin to save new options

In one of the previous tutorials I have shown how to create a new page in the WordPress Admin dashboard where you can create additional settings fields. If you followed that tutorial, you probably now have an empty page that shows in the WordPress admin menu.

In this tutorial I will explain how to create a form and save the values to the WordPress database.

Do you have complex settings or easy ones to add to the WordPress admin?

If you only have a few settings to save, then you could save them to the standard WordPress options table. If you need to perform complex operations or complex settings it’s better to create your own tables (will discuss this in a future tutorial).

Creating the form

Let’s create a regular form and add it to the admin page we have created in this tutorial – the empty page code looks like this:

<div class=”wrap”>
<h2>WPS Poll Admin</h2>
<p>Here comes the options page content</p>
</div>

Let’s replace the <p>Here comes the options page content</p> with the form that has a field for the question text and a submit button:

<form action=”” method=”post” id=”wps_poll_question”>
<h3><label>Poll question</label>
<input type=”text” id=”wps_poll_question” name=”wps_poll_question” value=”<?php echo esc_attr(get_option(‘wps_poll_question’));?>”/></h3>
<p><input type=”submit” name=”submit” value=”Save” /></p>
</form>

Because we have a very simple form, we will save the content to the regular WordPress options table, so we can let WordPress handle to form submission process by setting the form action to options.php. The next thing to do is to handle the form sanitization.

Handing the form sanitization

The good news is that WordPress has the ability to handle the form submission sanitization, so you don’t need to code that much, just use the built in capabilities. Let’s create a function called wps_poll_start and use the register_setting WordPress function; the first parameter is the options group (so let’s name it wps_poll_options) and the second one the the options field. The options field should have the same name as the naming inside the form we have created:

function wps_poll_start () {
register_settings(‘wps_poll_options’, ‘wps_poll_question’);
}

You also need to add an action that will actully run the wps_poll_start function – let’s register it at the admin_init hook:

add_action(‘admin_init’,’wps_poll_start’);

Adding the sanitization process to the form

Right now we have created the sanitization functions, the next thing to do is to add the sanitization process to the actual form. To do this, we only need to add a bit of php right at the begining of the form: <?php settings_fields(‘wps_poll_options’); ?> which basically is a call to the sanitization

Here is how all the code looks:

<?php
function wps_poll_start () {
register_settings(‘wps_poll_options’, ‘wps_poll_question’);
}

add_action(‘admin_init’,’wps_poll_start’);

function wps_poll_options_page () {
?>
<div class=”wrap”>
<h2>WPS Poll Admin</h2>
<p>Here comes the options page content</p>
<form action=”options.php” method=”post” id=”wps_poll_question”>
<?php settings_fields(‘wps_poll_options’); ?>
<h3><label>Poll question</label>
<input type=”text” id=”wps_poll_question” name=”wps_poll_question” value=”<?php echo esc_attr(get_option(‘wps_poll_question’));?>”/></h3>
<p><input type=”submit” name=”submit” value=”Save” /></p>
</form>
</div>
<?php
}
?>

Related Posts

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Wordpress templates

responsive_wp_468x60