Building an options page for a plugin can be a daunting prospect – you want to build it in a way that works for your plugin, but also so that it works well within the WordPress UI. Many plugin authors get this painfully wrong and build incredibly unfriendly options pages that look terrible and really don’t fit into the WordPress dashboard design at all.
After putting loads of work into refactoring Seriously Simple Podcasting for the v2.0 release, I’ve developed a single class that will help you to create a versatile and user-friendly options page for your plugin that fits neatly into the WordPress dashboard. All you need to do is add this class to your plugin and modify the array of settings to handle the data that your plugin needs.
This isn’t a tutorial post, so I’m not going to walk you through this step by step, but if you use the class below you can create a WordPress options page with every type of field possible with almost no effort on your part. The field types that this class can create are:
- Text field
- Password field
- Secret text field (where the saved data is not displayed on the page)
- Text area
- Single checkbox
- Multiple checkboxes
- Select box
- Multiple select box
- Radio buttons
- Number field
- Colour picker (using WordPress’ built-in colour picker script)
- Image upload (that saves the image to your site’s media library)
I have included demo fields in the class so you can see how each field type works and what parameters you need to define for each field type – all you need to do is delete these fields and create your own.
Here is the class in its entirety:
To add this options page to your plugin, simply add this line to your plugin’s index file after you have added an include for the class file:
Once you have added all this code you will find the new options page in the dashboard menu by going to Settings > Plugin Settings.
The options that are saved from this page use the
$settings_base variable in the class (in this case, ‘
wpt_‘)followed by the id field of each setting for their name. So the option name for the first field would be ‘
wpt_text_field‘, which you can fetch using
get_option( 'wpt_text_field' );.
If you can think of any other field types that you think should be included in this class then let me know in the comments.