How to Add a Custom ACF Button to a Kadence Post Grid or Carousel

If you want to add a custom button from an ACF field into a Kadence Post Grid or Carousel, the usual approach is to hook into the loop output and print the button only when that field exists.

This works well when each post needs its own button link, label, or destination and the default block options are not enough.

The setup is straightforward:

• create an ACF Link field on your posts, for example card_button
• add a custom class to the Kadence Post Grid or Carousel block, for example has-acf-button
• add a PHP snippet to your theme’s functions.php file to output the button

Here is a practical example:

add_action( 'kadence_blocks_post_loop_footer_end', function( $atts ) {
	global $post;

	if ( empty( $atts['className'] ) || strpos( $atts['className'], 'has-acf-button' ) === false ) {
		return;
	}

	if ( ! function_exists( 'get_field' ) || empty( $post->ID ) ) {
		return;
	}

	$button = get_field( 'card_button', $post->ID );

	if ( empty( $button ) ) {
		return;
	}

	$url    = '';
	$label  = 'Learn more';
	$target = '_self';
	$rel    = '';

	if ( is_array( $button ) ) {
		$url    = ! empty( $button['url'] ) ? $button['url'] : '';
		$label  = ! empty( $button['title'] ) ? $button['title'] : $label;
		$target = ! empty( $button['target'] ) ? $button['target'] : $target;
	} else {
		$url = $button;
	}

	if ( empty( $url ) ) {
		return;
	}

	if ( '_blank' === $target ) {
		$rel = 'noopener noreferrer';
	}

	printf(
		'<div class="kb-acf-button-wrap"><a class="kb-acf-button" href="%1$s" target="%2$s"%3$s>%4$s</a></div>',
		esc_url( $url ),
		esc_attr( $target ),
		$rel ? ' rel="' . esc_attr( $rel ) . '"' : '',
		esc_html( $label )
	);
}, 20 );

Add that code to your theme’s functions.php file.

In most cases, you can find it here:

/wp-content/themes/your-theme/functions.php

Paste the snippet at the bottom of the file. If the file already starts with <?php, do not add another opening PHP tag above the snippet.

You also need to add the custom class to the Kadence block itself. In the block settings, go to the Advanced tab and add:

has-acf-button

That makes sure the button only appears on the grid or carousel you want to target.

If you want to style the button, add some CSS like this:

.kb-acf-button-wrap {
	margin-top: 1rem;
}

.kb-acf-button {
	display: inline-block;
	padding: 0.7rem 1rem;
	background: #111;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}

.kb-acf-button:hover,
.kb-acf-button:focus {
	background: #333;
	color: #fff;
}

The main things to check if it does not work are:

• the ACF field name matches exactly
• the field is assigned to the right post type
• the button field actually has a value on the posts in the grid
• the custom class has been added to the Kadence block
• the PHP snippet has been added to the correct functions.php file

For most use cases, this is enough. It keeps the existing Kadence layout, adds per-post button control through ACF, and avoids rebuilding the whole loop item from scratch.