I need help figuring this out. I need to display different posts and pages in a loop but I am having challenges nesting them. I am not sure that's the right word to Use but I am pasting my code below for any assistance and I will indicate where I want the first content to stop and how I where the second content goes.
Please note that the content is under one List Item (li). I just want it to have different categories to show different content. I would be glad if someone helps out.
Thanks in Advance This is the beginning of the entire code to display content and the loop begins here.
<li>
<div class="hero-carousel-item">
*// First content begins here.......
<div class="background-container imagefill"
style="background-image: url('<?= get_the_post_thumbnail_url() ?>')"
data-imagefill-alt="<?= get_the_post_thumbnail_caption() ?>">
</div>
<div class="l-container">
<div class="info">
<div class="content">
<h2><?php
$posttags = get_the_tags();
if ($posttags) {
foreach ($posttags as $tag) {
echo $tag->name . " ";
}
}
?><br></h2>
<a class="link-caret" href="<?php the_permalink();?>" target="_blank"><?php the_title();?></a>
</div>
//* First Content ends here. It is a different category
<div class="content related">
*//Related Content begins here and Its where i want to put another category of Tag content.....
<h3><?php
$posttags = get_the_tags();
if ($posttags) {
foreach ($posttags as $tag) {
echo $tag->name . " ";
}
}
?></h3>
<ul>
(I need two items in this li) as shown below
<li><a class="link-caret" title="<?php the_title();?>" href="<?php the_permalink();?>" target="_blank"><?php the_title();?></a></li>
<li><a class="link-caret" title="<?php the_title();?>" href="<?php the_permalink();?>" target="_blank"><?pho the_title();?></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
I tried Using multiple loops but all of them require extensive repetition and they still don't work
Could you please try to use the given code instead of your one. For showing the related content I have used the WP Query instead of get_the_tags(), in the given code you need to replace category-slug with the slug of your slug of related category slug and you can also update posts_per_page as per your need.
<li>
<div class="hero-carousel-item">
<!-- First content begins here -->
<div class="background-container imagefill" style="background-image: url('<?= get_the_post_thumbnail_url() ?>')" data-imagefill-alt="<?= get_the_post_thumbnail_caption() ?>">
</div>
<div class="l-container">
<div class="info">
<div class="content">
<h2>
<?php
$posttags = get_the_tags();
if ( $posttags ) {
foreach ( $posttags as $tag ) {
echo $tag->name . ' ';
}
}
?>
<br></h2>
<a class="link-caret" href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a>
</div>
<!-- First Content ends here -->
<!-- Related Content begins here -->
<div class="content related">
<h3>Related Posts</h3>
<ul>
<?php
// Fetch related posts based on a different category or tag
$related_args = array(
'post_type' => 'post',
'posts_per_page' => 2, // Number of related posts to display
'category' => 'category-slug' // Change this to the desired category slug
);
$related_query = new WP_Query($related_args);
if ( $related_query->have_posts() ) :
while ( $related_query->have_posts() ) : $related_query->the_post(); ?>
<li>
<a class="link-caret" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" target="_blank">
<?php the_title(); ?>
</a>
</li>
<?php endwhile;
wp_reset_postdata(); // Reset the global post object
else : ?>
<li>
No related posts found.
</li>
<?php
endif;
?>
</ul>
</div>
<!-- Related Content ends here -->
</div>
</div>
</div>
</li>