Insert a DIV Container inside a Modified Wordpress Loop

Question

I'm working on a modified wordpress loop where in it has an if and else condition inside. The code is down below.

What I'm trying to do is add a container that will hold every post that meets the condition. This will group each condition.

http://pastebin.com/1R2jsWkY

<div class="container">

<?php if (have_posts()) : ?>

<?php
$i = 1;
while (have_posts()) {
    the_post();

// Add a DIV CONTAINER that holds the FIRST CONDITION
    if ($i <= 3) {
        the_title();
        the_content();
// Add a DIV CONTAINER that holds the FIRST CONDITION



// Add a DIV CONTAINER that holds the SECOND CONDITION
    } elseif ($i <= 9) {
        the_title();
        the_permalink();
// Add a DIV CONTAINER that holds the SECOND CONDITION


// Add a DIV CONTAINER that holds the THIRD CONDITION
    } elseif ($i <= 13) {
        the_title();
        the_permalink();
// Add a DIV CONTAINER that holds the THIRD CONDITION


// Add a DIV CONTAINER that holds the FOURTH CONDITION
    } elseif ($i <= 15) {
        the_title();
// Add a DIV CONTAINER that holds the FOURTH CONDITION


// Add a DIV CONTAINER that holds the FIFTH CONDITION
    } else {
        the_title();
// Add a DIV CONTAINER that holds the FIFTH CONDITION
    }
    $i++;
}

?>

<?php else : ?>

<h2>No Posts Found</h2>

<?php endif; ?>

</div>

If I add an echo '<div class="FirstCondition">';where my comments are, this is what happens.

enter image description here

It only repeats the div container that I added. What I need is to add a simple DIV Container that HOLDS all posts that meet the criteria.

The final output would be like this:

<div class="FirstCondition">
    Wordpress Published Post that meets the criteria for the First Condition
    Wordpress Published Post that meets the criteria for the First Condition
    Wordpress Published Post that meets the criteria for the First Condition
    Wordpress Published Post that meets the criteria for the First Condition
</div>

<div class="SecondCondition">
    Wordpress Published Post that meets the criteria for the Second Condition
    Wordpress Published Post that meets the criteria for the Second Condition
    Wordpress Published Post that meets the criteria for the Second Condition
    Wordpress Published Post that meets the criteria for the Second Condition
</div>

<div class="ThirdCondition">
    Wordpress Published Post that meets the criteria for the Third Condition
    Wordpress Published Post that meets the criteria for the Third Condition
    Wordpress Published Post that meets the criteria for the Third Condition
    Wordpress Published Post that meets the criteria for the Third Condition
</div>

<div class="FourthCondition">
    Wordpress Published Post that meets the criteria for the Fourth Condition
    Wordpress Published Post that meets the criteria for the Fourth Condition
    Wordpress Published Post that meets the criteria for the Fourth Condition
    Wordpress Published Post that meets the criteria for the Fourth Condition
</div>

<div class="FifthCondition">
    Wordpress Published Post that meets the criteria for the Fifth Condition
    Wordpress Published Post that meets the criteria for the Fifth Condition
    Wordpress Published Post that meets the criteria for the Fifth Condition
    Wordpress Published Post that meets the criteria for the Fifth Condition
</div>

Is this possible? how? please help.

Community · Accepted Answer · 2017-05-23 10:28:53Z

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 ;-)

Coffee

ps: Image borrowed from Wikipedia.

--Hope this helps.

Nice is IMPRESSIVE!!! This is exactly what I'm looking for! Thank you @birgire for sharing your talent :) Thank you very much for your help!
It says that I can only award your +50 after 17 hours... But I promise, i will! Thank you again!

Anatoliy Kim · Accepted Answer · 2014-04-12 06:02:43Z

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;

edited Apr 12, 2014 at 6:02

answered Apr 12, 2014 at 5:48

Anatoliy Kim

7564 silver badges13 bronze badges

6 Comments

Kareen Lagasca Over a year ago

let me try that approach.. thanks for your answer Toly.

Kareen Lagasca Over a year ago

can you do it? I don't know where to put it inside my wordpress loop. Here's the code for my wp loop. pastebin.com/1R2jsWkY Please? Sorry but I have a very limited knowledge in PHP.

Anatoliy Kim Over a year ago

sorry, not a wordpress user here.. i am not sure what your functions the_post(), the_title() and the_permalink() do, but if they have option to return content instead of outputting it - just store what they return into variables.

Anatoliy Kim Over a year ago

oh, and you also have the_content() function apparently. well, whichever of these functions is producing the output - you need to concatenate (add) it like I showed you in my answer.

Kareen Lagasca Over a year ago

I see, Thank you very much for your help.. I just can't figure out how to integrate your codes.

|

Narendra · Accepted Answer · 2014-04-12 07:44:03Z

0

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

edited Apr 12, 2014 at 7:44

answered Apr 12, 2014 at 7:12

Narendra

4642 silver badges5 bronze badges

2 Comments

Kareen Lagasca Over a year ago

Hi Narendra, thank you for your answer but If there, by using dreamweaver, the error points after the <?php endwhile; ?>

Kareen Lagasca Over a year ago

I think it's not working... this is what happening when I run your code. i.sstatic.net/hBqo4.png The div first post should group or hold the post # 1 to 3, then the div secondpost should group or hold the post 4 to 9 and so on..

Collectives™ on Stack Overflow

Insert a DIV Container inside a Modified Wordpress Loop

3 Answers 3

Step 1: The loop

Step 2: The output

Step 3: Our custom function

Step 4: The template part(s)

Step 5:

2 Comments

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Step 1: The loop

Step 2: The output

Step 3: Our custom function

Step 4: The template part(s)

Step 5:

2 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related