How to escape html code with html allowed

Question

i am a little confused how to use escape function on a variable having html code in it. i have tried this https://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data but i could not figure it out. here is my code:

    $output = '<p>';
    $output .= '<label for="' . esc_attr( $this->get_field_id( 'title' ) ) . '">Title:</label>';
    $output .= '<input type="text" class="widefat" id="' . esc_attr( $this->get_field_id( 'title' ) ) . '" name="' . esc_attr( $this->get_field_name( 'title' ) ) . '" value="' . esc_attr( $title ) . '"';
    $output .= '</p>';   
    echo $output;

My question is how i can escape $output without losing html in it? i am asking because i am submitting this code on themeforest. from where i have been rejected few times because of not escaping code. So now i think it is better to escape there variables. write? thank you!

Answer 1

You are looking for wp_kses(). https://developer.wordpress.org/reference/functions/wp_kses/

There are more helper functions like wp_kses_post() and wp_kses_data()

Answer 2

1. Escaping

• Escaping Attribute <label for="<?php esc_attr( $tid ); ?>">

• Escaping HTML <label ..><?php esc_html( 'Text' ); ?></label>

---

2. Translation and Escape

Note:

• textdomain should be your own unique theme/plugin slug.
• The translated string should contain a static value. If you have a dynamic value then no need to make it translation ready.

1. Escape and translate Attribute: <label for="<?php esc_attr( $tid ); ?>">

No need to make it translation ready. If you have a static string with $tid then you need to make it transition ready eg.

Invalid:

<label for="<?php esc_attr__( $tid, 'textdomain' ) ); ?>">
<label for="<?php printf( esc_attr__( '%s', 'textdomain' ), $tid ); ?>">

Valid:

<label for="<?php printf( esc_attr__( '%s static text', 'textdomain' ), $tid ); ?>">

2. Escape and translate HTML: <label ..><?php esc_html__( 'Text', 'textdomain' ); ?></label>

Answer 3

try with this method. this is work for me. echo escape with html.

$output = '<p>';
$output .= '<label for="' . esc_attr( $this->get_field_id( 'title' ) ) . '">Title:</label>';
$output .= '<input type="text" class="widefat" id="' . esc_attr( $this->get_field_id( 'title' ) ) . '" name="' . esc_attr( $this->get_field_name( 'title' ) ) . '" value="' . esc_attr( $title ) . '"';
$output .= '</p>';   

$allowed_html = array(
    'input' => array(
        'type'  => array(),
        'id'    => array(),
        'name'  => array(),
        'value' => array(),
     ),
);

echo wp_kses($output ,$allowed_html );

Answer 4

Your code looks and works fine for me. The HTML in value is preserved.

My only recommendation would be to wrap all your text strings in __() or _e() so they can easily be translated. This is a nice selling point on marketplace sites like ThemeForest since not everyone wants to use English.

$output .= '<label for="' . esc_attr( $tid ) . '">' . __( 'Title:', 'your-text-domain' ) . '</label>';

Read more about I18n on the WordPress Codex.

Answer 5

If you want to do it the "WordPress way", you would not store your HTML in a temporary variable, you would output directly.

?> 
<p>
    <label for="<?php esc_attr_e( $this->get_field_id( 'title' ) ); ?>"> <?php _e('Title:', 'tex-domain'); ?></label>
    <input type="text" class="widefat" id="<?php esc_attr_e( $this->get_field_id( 'title' ) ); ?>" value="<?php esc_attr_e( $title ); ?>" />
</p>
<?php 

P.S: You would also internationalize your text strings.