Insert a DIV Container inside a Modified WordPress Loop

3 comments

1. Please try the following:

   Step 1: The loop

   $i=0;
   $items = array();
   if ( have_posts() ) : 
       while ( have_posts() ) : the_post();                    
           switch( ++$i )
           {
               case ( $i <= 3 ):
                   $items['firstcondition'][]  = get_mypart( 'part');
                   break;
               case ( $i <= 9 ):
                   $items['secondcondition'][] = get_mypart( 'part');
                   break;
               case ( $i <= 13 ):
                   $items['thirdcondition'][]  = get_mypart( 'part');
                   break;
               case ( $i <= 15 ):
                   $items['fourthcondition'][] = get_mypart( 'part');
                   break;
               default:
                   $items['fifthcondition'][]  = get_mypart( 'part');
           }
       endwhile; 
   endif;
   

   Step 2: The output

   To output the parts we can use:

   foreach( $items as $key => $item )
   {
       printf( '<div class="%s">%s</div>', $key, join( ' ', $item ) );
   }
   

   Step 3: Our custom function

   We define our custom function to return the corresponding template:

   function get_mypart( $part )
   {
       ob_start();
       get_template_part( 'content', sanitize_file_name( $part ) ); 
       return ob_get_clean();
   }
   

   or using the great idea of this answer here:

   function get_mypart( $part )
   {
       return file_get_contents( locate_template( "content-" . sanitize_file_name( $part ) ) );
   }
   

   We should also consider wrapping our loop with:

   if( function_exists( 'get_mypart' ) ){...}
   

   to make sure our function exists before we try to use it in the loop.

   Also do a similar check when we define the function, just to make sure it doesn’t exists.

   Step 4: The template part(s)

   We create the file content-part.php in the current theme directory:

   <?php
   /**
    *  Content Part
    *  @file content-part.php
    */
   ?>
   <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
       <h1 class="entry-title"><?php the_title(); ?></h1>
       <div class="entry-content">
           <?php the_content(); ?>
       </div>
   </article>
   

   If you want different templates corresponding to each condition you can just create the files:

      content-part1.php
      content-part2.php
      content-part3.php
      content-part4.php
      content-part5.php
   

   and modify the get_mypart( 'part' ) to get_mypart( 'part1' ) etc.

   Step 5:

   Have a cup of coffee and enjoy life 😉

   

   ps: Image borrowed from Wikipedia.

   –Hope this helps.

   Log in to Reply

2. Store the outputs of divs into variables while looping, output after the loop ends.

   # set the variables
   $firstdiv = '';
   $seconddiv = '';
   
   # inside the loop
   while (have_posts()) {
       if ($i <= 3) {$firstdiv .= the_content();} 
       elseif($i <= 9) {$seconddiv .= the_content();}
       elseif($i <= 13) {$seconddiv .= the_content();}
       else{
            $lastdiv .= the_content();
       }
   }
   
   # after the loop
   echo $firstdiv;
   echo $seconddiv;
   

   Log in to Reply

3. Check this one it is close to your problem.

       <div class="container">
   <?php if (have_posts()) { ?>
    <?php
    $i = 1; while (have_posts()) : the_post()   ?>
       <div class="firstpost">
       <?php
       if ($i <= 3) {
           the_title();
           the_content();
   ?></div>
    <?php } elseif ($i <= 9){ ?>
       <div class="secondpost" >
           <?php
           the_title();
           the_permalink(); ?>
       </div><?php
       } elseif ($i <= 13){ ?>
       <div class="secondpost" >
           <?php
           the_title();
           the_permalink(); ?>
       </div><?php
     } elseif ($i <= 15){ ?>
       <div class="secondpost" >
           <?php
           the_title();
           the_permalink(); ?>
       </div><?php
   
       } 
       else {?>
          <div class="defalutclass" >
           <?php
           the_title();
          ?>
       </div><?php
       }
       $i++;?>
   
   <h2>No Posts Found</h2> 
   
   <?php endwhile; ?>
    <?php }  ?>
   </div>
   

   Thanks

   Log in to Reply