Professional WordPress Plugin Development. Brad Williams

default Discussion Settings (options‐discussion.php) discussion default avatars Media Settings (options‐media.php) media default embeds uploads Permalink Settings (options‐permalink.php) permalink optional

      User Interface Concerns

      Electing to add your plugin settings to a separate page or to a core WordPress page is often a matter of choosing the right user interface for the right end user.

      When working on a site for a client, you may focus on delivering a key‐in‐hand CMS solution and not on explaining what is WordPress and what is a plugin extending its features. Adding your plugin settings to a core Settings page can enhance its integration into WordPress’ backend because it won't appear different from other core settings. From the client's point of view, your plugin is a core element just as any other built‐in feature.

      On the contrary, if you intend to make your plugin available for download, you can target people who probably understand the concept of adding new features to a core set. These people will naturally search for a custom menu where they can manage your plugin. If you opt for adding fields to an existing page, be sure to explicitly tell users about it, for instance in the plugin documentation.

      Removing Settings

      As a professional plugin developer, it's important to create a high‐quality experience for your users, which includes tasks that are rarely noticed. In this case you're going to learn how to remove settings that your plugin has created when it is uninstalled in WordPress.

      You're going to use register_uninstall_hook(), which was covered in Chapter 2, “Plugin Framework.” First you need to register your uninstall function as shown here:

      register_uninstall_hook( __FILE__, 'pdev_plugin_uninstall' );

      Next you'll use the unregister_setting() function of the Settings API. The unregister_setting()function accepts the following parameters:

       option_group: Settings group name used during registration

       option_name: Name of the option to unregister

You can simply grab these two values from when you registered your settings group. Let's look at the full function in action.

      // Deregister our settings group and delete all options function pdev_plugin_uninstall() { // Clean de-registration of registered setting unregister_setting( 'pdev_plugin_options', 'pdev_plugin_options' ); // Remove saved options from the database delete_option( 'pdev_plugin_options' ); }

      The unregister_setting() function will unregister your settings group from WordPress. You also need to remove the value from the database using delete_option(). Remember you are using the uninstall hook, which means this code will be executed only if the plugin is uninstalled. If the plugin is deactivated, the options will remain and be available should the user decide to reactivate the plugin.

KEEPING IT CONSISTENT

      They say consistency is one of the principles of good UI design. Creating a plugin for WordPress is no different, and it's a best practice to make your plugin match the WordPress user interface as closely as possible. This helps keep the interface consistent for end users and can make your plugin more professional by providing a solid user experience from the start.

      One of the primary advantages to using the WordPress Settings API is that the UI design elements are handled for you. The headers, description text, form fields, buttons, and notices are all styled exactly as the rest of the WordPress Dashboard. It's also future‐proof, meaning if the WordPress admin design and styles are updated in a future version, your plugin will automatically use the updated styling.

      WordPress features many different styles that you can easily use in your plugin. In this section, you'll learn how to use the styling available in WordPress for your plugins. To demonstrate, create a simple plugin with a settings page.

      <?php add_action( 'admin_menu', 'pdev_styling_create_menu' ); function pdev_styling_create_menu() { //create custom top-level menu add_menu_page( 'Testing Plugin Styles', 'Plugin Styling', 'manage_options', __FILE__, 'pdev_styling_settings' ); }?>

      Throughout this section, you'll modify the pdev_styling_settings() function.

      Using the WordPress UI

      The most important part of using the WordPress styles is to wrap your plugin in the class wrap div.

      <div class="wrap"> Plugin Page </div>

      This class sets the stage for all admin styling.

      Headings

      WordPress has custom styles available for all heading tags. Now look at how those heading tags display:

      <?php function pdev_styling_settings() { ?> <div class="wrap"> <h1>My Plugin</h1> <h2>My Plugin</h2> <h3>My Plugin</h3> <h4>My Plugin</h4> <h5>My Plugin</h5> <h6>My Plugin</h6> </div> <?php } ?>

Each heading is slightly smaller than the previous, as shown in Figure 3‐8. The main heading should always be an <h1>, and any subsequent headings should (likely) be bumped one level up. There should be no skipped levels. This is important for accessibility support as most screen readers will start with the <h1> tag and progress down from there.

FIGURE 3‐8: Heading levels

      Dashicons

      WordPress features its own open source font icon library called Dashicons. These icons (or dashicons) are used throughout the WordPress Dashboard and are available to use easily in your plugins.

      As an example, let's add some fun dashicons to your various plugin headers.

<h1><span class="dashicons dashicons-smiley"></span> My Plugin</h1> <h2><span class="dashicons dashicons-visibility"></span> My Plugin</h2> <h3><span class="dashicons dashicons-universal-access"></span> My Plugin</h3> <h4><span class="dashicons dashicons-buddicons-replies"></span> My Plugin</h4> <h5><span class="dashicons dashicons-businesswoman"></span> My Plugins</h5> <h6><span class="dashicons dashicons-thumbs-up"></span> My Plugin</h6>

You simply add a custom dashicons class to your <span> tag to identify the dashicon you'd like to display. In this example you're