Support

Account

Register Login

Home › Forums › General Issues › How to add an anchor link with Advanced Custom Fields

Solved

How to add an anchor link with Advanced Custom Fields

  • 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 use that same 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.

    I tried to add the code I am using but I keep getting a security notice so let me know how to show my code.

    This is the page I’m trying to get it to work on – https://headley.tfm-dev.com/flavors-test/

    This is the page it’s working on but without the ACF fields – https://headley.tfm-dev.com/beers/

    Thank you!

  • I’d look at your code for where you’re spitting out the ACF field value for the div ID. In your non-working example, it’s just showing it standalone vs. as the ID so, your example in the source is:

    <div id="" style="display: none;">
    #baddog
<div class="flavors">
<div class="flavorsleft">
    <picture>
<source type="image/webp" srcset="https://headley.tfm-dev.com/wp-content/uploads/2023/01/baddog-1.png.webp"/>
<img src="https://headley.tfm-dev.com/wp-content/uploads/2023/01/baddog-1.png" alt=""/>
</picture>

</div>

    And where #baddog is, that should be spit out in the ID field instead. If you post the code for your template itself, may be easier to identify the error but that’s definitely what is causing it to not work. It should be:

    <div id="baddog" style="display: none;">
<div class="flavors">
<div class="flavorsleft">
    <picture>
<source type="image/webp" srcset="https://headley.tfm-dev.com/wp-content/uploads/2023/01/baddog-1.png.webp"/>
<img src="https://headley.tfm-dev.com/wp-content/uploads/2023/01/baddog-1.png" alt=""/>
</picture>

</div>

  • Thank you wpfieldwork for looking!

    I tried adding the code in my initial post but I came getting a security error and it wouldn’t let me. How can I add the code?

  • If it doesn’t work to paste in the reply (wrapped in the code tags) then you could use something like Pastebin or CodePen

  • Thank you!! Here’s the link to the code I’m using –

    https://pastebin.com/KaPTwMFt

  • Line 29 is where your error is. It just has an IF statement in the ID field, not anything like the_sub_field echoing an actual value. Another thing I’d keep in mind is if your ACF field is storing an anchor with a hash, the ID should be without the hash.

  • Thanks wpfieldwork! I updated my code but it’s still not working. I updated it here also to show you – https://pastebin.com/KaPTwMFt

  • On Line 29, you likely need to:

    1) Not close the div at the end as that div should wrap around the entire lightbox content so move the closing div tag to the end of your lightbox content

    2) As I mentioned earlier, you are storing the custom field value with a hash in your ACF field so it’s something like #flavorname. How anchors work is a #flavorname would be looking for an ID of just “flavorname” (no hash) so right now you’re spitting out the full #flavorname in both spots. It would probably be better if you move to a text ACF field vs URL and store the value without the # so the user is inputting just “flavorname” in the backend. Then in the linked part, add the hash there manually. Or you could leave the fields as is but use something like str_replace to replace the hash in the subfield in the ID spot.

  • Thank you!! I’m getting closer!!! So I changed the link field to a text field and now when I click the image the box opens but it’s displaying the whole webpage with the header as well. What am I doing wrong? And can you please show me an example using the str_replace that you mentioned?

  • Sorry I forgot to tell you I changed the code with what I have now – https://pastebin.com/KaPTwMFt

  • You’re doing the same thing on line 13 that you originally did on line 29 when you first shared code where you just have an if statement in a place where you’re wanting to echo your field (in the href attribute of the link spot), nothing like the_sub_field or echo get_sub_field in that spot.

  • Could you please show me an example of what it should be? I’m really trying to figure this out and with your help I’m so much closer but I’m lost now.

    Thank you so much!!

  • Thank you wpfieldwork. I changed the code in line 13 to use the_sub_field and then I realized I was using beer_title instead of flavor_name. Once I changed all of that it works perfectly!!

    Thank you so much for all of your help!!

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.