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>
There are a few things you should be aware of ...
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()
.
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 );
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]
<?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.