Let’s look at how to display information from ACF (Advanced Custom Fields) fields via the WordPress shortcode anywhere on the site. Let’s display a field of type “Repeater”. For example, we have a task – to display payment system icons in the WordPress editor inside the page text. To do this, insert the code into the functions.php file of the above theme:
function payCards() {
// pay_cards field of type "Repeater" in the ACF plugin
$cards = get_field('pay_cards','option');
$html = '';
$html .= '<div class="pay-cards">';
foreach ($cards as $card) {
$html .= '<div class="pay-card">';
$html .= '<img src="'.$card['icon'].'">';
$html .= '</div>';
}
$html .= '</div>';
return htmlspecialchars_decode($html);
}
add_shortcode( 'cards', 'payCards' );Let’s add some css styles
.pay-cards {
display: flex;
justify-content: space-between;
gap: 15px;
margin: 15px 0;
}
.pay-cards .pay-card img {
width: 100%;
}As a result, after inserting the [cards] shortcode anywhere on the site
we get an approximate view:
