I want to display post titles based on post_tag from default post_type concat with post_category from another post_type named 'update' on the sidebar. And finally When users click on each title it opens a popup on which it displays the current title and the content of the post that clicked. until now it works fine to open popup clicking on each title on the sidebar but I can't manage the loop and for loop in a way that displays the related title and content that I click on it instead it only displays the content of first title only. I know that my code has a lot of extra arrays and loops. I know that it may need only a minor change in location of popup or the loop or forloop but I am new to wordpress and it looks very complex to me.
Below is the whole code. please have a look. I am stuck.
Thank you so much in advance.
Any help is most appreciated.
Code:
<section class="section-page">
<!-- loop starts here... -->
<?php
while(have_posts()) {
the_post();
pageBanner();
?>
<div class="second-row">
<div class="Col-2-of-3">
<div class="main-content">
<div class="time"><?php the_time('F d, Y'); ?> </div>
<?php the_content(); ?></div>
</div>
<div class="Col-1-of-3">
<div class="card">
<div class="card--front">
<div class="card--picture">
</div>
<div class="card--heading">
<?php
$post_id = get_the_ID();
if($post_id == 35) { ?>
<h4 class="heading-tertiary u-margin-bottom-small u-center-text"><a>Search by first letter</a></h4>
<table class="card-table">
<tr>
<td><a href="#a">A</a></td>
<td><a href="#b">B</a></td>
<td><a href="#c">C</a></td>
<td><a href="#d">D</a></td>
<td><a href="#e">E</a></td>
<td><a href="#f">F</a></td>
<td><a href="#g">G</a></td>
</tr>
<tr>
<td><a href="#h">H</a></td>
<td><a href="#i">I</a></td>
<td><a href="#j">J</a></td>
<td><a href="#k">K</a></td>
<td><a href="#l">L</a></td>
<td><a href="#m">M</a></td>
<td><a href="#n">N</a></td>
</tr>
<tr>
<td><a href="#o">O</a></td>
<td><a href="#p">P</a></td>
<td><a href="#q">Q</a></td>
<td><a href="#r">R</a></td>
<td><a href="#s">S</a></td>
<td><a href="#t">T</a></td>
<td><a href="#u">U</a></td>
</tr>
<tr>
<td><a href="#v">V</a></td>
<td><a href="#w">W</a></td>
<td><a href="#x">X</a></td>
<td><a href="#y">Y</a></td>
<td><a href="#z">Z</a></td>
</tr>
</table>
<?php } else {
$post_cats = new WP_Query(array(
'post_type' => 'post',
'p' => get_the_ID()
));
$myArray = array();
$myArray2 = array();
$hero = array();
$hero2 = array();
$i = 0;
while($post_cats->have_posts()){
$post_cats->the_post();
for(;$i<=count(get_the_category()); $i++ ) {
$all_cats = get_the_category();
$all_Tags = get_the_tags();
?>
<h4 class="heading-tertiary u-margin-bottom-small u-center-text"> <?php
$hero2 = $all_Tags[0]->name;
if($hero = $all_cats[$i]->cat_name == 'Topic' OR $hero = $all_cats[$i]->cat_name == 'Project' OR $hero = $all_cats[$i]->cat_name == 'Uncategorized') {
echo '';
} else {
echo $hero = $all_cats[$i]->cat_name;
}
?>
</h4>
<?php array_push($myArray, $hero);
$hero2 = $all_Tags[0]->name;
$post_tags = new WP_Query(array(
'post_type' => 'update',
'tag' => $hero2.'-'.$myArray[$i]
));
while($post_tags->have_posts()){
$post_tags->the_post();
?>
<ul>
<li class="sidebar-lists"><a class="sidebar-links" href="#popup"><?php the_title();
?></a></li>
</ul>
<div class="popup" id="popup">
<div class="popup__content">
<div class="popup__left">
<img src="<?php echo get_theme_file_uri('/img/nat-3-large.jpg'); ?>" alt="First photo" class="popup__img">
<img src="<?php echo get_theme_file_uri('/img/nat-2-large.jpg'); ?>" alt="First photo" class="popup__img">
</div>
<div class="popup__right">
<a href="#section-page" class="popup__close">×</a>
<h3 class="heading-tertiary u-margin-bottom-small u-center-text"><?php the_title(); ?></h3>
<p class="popup__text">
<?php the_content();
?>
</p>
</div>
</div>
</div>
<?php } wp_reset_postdata();
}
} wp_reset_postdata();
}
?>
</div>
<div class="card--bottom"></div>
</div>
</div>
</div>
</div>
<!-- main loop ends here... -->
<?php } ?>
</section>
<?php get_footer(); ?>
