0

I am trying to loop through 3 posts, but separating each one into it's own div as some jQuery will show and hide one at a time.

I've created the code to show one, but separating them I am unsure of.

<div id="news-container-1">
    <?php
    // Create a variable to hold our custom Loop results
    $excludes  = array('4135');
    $frontpageposts = get_posts( array( 
         'numberposts' => 1, // only the 3 latest posts
         'post__not_in' => $excludes
    ) );

    // Create output only if we have results
    // Customize to suit your HTML markup
    if ( $frontpageposts ) { 

         foreach ( $frontpageposts as $fppost ) { 
              // setup postdata, so we can use template tags
              setup_postdata($fppost);
              ?>

              <div <?php post_class(); ?>>
                   <h4><a href="<?php the_permalink(); ?>"><?php //the_title(); ?>Latest News #1</a></h4>
                   <div class="post-entry">
                        <?php                                                
                                $content = $post->post_content;
                                $searchimages = '~<img [^>]* />~';

                                /*Run preg_match_all to grab all the images and save the results in $pics*/

                                preg_match_all( $searchimages, $content, $pics );

                                // Check to see if we have at least 1 image
                                $iNumberOfPics = count($pics[0]);

                                if ( $iNumberOfPics > 0 ) { ?>
                                    <!-- GRAB THE IMAGE AND USE WHATEVER HTML YOU LIKE -->
                                      <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /></a>
                                <?php }
                        ?>
                        <?php //the_excerpt(); ?>
                   </div>
              </div>

    <?php }
    } 
    ?>
</div>

I've changed the 'numberposts' to one in this instance as showing 3 here will display all 3 within the first news-container-1 div.

The other two divs are:

<div id="news-container-2"></div>
<div id="news-container-3"></div>
4
  • Just add the div inside loop – Sisir May 26 '14 at 11:37
  • You can add <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> instead of <div <?php post_class(); ?>> – dipali May 26 '14 at 11:42
  • Adding the divs inside the loop will just keep giving the ahref link to the first post on both second and third div. – wharfdale May 26 '14 at 11:51
  • @DipaliDhole but then the id will keep changing and I won't be able to control which div via jQuery is/isnt being shown. – wharfdale May 26 '14 at 11:53
1

This isn't really a WordPress question, but all you need to do is setup a counter for the class integer that you want, as follows:

    <?php
    // Create a variable to hold our custom Loop results
    $excludes  = array('4135');
    $frontpageposts = get_posts( array( 
         'numberposts' => 3, // only the 3 latest posts
         'post__not_in' => $excludes
    ) );

    // Create output only if we have results
    // Customize to suit your HTML markup
    if ( $frontpageposts ) { 

         $i = 1;

         foreach ( $frontpageposts as $fppost ) { 
              // setup postdata, so we can use template tags
              setup_postdata($fppost);
              ?>

             <div id="news-container-<?php echo $i++ ?>">

              <div <?php post_class(); ?>>
                   <h4><a href="<?php the_permalink(); ?>"><?php //the_title(); ?>Latest News #1</a></h4>
                   <div class="post-entry">
                        <?php                                                
                                $content = $post->post_content;
                                $searchimages = '~<img [^>]* />~';

                                /*Run preg_match_all to grab all the images and save the results in $pics*/

                                preg_match_all( $searchimages, $content, $pics );

                                // Check to see if we have at least 1 image
                                $iNumberOfPics = count($pics[0]);

                                if ( $iNumberOfPics > 0 ) { ?>
                                    <!-- GRAB THE IMAGE AND USE WHATEVER HTML YOU LIKE -->
                                      <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /></a>
                                <?php }
                        ?>
                        <?php //the_excerpt(); ?>
                   </div>
              </div>
    </div>


    <?php }
    } 
    ?>
0

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.