Understanding the esc_html() Function in WordPress

esc_html() Function

WordPress’s esc_html() function escapes HTML characters to prevent security issues, particularly XSS (Cross-Site Scripting) attacks. It converts characters like <, >, and & into their HTML entity equivalents.

Why to Use

When displaying user-generated content or data from the database, using esc_html() ensures that any potentially harmful HTML or JavaScript code is safely rendered as text, not executed.

How to Use esc_html()

The esc_html() function takes a string as its input and returns a version of the string with HTML entities converted. Here’s a basic example of its usage:

 <?php
 // Example of using esc_html()
 $user_input = '<script>alert("Hacked!");</script>'; 

// Outputting user input safely 
echo esc_html($user_input); 
?>

In this example, the user input is a potentially harmful script tag. When passed through esc_html(), it is converted to:

&lt;script&gt;alert(&quot;Hacked!&quot;);&lt;/script&gt;

This output is safe to display because the script tag is escaped and will not be executed by the browser.

Practical Example in a WordPress Theme

<?php 
    // Assume we are in a WordPress template file and have a variable with user data 
    $user_name = get_user_meta($user_id, 'display_name', true);

    // Outputting user name safely 
    ?>
    <p><?php echo esc_html($user_name); ?></p>

In this code snippet, get_user_meta() retrieves a user’s display name, and esc_html() ensures that any HTML tags or special characters in the name are properly escaped before outputting them.

When to Use:

When outputting user input.
When displaying data from the database.
In themes and plugins to ensure security.

Related Functions:

esc_attr() for HTML attributes.
esc_url() for URLs.

Always use esc_html() to keep your WordPress site secure and free from malicious code.