The code snippet below demonstrates how to escape the output of a text field created with Advanced Custom Fields (ACF) on the front end of a WordPress website. This is useful when you want to prevent any potential security vulnerabilities by ensuring that user input is properly sanitized before displaying it on the front end.
<?php
function wpsnippets_escape_text_field_output( $value ) {
return esc_html( $value );
}
add_filter( 'acf/format_value/type=text', 'wpsnippets_escape_text_field_output' );
?>
In the code above, we define a custom function wpsnippets_escape_text_field_output that takes the value of the text field as its parameter. Inside the function, we use the esc_html() function, which is a WordPress function that escapes the value to ensure it is safe to output.
We then use the add_filter() function to hook our custom function to the acf/format_value/type=text filter. This filter is specific to ACF and allows us to modify the value of a text field before it is displayed on the front end.
By adding this code to your theme’s functions.php file or a custom plugin, any text field created with ACF will have its output properly escaped, reducing the risk of potential security issues.
Examples
Example 1: Escaping ACF text field output using esc_html()
This example demonstrates how to escape the output of an Advanced Custom Fields (ACF) text field on the front end using the esc_html() function.
<?php
$field_value = get_field('text_field');
echo esc_html($field_value);
?>
In this code example, we retrieve the value of a text field using the get_field() function and store it in the $field_value variable. Then, we use the esc_html() function to escape the value before outputting it on the front end. This ensures that any HTML tags or special characters are properly encoded, preventing potential security vulnerabilities.
Example 2: Escaping ACF text field output using esc_attr()
This example shows an alternative way to escape the output of an ACF text field on the front end, using the esc_attr() function.
<?php
$field_value = get_field('text_field');
echo esc_attr($field_value);
?>
In this code example, we follow a similar approach as in the previous example. However, instead of using esc_html(), we use esc_attr() to escape the value. This function is specifically designed for escaping attribute values within HTML tags. It ensures that the value is properly encoded, preventing any potential issues with quotes or special characters.
Example 3: Escaping ACF text field output using wp_kses_post()
This example demonstrates how to escape the output of an ACF text field on the front end using the wp_kses_post() function.
<?php
$field_value = get_field('text_field');
echo wp_kses_post($field_value);
?>
In this code example, we again retrieve the value of a text field using the get_field() function and store it in the $field_value variable. Then, we use the wp_kses_post() function to escape the value before outputting it on the front end. This function allows only certain HTML tags and attributes, ensuring that the output is safe and compliant with the WordPress coding standards.