Add container DIVs around sections in loop

Question

I have piece of code below which nearly does what i ned it to do, except I need to modify it so that it adds container DIVs around each set of items within each row. The third snippet of code below shows the output i'm after. I've added around the title groups and the content groups within each row. Please can someone add the missing part of the jigsaw?

The following PHP...

 <?php
        /* To get current page from query var */
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = array('post_type' => array('post'),'posts_per_page' => -1,'paged' => $paged);

         /* Create custom WP_Query */
        $custom_query = new WP_Query( $args );
        $post_ids = array();
        if ( $custom_query->have_posts() ) {
            /* the wordpress loop */
            while ( $custom_query->have_posts() ) : $custom_query->the_post();
                /* Start my loop to get all post id in one array called "$post_ids" */
                $post_ids[] = get_the_id();
            endwhile;
            /* end of the loop */
        } else {
            // no posts found
        }
        /* Restore original Post Data */
        wp_reset_postdata();


        $count = 1;
        $post_title = $post_content = '';
        foreach( $post_ids as $post_id ) 
        {
            if ($count%5 == 1)
            {  
                 echo '<div class="row">';
            }
            $post_title .= '<div class="title">'.get_the_title($post_id).'</div>';
            $post_content .= '<div class="content">'.get_post_field('post_content', $post_id).'</div>';
            if ($count%5 == 0)
            {
                echo $post_title;
                echo  $post_content;
                echo "</div>";
                $post_title = $post_content = '';
            }
            $count++;
        }
        if ($count%5 != 1) {
            echo $post_title;
            echo  $post_content;
            echo "</div>";
        }
        ?>

...currently outputs this HTML...

 <div class="row">
            <div class="title">title1</div>
            <div class="title">title2</div>
            <div class="title">title3</div>
            <div class="title">title4</div>
            <div class="title">title5</div>
            <div class="content">content1</div>
            <div class="content">content2</div>
            <div class="content">content3</div>
            <div class="content">content4</div>
            <div class="content">content5</div>
        </div>
        <div class="row">
            <div class="title">title6</div>
            <div class="title">title7</div>
            <div class="title">title8</div>
            <div class="title">title9</div>
            <div class="title">title10</div>
            <div class="content">content6</div>
            <div class="content">content7</div>
            <div class="content">content8</div>
            <div class="content">content9</div>
            <div class="content">content10</div>
        </div>
        <div class="row">
            <div class="title">title11</div>
            <div class="title">title12</div>
            <div class="title">title13</div>
            <div class="title">title14</div>
            <div class="title">title15</div>
            <div class="content">content11</div>
            <div class="content">content12</div>
            <div class="content">content13</div>
            <div class="content">content14</div>
            <div class="content">content15</div>
        </div>

...but i want to add container DIVs to each section within each row like this...

 <div class="row">
  <div class="container">
            <div class="title">title1</div>
            <div class="title">title2</div>
            <div class="title">title3</div>
            <div class="title">title4</div>
            <div class="title">title5</div>
   </div>
  <div class="container">
            <div class="content">content1</div>
            <div class="content">content2</div>
            <div class="content">content3</div>
            <div class="content">content4</div>
            <div class="content">content5</div>
   </div>
 </div>
 <div class="row">
  <div class="container">
            <div class="title">title6</div>
            <div class="title">title7</div>
            <div class="title">title8</div>
            <div class="title">title9</div>
            <div class="title">title10</div>
   </div>
     <div class="container">
            <div class="content">content6</div>
            <div class="content">content7</div>
            <div class="content">content8</div>
            <div class="content">content9</div>
            <div class="content">content10</div>
    </div>
   </div>
  <div class="row">
  <div class="container">
            <div class="title">title11</div>
            <div class="title">title12</div>
            <div class="title">title13</div>
            <div class="title">title14</div>
            <div class="title">title15</div>
   </div>
  <div class="container">
            <div class="content">content11</div>
            <div class="content">content12</div>
            <div class="content">content13</div>
            <div class="content">content14</div>
            <div class="content">content15</div>
   </div>
 </div>

Your output samples don't look any different, other than row wrapping. Can you provide a clearer example? — MattP
– MattP, Commented May 20, 2015 at 14:39
i've added <div class="container"> around the title groups and the content groups within each row. — Amesey
– Amesey, Commented May 20, 2015 at 14:40
That's much clearer, and will help you get an answer faster. — MattP
– MattP, Commented May 20, 2015 at 14:41
Your query is extremely expensive, you are running 2 queries per post where you can do all of this with one query for 20 posts and not 40 plus queries for 20 posts :-) — Pieter Goosen
– Pieter Goosen, Commented May 20, 2015 at 15:03

harrrrrrry · Accepted Answer · 2015-05-20 14:42:04Z

1

change

if ($count%5 == 0)
        {
            echo $post_title;
            echo  $post_content;
            echo "</div>";
            $post_title = $post_content = '';
        }

to

if ($count%5 == 0)
        {
            echo '<div class="container">';
            echo $post_title;
            echo "</div>";
            echo '<div class="container">';
            echo  $post_content;
            echo "</div>";
            echo "</div>";
            $post_title = $post_content = '';
        }

answered May 20, 2015 at 14:42

harrrrrrry

14.7k2 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add container DIVs around sections in loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related