Professional WordPress Plugin Development. Brad Williams

Читать онлайн книгу.

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.

Illustration displaying custom dashicons class added to the <span> tag to identify the dashicon to be displayed.

      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.

      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.

Screenshot of the My Plugin page displaying four different types of notices supported: error, warning, success, and information.

      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>

Illustration of a WordPress-styled button using the proper admin stylings.

      <a href="#">Search</a> <a href="#" class="button-primary">Search Primary</a> <a href="#" class="button-secondary">Search Secondary</a>

Illustration depicting how a standard link can be styled to look like a button by using the appropriate class.

      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.

Screenshot of a form-table that is used on all WordPress admin dashboard forms, including every Settings page, a useful class when creating any type of options in the plugin.

      Tables

      HTML


Скачать книгу