Hi – Would anyone else be able to look at this and help me identify what’s happening?
I’m currently building a card block using a Repeater in ACF Pro (Version 6.4.3). Within the repeater, I have a number of sub fields – one of which is a link for a CTA button.
I’m experiencing an issue where the string outputted by the ‘get_sub_field( )’ function in my <a> tag href appears to be outputted, but is not clickable.
I’ve tried to output the link both with the Link Array and Link URL string method, and it seems to be happening for both.
Here is my code, where my Link field is set to ‘Link URL’ within ACF:
<div class="feature-cards-wrapper">
<?php
if( have_rows('feature_card') ):
while( have_rows('feature_card') ): the_row(); ?>
<div class="feature-card">
<?php
$card_logo = get_sub_field('card_logo');
$size = 'full';
if ($card_logo ) {
echo wp_get_attachment_image( $card_logo, $size, "", array('class' => 'feature-card-logo' ),
);
}
$card_description = get_sub_field('card_description');
$card_title = get_sub_field('card_title');
$link = get_sub_field('page_link');
$CTA_label = get_sub_field('cta_label');
?>
<h3 class="feature-card-title block-title-<?php echo $text_value ?>"><?php echo $card_title ?></h3>
<p class="block-copy-<?php echo $text_value?>"><?php echo $card_description ?>
<div class="feature-card-cta">
<?php if( $link ): ?>
<a class="feature-card-link" href="<?php echo esc_url( $link ); ?>"><?php echo $CTA_label; ?></a>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Here’s my code, where the Link is set to ‘Link Array’. Both of these examples outputs the link string itself, but the link is still not clickable:
<div class="feature-cards-wrapper">
<?php
if( have_rows('feature_card') ):
while( have_rows('feature_card') ): the_row(); ?>
<div class="feature-card">
<?php
$card_logo = get_sub_field('card_logo');
$size = 'full';
if ($card_logo ) {
echo wp_get_attachment_image( $card_logo, $size, "", array('class' => 'feature-card-logo' ),
);
}
$card_description = get_sub_field('card_description');
$card_title = get_sub_field('card_title');
$link = get_sub_field('page_link');
$CTA_label = get_sub_field('cta_label');
?>
<h3 class="feature-card-title block-title-<?php echo $text_value ?>"><?php echo $card_title ?></h3>
<p class="block-copy-<?php echo $text_value?>"><?php echo $card_description ?>
<div class="feature-card-cta">
<?php if( $link ):
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ?
$link['target'] : '_self';
?>
<a class="feature-card-link" href="<?php echo esc_url( $link_url );?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
_________
My ‘feature-card-link’ css class isn’t affecting it, as it’s added to a CTA at the end of the card which works absolutely fine:
a.feature-card-link {
border-radius: 2rem;
color: white;
margin: 2rem 0;
padding: 0.75rem 1rem;
border: 1px solid #ffffff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-family: 'DMSans';
font-weight: 300;
transition: 350ms ease-in-out;
&:hover{
background-color: var(--wp--preset--color--ba-pink);
}
}
Code for the CTA outisde the repeater that’s working fine. I tried to replicate this in my repeater field with ‘the_sub_field( )’, but didn’t work:
<div class="feature-card-cta">
<?php $page_id = get_field('feature_link'); ?>
<a class="feature-card-link" href="<?php the_field('feature_link'); ?>">Let's have a chat</a>
</div>
___________
I’ve attached a screenshot of the link in my inspector, where you can see the code has outputted, with the target html, but no working link in the button.
Any assistance or help that could shed light on this for more would be greatly appreciated!
ACF-Field-Li....png
