0

Im trying to make a custom wordpress Site, using my own template (im making it), on the homepage im displaying all my posts by categories, tags, and the Excerpt, all of this works Ok, but im trying to make the page a single page Only, so i trying to show each individual post in a Modal window (using only css3 and html5,the modal at its own works great) the problem goes when i bring the coontent of each post inside the modal, it only appears the content of the first post listed, some one can help me?

*Code:

<?php get_header(); ?>
    <!--Pre Loading container-->
    <div class="contenedor" id="contenido">
        <div class="loading anime2" id="loading1">
            <img src="<?php bloginfo('template_url');?>/img/logo1.svg" alt="" class="loading-logo">
        </div>

        <?php
            // get all the categories from the database

            $cats = get_categories(); 

                // loop through the categries
                foreach ($cats as $cat) {
                    // setup the cateogory ID
                    $cat_id= $cat->term_id;
                    // Make a header for the cateogry
                    echo "<div class='panel'> <div class='cuerpo'> <a class='encavezado'>".$cat->name."</a><div class='cuerpoprin'><div class='cuerpoprin2'>";
                    // create a custom wordpress query
                    query_posts("cat=$cat_id&posts_per_page=100");
                    //Some Variables
                    $contador=0;
                        $Audio = "Audio";
                        $Video = "Video";
                        $Texto = "Texto";
                    // start the wordpress loop!    
                    if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <?php $Titulo = get_the_title(the_post());?>
                        <?php $excerpt = "".get_the_excerpt(); ?>
                        <a href="#open-modal" style="text-decoration: none;">
                        <div class='programas' style='left: <?php echo $contador*350; $contador=$contador+1 ?>px;' >

                            <?php
                            // Must be inside a loop.
                            //Thumbnail filter, displays thumbnail by category or by the thumbnail uploaded
                            if ( has_post_thumbnail() ) {
                               echo '<img src="'.get_the_post_thumbnail_url().'" alt="" class="programa">';
                            }else{


                        echo '<img src="';
                        echo bloginfo('template_url').'/img/programas/programa'.$cat->name.'.jpg" alt="" class="programa">';

                            }
                                ?>
                                <!--SubImage Refrence as a watermark of the category each post got this image puted in front of each post of th ecategory it belongs-->
                            <img src="<?php bloginfo('template_url');?>/img/programas/logos/logo-programa<?php echo $cat->name ?>.svg" alt="" class="logo-programa">
                            <!--Subttitle given by the excrept showed in the post display-->
                            <p class="act"> <?php echo $excerpt;$examplePost = get_post();

                            echo $examplePost->ID; ?> </p>

                            <!--Showing an image for the tag of the post-->
                            <div class="programa-etiqueta">
                                <img src="<?php bloginfo('template_url');?>/img/icon/icon-recurso<?php $posttags = get_the_tags();if ($posttags) {foreach($posttags as $tag) {if ($tag->name == $Audio) {echo "1";      }elseif ($tag->name == $Video) {echo "2";   }elseif ($tag->name == $Texto) {echo "3";}}}?>.svg" alt="" class="media-imagen">
                            </div>
                        </div> 


                        <!--HEEEEEEEERE IS THE PROBLEEEEEEEEEEEM (Start of the modal)-->

                        <div id="open-modal" class="modal-window">
                        <div>
                        <a href="#modal-close" title="Close" class="modal-close">Close</a>
                        <!--Here I tried to display post title, in diferent ways, by using local Variables, by showing with  "get_the_title()" function of wordpress passing by parameter the id and the object post , tried to use "the_title()" because im inside of the wordpress loop, but nothing seems to work, it shows only the first post listed info, in every post modal :( (currently is trying to show the Post ID, as before only shows first post listed ID-->
                        <h1><?php $examplePost = get_post();
                                echo $examplePost->ID; ?></h1>
                        <div>



                        </iframe>

                        </div>
                        </div>
                    </div>

                    <?php endwhile; endif; // done our wordpress loop. Will start again for each category ?>

                     </div>
                </div>
            </div>
            </div>

                <?php } // done the foreach statement ?>



    </div>
0

You better bind a click event on every post with jquery and fetch post content using ajax and append post content into your modal.

  • I dont know how to use ajax and all the things behind that, i was trying to do a javascript light wordoress site – user8522720 Sep 10 '17 at 16:30
  • If you want to create one page site then you must use ajax . wp ajax is simple. Just send post id with post request and display post content from php loop – Sajjadur Rahman Sagor Sep 11 '17 at 16:37
  • Its not totally one page but that i want it to be one page but ill try ajax – user8522720 Sep 11 '17 at 16:39
  • Ajax is cool and user friendly you must give it a try. – Sajjadur Rahman Sagor Sep 11 '17 at 16:41

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.