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’?
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
I generally try to avoid nesting anchor tags. Perhaps something like this would work better.