How to alter HTML generated for $messages?

Question

I'm building a theme from scratch using Bootstrap 3. I really don't like the HTML being generated for Drupal's $messages. I know I could change the look by using CSS. But I want more control than that, I want to generate different HTML based on type of message (warning, error, etc). I've custom classes & custom images & other custom elements to be used for these messages. I want complete control over the messages. What should I do?

Answer 1

You just need to override the theme function...

theme_status_messages($variables)

https://api.drupal.org/api/drupal/includes%21theme.inc/function/theme_status_messages/7

function YOURTHEME_status_messages($variables) {
// code goes here...
}

Answer 2

Another option here is just to alter the $_SESSION['messages'] array before they are rendered, say in hook_page_alter().

E.g.

/**
 * Implements hook_page_alter().
 */
function example_page_alter(&$page) {

  // I know the message I'm looking for is a status message so if there are non
  // then we have nothing to do here.
  if(!isset($_SESSION['messages']['status'])) {
    return;
  }

  $tracking_code = <<<EOD
<!-- Example traking code -->
<script type="text/javascript">
// code would go here
</script>
EOD;

  // Loop the status messages
  foreach($_SESSION['messages']['status'] as &$message) {
    // If the message matches the pattern then we've found it
    $pattern = '/^You are now subscribed to the ".+" list./';
    if(preg_match($pattern, $message)) {
      // Here I'm adding a tracking code to the end of the message but you could
      // alter or replace the html
      $message .= $tracking_code;
    }
  }

}