Ecommerce Shopify WordPress Discussion

WordPress translation file also translate text in css files

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 ... 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.

December 30, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.