Wordpress translation file also translate text in css files

Question

I'm setting up a translate file for my website. I noticed that even the text in the CSS frontend file is translated, which broke my CSS theme.

Here is the CSS portion of code :

.wpem-tbl-status.Confirmed {
    background-color: #0daf0b;
}

When I inspect the webpage in the console, I get something like :

<span class="wpem-tbl-status translated_Confirmed">translated_Confirmed</span>

When I want to have :

<span class="wpem-tbl-status Confirmed">translated_Confirmed</span>

Here is the wordpress code incriminated :

<td data-title="<?php _e( 'Status', 'wp-event-manager-registrations' ); ?>">
    <span class="wpem-tbl-status <?php echo ( $wp_post_statuses[ get_post_status( $registration_id ) ]->label); ?>">
    <?php echo esc_html( _e( $wp_post_statuses[ get_post_status( $registration_id ) ]->label, 'wp-event-manager-registrations' ) ); ?>
    </span>
</td>   

Answer 1

There are a few things you should be aware of ...

Always escape your output, even for attributes

Use esc_attr__() to return the translated value or esc_attr_e() to echo the translated value. If you do not need a translation, just use esc_attr() / echo esc_attr().

How to pass variables inside translation functions

You can't translate text if you actually don't know what that text is. According to the docs, you must pass a string, you can’t translate variables.

Therefore this does not work: _e( 'Current status:' . $status, 'my-text-domain' );

The solution: use sprintf to insert variables inside strings.

echo sprintf( __( 'Current status: %s', 'my-text-domain' ), $status );

Avoid double echoing

So, instead of (see line 3 in your code snippet): echo esc_html( _e( ... ) );
do something like: esc_html_e( .... );

Doing the same:
esc_html_e( 'Blablabla' );
echo esc_html__( 'Blablabla' );
 

Read more about the differences here:
__() - return translated string [docs]
_e() - echo translated string [docs]
_n() - return translated singular/plural form of a string based on supplied number [docs]
_x() - return translated string with gettext context [docs]
_ex() - echo translated string with gettext context [docs]
esc_html__() - escape and return translated string for safe use in HTML output [docs]
esc_html_e() - escape and echo translated string for safe use in HTML output [docs]
esc_html_x() - escape and return translated string with gettext context for safe use in HTML output [docs]
esc_attr__() - escape and return translated string for safe use in an attribute [docs]
esc_attr_e() - escape and echo translated string for safe use in an attribute [docs]
esc_attr_x() - escape and return translated string with gettext context for safe use in an attribute [docs]

Finally, your code should look something like this

<?php  

$domain = 'wp-event-manager-registrations';
$status = $wp_post_statuses[ get_post_status( $registration_id ) ]->label;  

if ( strtolower( $status ) === 'confirmed' ) {
    $status_i18n = __( 'Confirmed', $domain );
} else {
    $status_i18n = __( 'Not Confirmed', $domain );
}  

?>

<td data-title="<?php esc_attr_e( 'Status', $domain ); ?>">
  <span class="wpem-tbl-status <?php echo esc_attr( $status ); ?>">
  <?php echo sprintf( esc_html__( 'Status: %s', $domain ), $status_i18n ); ?>
  </span>
</td>  

<!-- Alternatively - if you only want to output the value (without further text) -->  

<td data-title="<?php esc_attr_e( 'Status', $domain ); ?>">
    <span class="wpem-tbl-status <?php echo esc_attr( $status ); ?>">
    <?php echo esc_html( $status_i18n ); ?>
    </span>
</td>

Also make sure that the value of $status has not already been translated elsewhere in your code.