Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.

WordPress Plugin Development Tutorial – Part 2

In this second part of the WordPress Plugin Development Tutorial series, we’ll look at how to create a WordPress plugin settings page for our ‘Content Enhancer’ plugin (check out Part 1 to see how we got started with developing this plugin).  Most WordPress (WP) plugins feature a settings page – this allows the user (typically the admin user) to configure the plugin’s behaviour by saving plugin option settings.

Saving Plugin Options

To save a plugin option, we simply use the following function call:

The first parameter is the option name, and must be unique to all options saved in WordPress – for this reason it is a good idea to prefix it with the name of your plugin. The 2nd parameter is the option value, which can be a string, an object, an array or a serialized value.

Note that an add_option() function exists, however we’ll use update_option which automatically updates an option if it already exists, making our life a bit easier. To retrieve a saved WordPress option, we simply use the following:

Here, the name of the option is the only required field (if the option doesn’t exist, FALSE is returned, so always make sure to check for that).

To delete a WordPress plugin option, we can use the delete_option(‘{option_name}’) function call (be careful with this one, of course). Now that we know how to create, read, update & delete (CRUD) plugin options, we can almost get started with the actual options settings page for our ‘Content Enhancer’ plugin. However, first we need to create a WordPress plugin menu to be able to easily reach our settings page.

Creating a WordPress Plugin Menu

So now we need to decide where to put the link to our options page. We have two choices here – either in its own top-level menu (at the same level as the other menu items in the WP admin panel, on the left), or as a submenu of an existing top-level menu, e.g. ‘Settings’ => My Plugin Settings. We will opt for the second option, since using a top-level menu (with its own submenus) is more appropriate for plugins with more than one settings page. Our Content Enhancer will simply have one settings page.

Adding A Submenu to Existing Top-Level Menu

To add a menu title ‘Content Enhancer’ to our current top-level ‘Settings’ menu, we use the following PHP code (add this code to your {unique-plugin-name}.php file):

After adding the code above, we should have a menu item appear below ‘Settings’:

WordPress Plugin Development Tutorial – Part 2
Now that we have the menu item in place, we need to create the actual settings page. To do so, we need to initialize our plugin settings. Add the following code to your file:

Note that the unique group name is used to initialize the settings during the form create, which we will now complete. Add the following code to your settings file:

Hit save (in our case we’re saving content-enhancer.php), and go ahead and click on the menu item ‘Content Enhancer‘ under the Settings menu. You should now see a settings page for our option, as below (isn’t it exciting?!):

WP Plugin Options Settings | Twoggle



Voila! We now have a basic plugins options settings page. Here we can enter the HTML we want to appear at the top and bottom of our WordPress blog posts – go ahead and try it! Our function content_enhancer_sanitize_options() takes care of unintended user input and will only allow a subset of HTML tags (most commonly used) to be entered. For more info, see wp_kses.

After saving the options settings, have a look at the wp_options table in your MySQL database, you will notice two records have been added for these two options.

Now that we have the plugin option settings mastered, we can move on to WordPress Plugin Development Tutorial – Part 3, where we will make our plugin do its job – that is show pre-defined HTML at the top and bottom of posts.

Submit a Comment