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


Manual and more flexible solution to output a message box

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

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>


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!

WordPress Developer Hint

With WordPress 3.0 debugging will be easier, whereas one constants gets eliminated and an already existing constant will do their work.

For developers the following 3 constants are important and should exist in every wp-config.php of a development system. Please use it with precaution on a live system!

Add define('WP_DEBUG', true); to wp-config.php to enable
the reporting of notices during development.

Add define('WP_DEBUG_DISPLAY', false); to wp-config.php to
disable the display of errors.

Add define('WP_DEBUG_LOG', true); to wp-config.php to log
eerrors to debug.log in the wp-content directory.
Sets PHP error handling and handles WordPress debug mode.

Recommendation for wp-config.php

/** Debugging WP */
define('WP_DEBUG', true); //enable the reporting of notices during development - E_ALL
define('WP_DEBUG_DISPLAY', true); //use the globally configured setting for display_errors and not force errors to be displayed
define('WP_DEBUG_LOG', true); //error logging to wp-content/debug.log
define('SCRIPT_DEBUG', true); //loads the development (non-minified) versions of all scripts and CSS and disables compression and concatenation,
//define('E_DEPRECATED', true); //E_ALL & ~E_DEPRECATED & ~E_STRICT

A small syntax with huge impact. I recommend this to everyone who is developing with WordPress, especially with Xdebug a fantastic help.