Wordpress is changing the structure of my template

Question

I have a template built, elements wrapped in other elements and such. When the page loads wordpress is changing the structure of my template.

<?php
get_header();
?>
<div class="container bt-news-archive-container">
    <div class="row bt-news-archive-wrapper">
        <?php
        if ( have_posts() ) {
      while ( have_posts() ) : the_post();
          ?>
                <div class="col-xs-12 col-sm-6 col-md-4 bt-news-post-container">
                    <a href='<?php echo get_the_permalink(); ?>' class="bt-news-post-wrapper">
                        <div class='bt-news-post-img-wrapper'>
                            <?php echo $filterPostThumbnail; ?>
                            <span class="bt-news-post-img-overlay"></span>
                        </div>
                        <h3 class="bt-news-post-title"><?php echo get_the_title(); ?></h3>
                        <p class="bt-news-post-date"><?php echo get_the_date() ?></p>
                        <p class="bt-news-post-excerpt"><?php echo get_the_excerpt(); ?></p>

                        <a href="<?php echo get_the_permalink(); ?>" class="btn btn-default bt-read-more-btn" role="button">
                            <span class="bt-read-more-text">Read More</span>
                            <i class="bt-read-more-icon fa fa-arrow-right"></i>
                        </a>
                    </a>
                </div>
          <?php
        endwhile;
      } else {
        ?>
        <div class"row bt-news-archive-wrapper"><p>No News Posts Found</p></div>
        <?php
      };
        ?>
    </div>
  <?php
  wp_reset_postdata();
  ?>
</div>
<?php get_footer(); ?>

When loaded, the anchor around the read more button is loading as a sibling to the wrapping anchor. It does this with other things sometimes too. Why?

Answer 1

This is likely caused by the browser rendering an anchor nested within an anchor. Many browsers will attempt to correct invalid html.

The read more anchor is not necessary. You can just make that a span tag. Your wrapping anchor tag is encompassing everything within so you should be fine.

I would do it this way to avoid weird linkless gaps:

    <div class="col-xs-12 col-sm-6 col-md-4 bt-news-post-container">
         <div class='bt-news-post-img-wrapper'>
            <?php echo $filterPostThumbnail; ?>
            <span class="bt-news-post-img-overlay"></span>
         </div>
         <h3 class="bt-news-post-title"><?php echo get_the_title(); ?></h3>
         <p class="bt-news-post-date"><?php echo get_the_date() ?></p>
         <p class="bt-news-post-excerpt"><?php echo get_the_excerpt(); ?></p>
         <div class="button-wrapper">
              <span class="bt-read-more-text">Read More</span>
              <i class="bt-read-more-icon fa fa-arrow-right"></i>
         </div>
         <a href='<?php echo get_the_permalink(); ?>' class="bt-news-post-wrapper"></a>
    </div>

and css:

.bt-news-post-container{
    position:relative;
}

.bt-news-post-wrapper{
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
}

That way your anchor is covering the whole box so no matter where you click you will be taken to the permalink. Plus, the read more has a wrapper you can use to make sure your icon aligns properly.