csswordpresslanguage-translation

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>   

Solution

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