Change "You are now logged out" text

Question

I want to wrap <strong></strong> around the words "logged out":

add_filter( 'gettext', 'wpse17709_gettext', 10, 2 );
function wpse17709_gettext( $custom_translation, $login_texts ) {

    // Messages
    if ( 'You are now logged out.' == $login_texts ) { return ''; } // Log out message

    return $translation
}

...however adding HTML elements to the text string breaks my page.

How can I add <strong></strong> to this message text? Is there a means other than gettext?

Answer 1

This allows for the message to be overwritten specifically for the loggedout message while leaving all other messages alone. Here is more documentation on the filter.

add_filter( 'wp_login_errors', 'my_logout_message' );

function my_logout_message( $errors ){

    if ( isset( $errors->errors['loggedout'] ) ){
        $errors->errors['loggedout'][0] = 'This is the <strong style="color:red;">logged out</strong> message.';
    }

    return $errors;
}

Answer 2

Based on Sven's recommended solution and Tom J Nowell's warning about gettext() (see comments for both), I've fashioned the following solution:

add_filter( 'login_message', 'wpse_215289_custom_logout_message' );
add_action( 'login_head','wpse_215289_custom_login_head' );

// Detect logout and add custom message.
function wpse_215289_custom_logout_message() 
{
    //check to see if it's the logout screen
    if ( isset($_GET['loggedout']) && TRUE == $_GET['loggedout'] ){
        $message = "<p class='message'>Custom log-out message.</p>";
    }
    return $message;
} 

// Remove original message via CSS.
function wpse_215289_custom_login_head() 
{
    ?>
    <style type="text/css">
    .message:nth-child(2) { display:none; }
    </style>
    <?php
}

Answer 3

Change “You are now logged out” text using filter login_messages

function custom_logout_message(){
  return 'You are not login!';
}
add_filter( 'login_messages', 'custom_logout_message' );