0

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">&times;</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(); ?>
0

Oh! 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">&times;</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(); ?>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.