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 tables are a great way to display rows and columns of data in an easy‐to‐read layout. Tables can easily be styled in WordPress using the widefat class.
<table class="widefat"> <thead> <tr> <th>Name</th> <th>Favorite Holiday</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Favorite Holiday</th> </tr> </tfoot> <tbody> <tr> <td>Brad Williams</td> <td>Halloween</td> </tr> <tr> <td>Ozh Richard</td> <td>Talk Like a Pirate</td> </tr> <tr> <td>Justin Tadlock</td> <td>Christmas</td> </tr> </tbody> </table>
The widefat class has specific styles set for the thead and tfoot HTML tags. This styles the header and footer of your table to match all other tables on the Dashboard. The class can also style all table data, as shown in Figure 3‐14.
FIGURE 3‐14: Table style
Pagination
If your plugin contains a list of records, you may have a need for pagination, which is the method to break lists of data into multiple pages and have links to load each individual page. This helps reduce the load times and makes it a much cleaner user experience to navigate through the data. Would you rather view 500 records on a page or 10 pages with 50 records on each page?
WordPress has a few different classes to style your pagination. The following is an example:
<div class="tablenav"> <div class="tablenav-pages"> <span class="displaying-num">Displaying 1-20 of 69</span> <span class="page-numbers current">1</span> <a href="#" class="page-numbers">2</a> <a href="#" class="page-numbers">3</a> <a href="#" class="page-numbers">4</a> <a href="#" class="next page-numbers">»</a>
