I tried adding some HTML code to a WordPress theme header file. It worked well at least that's what I thought but when I click one of my post, it redirects the whole site to the same posts over and over again. The pictures and titles are so different though so I am sure it loops correctly. I feel it is where I am adding the HTML code. It is in the theme header PHP file. How can I do this better?
<!-- Responsive slider-->
<?php
if(!is_front_page()){
echo '
<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
';
global $wpdb;
$query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'featured-posts',
));
$posts = $query -> posts;
?>
<?php
foreach ($posts as $post) {
echo ' <div class="card-container">
<a href="'.$post->guid.'" class="card">
<div class="img">
<img src="'.get_the_post_thumbnail_url( $post -> ID, 'thumbnail' ).'" alt="">
/div>
<div class="info">
<h5>'.$post->post_title.'</h5>
</div>
</a>
</div>
';
?>
<?php }
echo '
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
';
?>
<?php } ?>
<!--End of responsive slider-->
my code
Website header php file code I added it to the site grid.
<div id="zox-site-grid">
<div id="zox-site-wall-small">
<?php $zox_lead_page2 = get_option('zox_lead_page2'); if (($zox_lead_page2 == "1" && is_front_page()) || ($zox_lead_page2 == "2" && ! is_404()) || ($zox_lead_page2 == "3" && ! is_front_page() && ! is_404())) { ?>
<?php $zox_lead_img2 = get_option('zox_lead_img2'); $zox_lead_url2 = get_option('zox_lead_url2'); if ($zox_lead_img2 && ! is_404()) { ?>
<div id="zox-lead-bot">
<a href="<?php echo esc_url($zox_lead_url2); ?>" target="_blank">
<img src="<?php echo esc_url($zox_lead_img2); ?>" />
</a>
</div><!--zox-lead-bot-->
<?php } else { ?>
<?php $zox_lead_ad2 = get_option('zox_lead_ad2'); if ($zox_lead_ad2 && ! is_404()) { ?>
<div id="zox-lead-bot">
<?php echo html_entity_decode($zox_lead_ad2); ?>
</div><!--zox-lead-bot-->
<?php } ?>
<?php } ?>
<?php } ?>
<div id="zox-main-body-wrap" class="left relative">