admin管理员组文章数量:1387325
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(); ?>
本文标签： how to display posts content on the custom css popup by clicking on each title on the sidebar
版权声明：本文标题：how to display posts content on the custom css popup by clicking on each title on the sidebar? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744526224a2610763.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论