Combining wp_kses with get_field

• noellesteegs

• December 19, 2022 at 8:10 am

Hi,

I know ACF came out with wp_kses on forms a while back, but I also know it doesn’t apply to get_field. How do I combine wp_kses with get_field correctly so that script tags etc. get stripped?

Thanks so much.

• John Huebner

• December 20, 2022 at 12:51 pm

To alter the formatted content that ACF returns you would us an acf/format_value filter for that field.

wp_kses_post() will allow all tags that are allowed in post content. If you want to remove html tags then you would use wp_strip_all_tags() instead.

• noellesteegs

• February 2, 2023 at 5:31 am

Hi @hube2, thanks so much for replying to my post. It looks like that’s exactly what I need. I will get cracking on this and let you know how I go.

• noellesteegs

• February 6, 2023 at 9:50 am

Hi @hube2,

I think I managed to implement this.

The use case is website admins adding Team Members to the database using CPT + ACF. Admin columns are being populated with ACF data (I added wp_strip_all_tags). For the frontend I am using a post loop (I added wp_kses_post).

How can I verify that this now works correctly? I did add a script tag before the div with the class bf-team-member-photo and it did not display in the frontend anymore when I added wp_kses_post.

• noellesteegs

• February 6, 2023 at 9:53 am

// Strip all HTML tags from ACF fields
function bf_acf_kses( $value, $post_id, $field ) {
	return do_shortcode( wp_strip_all_tags( $value ) );
}
// Apply to text fields in Teamleden backend
add_filter('acf/format_value/type=text', 'bf_acf_kses', 10, 3);

// Populate columns for Teamlid CPT admin page
function bf_populate_team_member_columns( $column, $post_id ) {

	// Name
	if ( 'name' === $column ) {
		echo the_field( 'team_member_name' );
	}

	// Function
	if ( 'function' === $column ) {
		echo the_field( 'team_member_function' );
	}

	// Date added
	if ( 'date_added' === $column ) {
		echo get_the_date();
	}

}
add_action( 'manage_bf_team_member_posts_custom_column', 'bf_populate_team_member_columns', 10, 2);

// Create Teamlid CPT shortcode
function bf_team_members_shortcode() {

	ob_start();

	// Get the internal links CPT
	$team_members = get_posts(
		array(
			'numberposts' => -1,
			'post_type' => 'bf_team_member',
			'orderby' => 'menu_order',
			'order' => 'ASC',
		),
	);

	// Create an empty team member list
	$team_list = array();

	// Open unordered list element
	echo '<ul class="bf-team-list">';

	// Loop through the posts and build the team member list
	foreach ( $team_members as $team_member ) {

		$name = $team_member->team_member_name;
		$function = $team_member->team_member_function;
		$bio = $team_member->team_member_bio;
		$photo_id = $team_member->team_member_photo;
		$photo = wp_get_attachment_image( $photo_id, '360' );
		$gif_id = $team_member->team_member_gif;
		$gif = wp_get_attachment_image( $gif_id, '360' );

		$team_list[] = '
			<li class="et_pb_column bf-person-column bf-team-member">
				<div class="et_pb_module et_pb_image bf-team-member-photo">
					<span class="et_pb_image_wrap ">' . $photo . '</span>
				</div>

				<div class="et_pb_module et_pb_image bf-team-member-gif">
					<span class="et_pb_image_wrap">' . $gif . '</span>
				</div>
				<div class="et_pb_module et_pb_text">
					<div class="et_pb_text_inner">
						<h3 class="bf-team-member-name">' . $name . '</h3>
						<h4 class="bf-team-member-function">' . $function .'</h4>
						<p class="bf-team-member-bio">' .  $bio . '</p>
					</div>
				</div>
			</li>
		';

	}

	// Get string from array
	$team_list_html .= implode('', $team_list);

	// Output link list, but strip all non-allowed tags first
	echo wp_kses_post( $team_list_html );

	// Close unordered list element
	echo '</ul>';

	return ob_get_clean();
}
add_shortcode( 'team_members', 'bf_team_members_shortcode' );