0

I am trying to use the ACF URL field to wrap a card component inside a url, then use the same url inside of this component in a button, this is because of styled reasons in the CSS.

This is my code:

<a href="<?php the_field('first_featured_url'); ?>">
    <div class="cell medium-auto card">
        <span class="card__title"><?php the_field('first_featured_title'); ?></span>
        <div class="card__image__wrap">
            <div class="card__image" style="background-image: url(<?php echo get_field('first_featured_image'); ?>);">></div>
        </div>
        <div class="card__footer">
            <a href="<?php the_field('first_featured_url'); ?>"><?php the_field('first_featured_link_text'); ?></a>
        </div>
    </div>
</a>

But then what I get rendered is:

<a href="correcturl">
                </a>
<div class="cell medium-auto card"><a href="correcturl">
                    <span class="card__title">Featured Client</span>
                    <div class="card__image__wrap">
                        <div class="card__image" style="background-image: url(aurl);">&gt;</div>
                    </div>
                    <div class="card__footer">
                        <a href="correcturl">
                        </a><a href="correcturl">View Our Clients</a>
                    </div>
                </div>

Somehow it works, the component is clickable and it works as expected but I'm not sure why it is duplicating the link in the footer and not able to wrap my component. Is this behavior expected? Can I do something to prevent it?

Thank you.

1

It's actually an HTML issue, not an ACF one.

You can't have nested "a" tags.

If you do, browsers try to rationalize things by closing them for you and generally making a mess of what you were trying to do.

You probably don't need the inner one anyways, the whole element is going to be clickable.

1
  • I see, thank you for the explanation.
    – Sergi
    Mar 21 '19 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.