Professional WordPress Plugin Development. Brad Williams
to additional HTML tags as well, such as a paragraph tag. The preceding code generates the icons shown in Figure 3‐9.
FIGURE 3‐9: Dashicons
It's important to note that dashicons are automatically loaded within the WordPress Dashboard, but not on the frontend of the website. If you'd like to use dashicons on the public side, you'll need to enqueue the dashicon script, as shown here:
<?php add_action( 'wp_enqueue_scripts', 'pdev_load_dashicons_front_end' ); function pdev_load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } ?>
Now your plugin has a clean header and uses the Plug icon.
For more information and a complete list of all Dashicons available, see the official resource at https://developer.wordpress.org/resource/dashicons.
Messages
When an action occurs in your plugin, such as saving settings, it's important to display a message to the user verifying whether the update was successful. WordPress features some different styles for displaying these messages.
<?php function pdev_styling_settings() { ?> <div class="notice notice-error is-dismissible"> <p>There has been an error.</p> </div> <div class="notice notice-warning is-dismissible"> <p>This is a warning message.</p> </div> <div class="notice notice-success is-dismissible"> <p>This is a success message.</p> </div> <div class="notice notice-info is-dismissible"> <p>This is some information.</p> </div> <?php } ?>
As you can see, there are four different types of notices supported: error, warning, success, and info. Notice the class, is‐dismissible, included in the outer <div> element. This class makes the admin notice “dismissable,” meaning a small x is displayed, and when it's clicked, the notice will disappear. When an admin notice is not dismissible, the only way to remove it is to reload the page.
These styles will generate the messages shown in Figure 3‐10.
FIGURE 3‐10: Dismissable notices
Buttons
As discussed earlier, the easiest method for adding a form submission button is using the submit_button() function. However, there's no reason you can't manually create form buttons using the preset WordPress admin stylings. When manually adding buttons to your form, you can take advantage of multiple classes. The first two you use are the button‐primary and button‐secondary classes. These classes style your buttons to match the WordPress UI.
<p> <input type="submit" name="Save" value="Save Options"/> <input type="submit" name="Save" value="Save Options" class="button-primary"/> </p><p> <input type="submit" name="Secondary" value="Secondary Button"/> <input type="submit" name="Secondary" value="Secondary Button" class="button-secondary"/> </p>
This example demonstrates a standard unstyled button as compared to the WordPress styled button. As you can tell, the WordPress‐styled button looks familiar and uses the proper styling, as shown in Figure 3‐11.
FIGURE 3‐11: WordPress‐styled button
Links can also take the form of a button by using the appropriate class.
<a href="#">Search</a> <a href="#" class="button-primary">Search Primary</a> <a href="#" class="button-secondary">Search Secondary</a>
This example shows how a standard <a href> link can be styled to look like a button, as shown in Figure 3‐12. To normal users, they would never know these are regular text links because they look just like a button.
FIGURE 3‐12: Link styled to look like a button
Form Fields
WordPress has a special table class just for forms called form‐table. This class is used on all WordPress Dashboard forms, including every Settings page. This is a useful class when creating any type of options in your plugin.
<div class="wrap"> <?php screen_icon( 'plugins' ); ?> <h2>My Plugin</h2> <form method="POST" action=""> <table class="form-table"> <tr valign="top"> <th scope="row"><label for="fname">First Name</label></th> <td><input maxlength="45" size="25" name="fname"/></td> </tr> <tr valign="top"> <th scope="row"><label for="lname">Last Name</label></th> <td><input id="lname" maxlength="45" size="25" name="lname"/></td> </tr> <tr valign="top"> <th scope="row"><label for="color">Favorite Color</label></th> <td> <select name="color"> <option value="orange">Orange</option> <option value="black">Black</option> </select> </td> </tr> <tr valign="top"> <th scope="row"><label for="featured">Featured?</label></th> <td><input type="checkbox" name="favorite"/></td> </tr> <tr valign="top"> <th scope="row"><label for="gender">Gender</label></th> <td> <input type="radio" name="gender" value="male"/> Male <input type="radio" name="gender" value="female"/> Female </td> </tr> <tr valign="top"> <th scope="row"><label for="bio">Bio</label></th> <td><textarea name="bio"></textarea></td> </tr> <tr valign="top"> <td> <input type="submit" name="save" value="Save Options" class="button-primary"/> <input type="submit" name="reset" value="Reset" class="button-secondary"/> </td> </tr> </table> </form> </div>
Using the form‐table can give your options a familiar look to your plugin users. This makes for a better user experience, as shown in Figure 3‐13.
FIGURE 3‐13: WordPress‐like options
Tables
HTML