Allow HTML Tags while using an escaping function in WordPress


In WordPress, the esc_html() function is used to escape HTML entities in a string, which helps to prevent cross-site scripting (XSS) attacks. By default, this function will convert all HTML tags to their corresponding entities, including the <h1> tag.

However, if you want to allow the <h1> tag in esc_html(), you can use the wp_kses() function instead.

Here’s an example:

$allowed_tags = array(
	'h1' => array(),
);  
echo wp_kses( "<h1>$my_awesome_heaser_value</h1>", $allowed_tags );

In this example, we use the $string variable to store the string that we want to escape. We then define an array called $allowed_tags that specifies which HTML tags should be allowed in the string. In this case, we only allow the <h1> tag.

We then use the wp_kses() function to escape the string using the allowed tags. This function will remove any HTML tags that are not allowed in the $allowed_tags array.

Finally, we use the echo statement to output the escaped string. This will output the <h1> tag with its original formatting and styling.


Here is how you could allow more than just one tag as well as attributes. e.g. the h1, h2, h3, class, strong, and em tags:

$content = "<h1>My Heading 1</h1> <h2>My Heading 2</h2> <h3>My Heading 3</h3> <p class='my-class'>My paragraph with class</p> <strong>My Strong Text</strong> <em>My Emphasized Text</em>";
$allowed_html = array(
    'h1' => array(),
    'h2' => array(),
    'h3' => array(),
    'p' => array(
        'class' => array(),
    ),
    'strong' => array(),
    'em' => array(),
);

$clean_content = wp_kses($content, $allowed_html);

echo $clean_content;

In the $allowed_html array, each key is a HTML tag and its value is another array that contains the allowed attributes for this tag. In this case, I added the class attribute to the p tag. If you want to add the class attribute to all the tags, you need to add it to each of them like this:

// Allowed HTML for text. Basic WYSIWYG tags.
$allowed_html = array(
	'h1'         => array(),
	'h2'         => array(),
	'h3'         => array(),
	'strong'     => array(),
	'em'         => array(),
	'ul'         => array(),
	'ol'         => array(),
	'li'         => array(),
	'blockquote' => array(),
	'code'       => array(),
	'p'          => array(
		'class' => array(),
		'style' => array(),
	),
	'a'          => array(
		'href'   => array(),
		'target' => array(),
		'rel'    => array(),
	),
	'img'        => array(
		'src' => array(),
		'alt' => array(),
	),
	'del'        => array(
		'datetime' => array(),
	),
);

Remember, when using wp_kses, you must always specify the allowed HTML tags and their attributes because it will remove all the tags and attributes that are not specified in the $allowed_html array.

If you want to allow just a normal amount of HTML through, check out the WordPress wp_kses_post() function.

Don’t forget to have a look at the ready-made functions for specific things, like URLs or all HTML.