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(); ?>
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(); ?>
1 Answer
Reset to default 0Oh! Thanks God. I could finally fix it myself.
Below is the working code: I had a lot of stress being stuck. I share it to help any one who likes to have a fully functional custom popup without any plugin. below is the code. If you are interested just ask me the css for it.
Enjoy!
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();
$myArray3 = 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
$hero3 = $all_cats[$i]->slug;
array_push($myArray, $hero3);
$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="#<?php the_title(); ?>" ><?php
the_title();
?></a></li>
</ul>
<?php
for($d=0; $d<=2; $d++) { ?>
<div class="popup" id="<?php the_title(); ?>">
<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-3 u-margin-bottom-small u-center-text">
<?php
the_title();
?>
</h3>
<div class="popup__text" style="font-size: 1.7rem">
<?php
the_content();
?>
</div>
</div>
</div>
</div>
<?php } } wp_reset_postdata();
} // for loop ends here
} wp_reset_postdata();
}
?>
</div>
<div class="card--bottom"></div>
</div>
</div>
</div>
</div>
<!-- main loop ends here... -->
<?php } ?>
</section>
<?php get_footer(); ?>