How to add an anchor link with Advanced Custom Fields

Question

Is it possible to add anchor links to Advanced Custom Fields?

I've created a page that shows images that when you click on the image a lightbox opens with the description. I have it all working without using Advanced Custom Fields but I'm trying to make it user friendly for the client so I added fields for them to just fill in the information and everything is already styled.

The problem is the tabs use an Anchor Link to link to the ID DIV that opens up the lightbox with the description - it works but not when I use the fields I created.

I created a url field for them to fill in the #div name for the anchor url and a field for the name of the #div for the anchor to link to. (Hope that makes sense!)

I'm also using repeater fields so they can add/delete flavors.

This is the code I am using -

<?php
// check if the repeater field has rows of data
if( have_rows('flavors') ):
    // loop through the rows of data
    while ( have_rows('flavors') ) : the_row();
        // display a sub field value
?>

<li>
******** This is the anchor link *************
<?php 
$link = get_sub_field('flavor_name');
if( $link ): ?>
    <a href="<?php echo esc_url( $link ); ?>" class="wplightbox" data-width=900 data-height=800>

<?php 
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

<?php if( get_sub_field('beer_title') ): ?>
    <?php the_sub_field('beer_title'); ?>
<?php endif; ?>

</a>
<?php endif; ?>

********* This is the div that needs to pick up the anchor name typed in as the Div ID name *****

<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">
    <?php the_sub_field('flavor_name'); ?>
<?php endif; ?>

<div class="flavors">
<div class="flavorsleft">
<?php 
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>

<div class="flavorsright">
<h3><?php if( get_sub_field('beer_title') ): ?>
    <?php the_sub_field('beer_title'); ?>
<?php endif; ?></h3>

<div class="percent">
<?php if( get_sub_field('alcohol_percentage') ): ?>
    <?php the_sub_field('alcohol_percentage'); ?>
<?php endif; ?>
</div>

<?php if( get_sub_field('beer_description') ): ?>
    <?php the_sub_field('beer_description'); ?>
<?php endif; ?>

</div>
</div>
</div>

<div class="clear"></div>

</li>

<?php
    endwhile;
else :
    // no rows found
endif;
?>
</ul>```


This is the dev site where it's at - https://headley.tfm-dev.com/beers

The page is working right now because it's currently built not using the ACF fields (I took them off for now and rebuilt it) but I would like to change it so the owner can make changes.  

Thank you!

[![Screenshot of Advanced Custom Fields][1]][1]


[![Screenshot of Advanced Custom Fields Redone][2]][2]


  [1]: https://i.sstatic.net/NeKYe.jpg
  [2]: https://i.sstatic.net/uUN0G.png

Answer 1

On your dev site in the source code the anchor href is an id but you are using a page link field to match to the get_sub_field('flavor_bottom_section_name') so this would return a url so won't work.

Correct me if I'm wrong but you are using 2 repeaters, does that not reply on each of them to match up to each other? I would do this wiht one repeater field and you'd be able to avoid mistakes being made and would probably require less fields e.g you would only need one field for the anchor and one field for the div. You can have 1 repeater field but you can have 2 separate loops through the same repeater just getting what you want out of it on each loop.

ADDITIONAL

This line of code nothing is being ouput into the id=""

<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">

I think you need to echo the sub field like this maybe

<div id="<?php echo get_sub_field('flavor_name') ?>" style="display: none;">

Yon can see in the red boxes I've marked that the id attribute is empty on the div, even if I change it locally in the inspector it works, not sure why you got an error earlier but I also think that the value in your field might have # before it but the # is only only required in the href not the id.

Final Solution (Hopefully)

Ok I used your code and I see why you were getting the critical error this:

<a href="#<?php if( get_sub_field('beer_title') ): ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
<?php endif; ?>  

Needs to change to this:

<a href="#<?php the_sub_field('beer_title'); ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>

You have and if in there which isn't needed so removing that and echoing the sub field fixes it, we just needed to remove the endif also. I should have asked what the error was originally.

What you are saying here is

<a href="#
// IF THERE IS A SUB FIELD VALUE FOR BEER TITLE
<?php if( get_sub_field('beer_title') ): ?>"
// OUTPUT THIS
class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>

get_sub_field() doesn't output anything it has to be echoed or else use the_sub_field() instead.