Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Diving Posts into 3 Columns WordPress

  • SOLVED

I have a code that can divide columns into 2 just fine but now I want 3 columns with 3 posts in each. How would I alter my code to do that?

function gallerypg_category(){
if (is_page('portfolio')) {?>
<div id="gallerycontentpg" class="prepend-1">
<div id="galleryheaderpg">
<h1>PORTFOLIO</h1>
</div>


<div id='gallery_categorypg'>
<?php
global $paged, $more;
$more = 0;

// Second, create a new temporary Variable for your query.
// $creative_query is the Variable used in this example query.
// If you run any new Queries, change the variable to something else more specific ie: $feature_wp_query.
$temp = $portfolio_query;

// Next, set your new Variable to NULL so it's empty.
$portfolio_query = null;

// Then, turn your variable int the WP_Query() function.
$portfolio_query = new WP_Query();

// Set you're query parameters. Need more Parameters?: http://codex.wordpress.org/Template_Tags/query_posts
$portfolio_query->query(array(

// This will create a loop that shows 2 posts from the creative category.
'category_name' => 'portfolio',
'showposts' => '9',
)); ?>

<?php
$count = 1;
// While posts exists in the Query, display them.
while ($portfolio_query->have_posts()) : $portfolio_query->the_post(); ?>

<?php // Start the looped content here. ?>
<div class="post">
<div class="entry-content">
<?php the_content(); ?>
</div>
</div> <!-- closes the first div box -->
<!--This is how to end a loop -->

<?php

/* In the case you're rendering the very last post, do nothing: */
if ($count == 9){
// Do nothing, thematic will add a '</div>' to close the last post
/* Is this the last post in the column?
That means if the loop number divides by 2 (or whatever post per column number we choose) */
} elseif ($count%3 == 0){
/* if this is the bottom post, close the div and start a new div: */
echo '</div>

<div id="column2pg" class="prepend-8">';

?>
<?php

} else {
/* Do nothing, just move on, nothing to see here... */
}



/* We're about to finish the loop, let's add 1 to the count: */

$count = $count + 1;

endwhile; /* loop done, go back up */


/* All the posts are done, close the last column: */
echo '</div>';
echo '</div>';

// End the Query and set it back to temporary so that it doesn't interfere with other queries.
$portfolio_query = null;
$portfolio_query = $temp;

}
}

//Add the function to the Action Hook.
add_action('thematic_belowcontainer','gallerypg_category');

Answers (5)

2010-05-02

Erez S answers:

Replace:
} elseif ($count%3 == 0){
with:
} elseif ($count%2 == 0 && $count%3 != 0){
/*If second colum*/
} elseif ($count%3 == 0){
/*If third column*/

2010-05-02

Merne Asplund answers:

You will need another counter: try this


function gallerypg_category(){

if (is_page('portfolio')) {?>

<div id="gallerycontentpg" class="prepend-1">

<div id="galleryheaderpg">

<h1>PORTFOLIO</h1>

</div>

<div id='gallery_categorypg'>

<?php

global $paged, $more;

$more = 0;

// Second, create a new temporary Variable for your query.

// $creative_query is the Variable used in this example query.

// If you run any new Queries, change the variable to something else more specific ie: $feature_wp_query.

$temp = $portfolio_query;


// Next, set your new Variable to NULL so it's empty.

$portfolio_query = null;

// Then, turn your variable int the WP_Query() function.

$portfolio_query = new WP_Query();



// Set you're query parameters. Need more Parameters?: http://codex.wordpress.org/Template_Tags/query_posts

$portfolio_query->query(array(



// This will create a loop that shows 2 posts from the creative category.

'category_name' => 'portfolio',

'showposts' => '9',

)); ?>



<?php

$count = 1;
$colCount = 1;

// While posts exists in the Query, display them.

while ($portfolio_query->have_posts()) : $portfolio_query->the_post(); ?>



<?php // Start the looped content here. ?>

<div class="post">

<div class="entry-content">

<?php the_content(); ?>

</div>

</div> <!-- closes the first div box -->

<!--This is how to end a loop -->



<?php



/* In the case you're rendering the very last post, do nothing: */

if ($count == 9){

// Do nothing, thematic will add a '</div>' to close the last post

/* Is this the last post in the column?

That means if the loop number divides by 2 (or whatever post per column number we choose) */

} elseif ($count%3 == 0){

/* if this is the bottom post, close the div and start a new div: */

echo '</div>

if($colCount == 0){
<div id="column2pg" class="prepend-8">';
} else {
<div id="column3pg" class="prepend-n">';
}

$colCount++;




?>

<?php



} else {

/* Do nothing, just move on, nothing to see here... */

}







/* We're about to finish the loop, let's add 1 to the count: */



$count = $count + 1;



endwhile; /* loop done, go back up */





/* All the posts are done, close the last column: */

echo '</div>';

echo '</div>';



// End the Query and set it back to temporary so that it doesn't interfere with other queries.

$portfolio_query = null;

$portfolio_query = $temp;



}

}



//Add the function to the Action Hook.

add_action('thematic_belowcontainer','gallerypg_category');


Merne Asplund comments:

Didn't realize that was so long. Here is a highlight of what is changed:


<?php



$count = 1;

/***** Add a counter that controls the column ids. */
$colCount = 1;



// While posts exists in the Query, display them.



while ($portfolio_query->have_posts()) : $portfolio_query->the_post(); ?>







<?php // Start the looped content here. ?>



<div class="post">



<div class="entry-content">



<?php the_content(); ?>



</div>



</div> <!-- closes the first div box -->



<!--This is how to end a loop -->


<?php







/* In the case you're rendering the very last post, do nothing: */



if ($count == 9){



// Do nothing, thematic will add a '</div>' to close the last post



/* Is this the last post in the column?



That means if the loop number divides by 2 (or whatever post per column number we choose) */



} elseif ($count%3 == 0){



/* if this is the bottom post, close the div and start a new div: */



echo '</div>


/****** Determine if we need to start the 2nd or 3rd div */

if($colCount == 0){

<div id="column2pg" class="prepend-8">';

} else {

<div id="column3pg" class="prepend-n">';

}


/**** Hit the colCounter */
$colCount++;


?>



<?php



} else {



/* Do nothing, just move on, nothing to see here... */



}


/* We're about to finish the loop, let's add 1 to the count: */




$count = $count + 1;



endwhile; /* loop done, go back up */


Merne Asplund comments:

Did you have a problem implementing this code? It will work.

2010-05-02

Monster Coder answers:

as you want to show 3 posts in each column, split the array returned by wp_query().
$columns = array_chunk($all,3);

now $columns[0] has first 3 posts, $columns[1] has second 3 posts and $column[2] has third 3 posts.

2010-05-04

Samuel Arendt answers:

UPDATE!


<?php function gallerypg_category(){?>
<?php query_posts('showposts=3&offset=0&category_name="portfolio"');?>
<?php if (have_posts()) :?>
<div class="col-1">
<?php while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content();?>
<?php endwhile;?>
</div>
<?php endif;?>
<?php query_posts('showposts=3&offset=4&category_name="portfolio"');?>
<?php if (have_posts()) :?>
<div class="col-1">
<?php while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content();?>
<?php endwhile;?>
</div>
<?php endif;?>
<?php query_posts('showposts=3&offset=7&category_name="portfolio"');?>
<?php if (have_posts()) :?>
<div class="col-1">
<?php while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content();?>
<?php endwhile;?>
</div>
<?php endif;?>
<?php wp_reset_query(); ?>
<?php
}
add_action('thematic_belowcontainer','gallerypg_category');
?>

2010-05-04

Andrzej answers:

You probably just need to remove this bit?

if ($count == 9){

// Do nothing, thematic will add a '</div>' to close the last post

/* Is this the last post in the column?

That means if the loop number divides by 2 (or whatever post per column number we choose) */

}


This is becasue when your counter reach number 9 it's gonna be 'divideable' by 3 - this is a bit of code from your previous question I believe which worked fine with 2x2 - doesn't seem to be needed here.

Rest of your code looks fine - I guess it should work just after then?