How to build a WordPress plugin administration section

Getting started with WordPress plugin development

By  

Source: http://colorburned.com

In the last post I showed you how to get started building a WordPress plugin from scratch. Now I’d like to show you how to add administrative features to the back end of WordPress so that your plugin can be managed using the standard user interface.

During the file structure setup portion of the previous post, we included a folder labeled “admin” and a file named “super-plugin-admin.php”:

+ super-plugin
     + admin
         - super-plugin-admin.php
     + img
         - icon.png
     + js
         - super-plugin.js
- super-plugin.php
- readme.txt

You can add any additional support files that you need for your plugins administration under the admin folder, including things like images, css, and javascript. While it’s not necessary to put your administration files under a separate directory, I find it much more organized to go that route than to just cram everything into the root of your plugin directory.

Initialize your Admin features

Just like with the client side portion of the plugin, the admin features can be initialized within your main super-plugin.php file. You can do this either by placing the necessary code directly inside of this file, or by creating a new file to hold your administrative settings and simply reference the file from within the main super-plugin.php script.

For simplicities sake, we will do our administrative work in the same super-plugin.php file.

The first thing to do is to provide some way for the user to get to your settings page. We can do this by registering a menu item in the administration section of WordPress.

To do this we will

1) Create a function to register the menu
2) Create an action hook to trigger the registration
3) Create a function to build the HTML for the page

//1
function super_plugin_menu(){
     add_options_page(Super Plugin Options', 'Super Plugin', 'manage_options', 'super-plugin-menu', 'super_plugin_options');
}

//2
add_action('admin_menu','super_plugin_menu');

//3
function super_plugin_options(){
     include('admin/super-plugin-admin.php');
}

Step 1 probably needs a little explanation. The add_options_page function is a WordPress function which takes the following parameters:

  • Page Title (a string for the title tag)

  • Menu Title (a string for the menu label)

  • Capability (a string for the permissions required to access this menu)

  • Unique Identifier (a unique string for the menu slug)

  • Callback Function (the function to call when the menu is clicked)

So as you can see, when you click on the menu item we’ve just created, the function super_plugin_options() will be called. All that function does is pull in the admin file we created in admin/super-plugin-admin.php.

Build your Admin interface and Actions

To build your administrative interface, start by populating the super-plugin-admin.php file with HTML. A fairly standard way to begin this file is with the following HTML:

<div class="wrap">
<h2>Super Plugin</h2>
<h3>Super Plugin Options</h3>
</div>

After the H3 tag you can start populating the available options for your plugin. A simple scenario is the case where you need to store a few option values for your plugin. You can do this by using WordPress’s built in option management framework.

First we need to register our settings for the admin section. Back in the super-plugin.php file, add to the super_plugin_menu() function another action hook and the actual settings function:

function super_plugin_menu(){
add_options_page(Super Plugin Options', 'Super Plugin', 'manage_options', 'super-plugin-menu', 'super_plugin_options');

//call register settings function
add_action( 'admin_init', 'register_mysettings' );
}

function register_mysettings() {
//register our settings
register_setting( 'super-settings-group', 'new_option_name' );
register_setting( 'super-settings-group', 'some_other_option' );
register_setting( 'super-settings-group', 'option_etc' );
}

Now, in your super-plugin-admin.php file you can take advantage of the WordPress settings API to do the heavy lifting for you. By creating an HTML form which posts to the options.php page, you can quickly create the settings page for your plugin:


<div class="wrap">

<h2>Super Plugin</h2>

<h3>Super Plugin Options</h3>

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

<?php settings_fields( 'super-settings-group' ); ?>

<?php do_settings( 'super-settings-group' ); ?>

<table class="form-table">

<tr valign="top">

<th scope="row">New Option Name</th>

<td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>

</tr>

<tr valign="top">

<th scope="row">Some Other Option</th>

<td><input type="text" name="some_other_option" value="<?php echo get_option('some_other_option'); ?>" /></td>

</tr>

<tr valign="top">

<th scope="row">Options, Etc.</th>

<td><input type="text" name="option_etc" value="<?php echo get_option('option_etc'); ?>" /></td>

</tr>

</table>

<?php submit_button(); ?>

</form>

</div>

Conclusion

We’ve now created a WordPress plugin which can be managed via a custom menu in the back end of WordPress and can even create and save custom settings for the plugin as well. While this example plugin doesn’t do much, it’s all hooked up to start performing any task you may need.

Read more of Matthew Mombrea's ByteStream blog and follow Matt on Twitter (@mombrea) and Google+. For the latest IT news, analysis and how-tos, follow ITworld on Twitter and Facebook.

Don't miss...

Why you should jailbreak your Apple TV - and how to do it
Why you should jailbreak your Apple TV - and how to do it
Apple iOS app review - frustrating and bad for your health
Apple iOS app review - frustrating and bad for your health
The best home backup plan options
The best home backup plan options
Photo Credit: 

smashingmagazine.com

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question