WordPress Plugin – Simple Option Page

After writing your plugin maybe you want to allow the users to costumize it. One way to do this is including an option page on the wordpress admin section.
To write a simple option page I’ll use the previews example  Happy Face Replacer Plugin. And I’ll allow the user to set the happy face image url.

Admin Menus/Submenus

First of all you need to figure out where is the best place to include your administration page on the wordpress admin sections: SettingsManage, PluginsPresentation, Write, Users.
In this case I’ll use the “Manage” panel.

The Action

To tell wordpress about your option page you need to use an action ‘hook’ called admin_menu (on the previews post you can read more about wordpress actions, filters and hooks).
In our main plugin file “happy_face_replacer.php” we need to include something like this:

add_action('admin_menu', 'function_to_create_your_menu');

Inside of the ‘funtion to create your menu’ you need to use one of the ‘add_menu/submenu_page’ functions :

add_menu_page(page_title, menu_title, access_level/capability, file, [function]);

for the menus or:

add_submenu_page(parent, page_title, menu_title, access_level/capability, file, [function]);

for the submenus.

In this example we need to call the function:

add_management_page

As your plugin your admin menu, page and functions must have a unique name.

Let’s use:
Happy Face Replacer Page” as the page_tile.
Happy Face Replacer Menu” as the menu_title.
happy_face_replacer_setting_file” as the file. This is the file that handles the display of the menu page content but in this case we will use the same file.
happy_face_replacer_setting” as funtion name (function parameter is optional, but if it is not supplied, then WordPress will basically assume that including the PHP file will generate the administration screen, without calling a function. Most plugin authors choose to put the page-generating code in a function within their main plugin file).

The access_level/capability refers to the user level or the capability to show and use this menu. We will use the number 10 corresponding to “admin user”.

Then our hooks action and functions could be:

<?
add_action('admin_menu', 'function_to_create_your_menu');

function function_to_create_your_menu (){

add_management_page('Happy Face Replacer Page', 'Happy Face Replacer Manu', 10, 'happy_face_replacer_setting_file', 'happy_face_replacer_setting');

}

function happy_face_replacer_setting (){

/*  The content of your setting page here */

}

?>

The Form

Now we need to create our custom form to receive the values that modifies the plugin. The html tags on your Option Page reponds to the css files of the admin section. So, the div, tables, and other html tags will look like the others wordpress admin page if you want.
In this case we will process the content of the form in the same page, then our form “target”  parameter is “_self” .
Here is the simple form.

<div class="wrap">

<form method="post" name="options" target="_self">

<h2>Select Your Better Happy Face</h2>

<table width="100%" cellpadding="10" class="form-table">

<tr>
<td align="left" scope="row">

<label>Image URL</label><input name="happy_face_image_url" value="<?php echo $happy_face_image_url_saved ?>" />

</td> 
</tr>

</table>
<p class="submit">

<input type="submit" name="Submit" value="Update" />

</p>

</form>

</div>

Get and Update Options

WordPress allows to save some amount of data on the options table, but if you need more than that you can implement your own table on the database. Read more on Creating Tables with Plugins.

The simplest way to save you options is using the functions add_optionupdate_option and get_option that allows to save and read data easily.  This allows us to replace the image url on the main function “happy_face_replacer” by the value saved:

$happy_face_image = "<img src='".get_option('$happy_face_image_url_op')."'>";

Now, the only thing we need is to check if the form was submitted in order to update the “happy face image url” on the database and print the message “Option Saved” . So, let’s add this piece of code at the top of the form:

<?php 
$happy_face_image_url_saved = get_option('$happy_face_image_url_op');

if(isset($_POST['Submit']))  {

        $happy_face_image_url_saved = $_POST["happy_face_image_url"];

        update_option( '$happy_face_image_url_op', $happy_face_image_url_saved );

?>

<div class="updated"><p><strong><?php _e('Options saved.', 'mt_trans_domain' ); ?></strong></p></div>

<?php  }  ?>

Here is the final code and other related tutorials:
happy face replacer

Creating Options Pages
Adding Administration Menus
Plugin Resources

17 thoughts on “WordPress Plugin – Simple Option Page”

  1. Greate post. Keep posting such kind of info on your page.
    Im really impressed by your blog.
    Hey there, You have done an incredible job. I will certainly digg it and in my view suggest to my friends.
    I’m sure they’ll be benefited from this web site.

    Visit my web-site – pawn shops in ri

Leave a Reply

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