WordPress Plugin Development: Style Your Message Boxes

Displaying a message to the user after he started an action belongs to a good usability. In the era of Web 2.0 applications, the user is expecting such optical signal after his actions. Also WordPress Plugin developer should give the user a result message, if necessary, provided with further information.

The WordPress admin area often likes to show information at the top of the window. For developers, this has a great benefit: Tools for generating the error and information messages are integrated and can easily be implemented in Plugins - without any self-definitions or changes in the style sheet.

Automatically generated information in WordPress

wp_safe_redirect(
  add_query_arg(
    'updated',
    'true',
    wp_get_referer()
  )
);

Manual and more flexible solution to output a message box

<div id="message" class="updated">
  <p>
    Output
  </p>
</div>

Colorful: The availability of CSS classes

Messages within an application have to communicate different informations. For this purpose WordPress has numerous stylesheet classes available, which suits best to the message.

<div id="message" class="updated">...</div>

Image may be NSFW.
Clik here to view.

<div id="message" class="error">...</div>

Image may be NSFW.
Clik here to view.

<div id="message" class="updated highlight">...</div>

Image may be NSFW.
Clik here to view.

<div id="message" class="updated below-h2">...</div>

Image may be NSFW.
Clik here to view.

Recommendation

Don't use your own format. A common and familiar message box provides trust and increases the potential of perception.

Guest Post

Image may be NSFW.
Clik here to view.This post is written by Sergej Müller wpseo.org, who created the popular WordPress Plugin to optimize your SEO.

Thank you very much from our part to Sergej.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!