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.

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.

• advanced-custom-fields

1 Answer 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.