WordPress won’t let me wrap a div in an a tag

I’m having a very strange issue that I can’t figure out. I’m working on a custom theme in wordpress and I’ve got a div with an image and another icon image inside.
I’m trying to make both the whole image and the icon image within it a link.

The issue is that when I try to put a link around the whole div, WordPress closed the link prematurely and then adds a second link – neither of which are actually enclosing my div.
If I change the div to a span, it will let me wrap it in a link. Why?! What is going on and how and I turn off this ‘feature’?

Read More

Here is the selected code in my template file:

        <a href="<?php the_permalink(); ?>">
            <div class="img">
                <?php if (has_post_thumbnail()): ?>
                    <img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>">
                    <span class="zoom hide-ie"><i class="fa fa-search"></i></span>
                <?php endif; ?>
                <?php if ($categories): ?>
                    <a href="<?php echo get_category_link($categories[0] -> term_id )?>" class="category-link"><?php echo $categories[0]->cat_name?></a>
                <?php endif; ?>
                    <div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
            </div>
         </a>

However, this is the code that is being outputted to the browser:

  <a href="http:somelink">
    </a>
  <div class="img">
    <a href="http:somelink">
      <img style="display: none;" src="imagelink.jpg" alt="This isn’t our beautiful contest – how did we get here?">
      <span class="zoom hide-ie"><i class="fa fa-search"></i></span>
    </a>
    <a href="categorylink/" class="category-link">Agency Mojo</a>
    <div class="background" style="background-image: url('http://imagelink.jpg');"></div>
  </div>

So as you can see, it’s closing the link immediately, and then adding another link inside of the `

Any help would be amazing as I’ve seen this question asked but not answered in a few other places including here on this site

Related posts

Leave a Reply

1 comment

  1. I generally try to avoid nesting anchor tags. Perhaps something like this would work better.

    <div class="img">
        <?php if ( has_post_thumbnail() ): ?>
            <a href="<?php the_permalink(); ?>">
                <img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>" />
                <span class="zoom hide-ie"><i class="fa fa-search"></i></span>
            </a>
        <?php endif; ?>
        <?php if ($categories): ?>
            <a href="<?php echo get_category_link($categories[0]-> term_id ); ?>" class="category-link">
                <?php echo $categories[0]->cat_name; ?>
            </a>
        <?php endif; ?>
        <a href="<?php the_permalink(); ?>">
            <div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
        </a>
    </div>