Outputting information from ACF fields in WordPress shortcode


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:


Please enter your comment!
Please enter your name here