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>

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

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

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

Recommendation

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

Guest Post

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!

Comments are closed.

6 comments

  1. eavasi

    Bravo Sergey!!! You're a real talent!!!
    Great popular plug-in and new cool and remarkable decision

  2. Stephen Cronin

    Nice post. Didn't know about the below-h2 one, so I will play with it.

    Personally I miss the fade class that use to fade the message in, back in the old days (before they switched to jQuery). I don't think there is a modern equivalent of that.

  3. david

    I'm new to plugin development and just made my first plugin, but when i save the form i would like to see the message "settings saved'. Could you point me out how to do that ?

  4. Jürgen

    Hello,
    thanks for the hints.
    But they won't display messages in the main plugin page. I would like to print a message one time directly after the plugin is activated:

    "Hello, please have a look at the settings. Thanks"

    I wanted to print it through "register_activation_hook()"
    But it won't work.
    Can you help me?
    Jürgen

  5. Graeme

    Hi Jürgen,

    I think that if you did this,

    register_activation_hook(__FILE__,'your_function');
    your_function () {
    echo '<div id="message" class="updated" ><p>Jürgen's Message</p></div>';
    }

    It would work out fine. I don't know if my html is going to come out okay here, but you get my point 🙂 I hope that helps!

One pingback

  1. Was, wenn eine WordPress Min Version erforderlich ist? - Theme, WordPress, Variante, Funktionen, XFWPMINVERSION, ‘Please - dynamicinternet