Ask your WordPress questions! Pay money and get answers fast! (more info)

Wordpress Loop Categories WordPress

  • SOLVED

I have the following set of code, which more or less returns a struture like.

<div id="additional1" class="1"></div>
<div id="additional1" class="2"></div>
<div id="additional1" class="3"></div>

<div id="summarytop" class="catA">
<div id="summaryrepeat" class="1"></div>
<div id="summaryrepeat" class="2"></div>
</div>

<div id="summarytop" class="catB">
<div id="summaryrepeat" class="3"></div>
</div>

The additional1 id is related back to the summaryrepeat (I added in classes just to show how they are related)

However I need to include the additional1 div within the loops somehow, so that the code more or less returns something like:

<div id="additional1" class="1"></div>
<div id="additional1" class="2"></div>

<div id="summarytop" class="catA">
<div id="summaryrepeat" class="1"></div>
<div id="summaryrepeat" class="2"></div>
</div>

<div id="additional1" class="3"></div>

<div id="summarytop" class="catB">
<div id="summaryrepeat" class="3"></div>
</div>

Essentially so the additional1 divs are also grouped with category.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="additional1">
</div>
<?php endwhile; ?>
<?php endif; ?>


<?php
// get all the categories from the database
$args = array('child_of' => 3);
$cats = get_categories($args);

// loop through the categries
foreach ($cats as $cat) {
// setup the cateogory ID
$cat_id= $cat->term_id;
?>

<!-- Placed at top of each category -->
<div id="summarytop">

<?php
// create a custom wordpress query
query_posts("cat=$cat_id&posts_per_page=100");
// start the wordpress loop!
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="summaryrepeat">
</div>
<?php endwhile; ?> </div>
<?php endif; ?>
<?php } // done the foreach statement ?>

Answers (2)

2014-06-18

Sébastien | French WordpressDesigner answers:

not sur to understand... it's not clear.
What is the content of this classes
<div id="additional1" class="1"></div>
<div id="additional1" class="2"></div>
<div id="additional1" class="3"></div>

is it a counter ??


vi_au comments:

no, as i said - i just put those in to show you how it relates.


Sébastien | French WordpressDesigner comments:

not clear. What you want exactly ?
A div like that :
<div id="additional1" class="3"></div>
above each <div id="summarytop">

if that's your question,
try this :

<?php
// get all the categories from the database
$args = array('child_of' => 3);
$cats = get_categories($args);

// loop through the categries
foreach ($cats as $cat) {
// setup the cateogory ID
$cat_id= $cat->term_id;
?>

<div id="additional1" class="3"></div>
<!-- Placed at top of each category -->
<div id="summarytop">
<?php
// create a custom wordpress query
query_posts("cat=$cat_id&posts_per_page=100");
// start the wordpress loop!
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div id="summaryrepeat">
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php } // done the foreach statement ?>


but I suppose that is not your question...
try to explain more clearly


vi_au comments:

Am trying! If I place the div before the summarytop, it doesnt quite work. I think you have it correct though - but the problem with placing it before summarytop, is that if the category has 2 posts (for example), it only shows once.

With the code, the initial foreach creates the surrounding div for the grouped category content, and then when it starts the loop it goes through each post and outputs it details - therefore each category (and its posts) are essentially in their own column.

The additional1 div is to add on to this, but the problem is they need to be grouped as well - so that they appear as per the outline in the initial post.


Sébastien | French WordpressDesigner comments:

sorry... it's probably a very simple problem but I don't understand your explanation...


Sébastien | French WordpressDesigner comments:

you creates a list of posts sorted by category (only child of 3).
OK.
So your code outputs something like that :

category 1
-post 1 of this category 1
-post 2 of this category 1
-post 3 of this category 1
...

category 2
-post 1 of this category 2
-post 2 of this category 2
-post 3 of this category 2
...

category 3
-post 1 of this category 3
-post 2 of this category 3
-post 3 of this category 3
...



and ??


vi_au comments:

Correct, so each DIV is its own category - this successfully separates each into their own DIV.

What I now want to do, is add another div at the start relating to each post.

So -

category 1 post 1 full
category 1 post 2 full
category 1 post 1 summary
category 1 post 1 summary

category 2 post 1 full
category 2 post 2 summary

... and so on.

At the moment (with my initial code) it does:
category 1 post 1 full
category 1 post 2 full
category 2 post 1 full

category 1 post 1 summary
category 1 post 1 summary
category 2 post 2 summary

So at the moment, I have the summary repeating within the loop for each category. I need to include an extra div in this loop, without destroying the structure, and so that they always come before the associated summary. Does that make better sense?


vi_au comments:

Sorry typo - should read:

category 1 post 1 full
category 1 post 2 full
category 1 post 1 summary
category 1 post 2 summary

category 2 post 1 full
category 2 post 1 summary

... and so on.

At the moment (with my initial code) it does:
category 1 post 1 full
category 1 post 2 full
category 2 post 1 full

category 1 post 1 summary
category 1 post 2 summary

category 2 post 2 summary


Sébastien | French WordpressDesigner comments:

use two loops... simply.
something like that :


<?php
// get all the categories from the database
$args = array('child_of' => 3);
$cats = get_categories($args);

// loop through the categries
foreach ($cats as $cat) {
// setup the cateogory ID
$cat_id= $cat->term_id;

query_posts("cat=$cat_id&posts_per_page=100");
?>


<div id="full_post">
<?php
// first loop for full post
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div id="summaryrepeat">
</div>
<?php
endwhile; ?>
</div>
<?php endif; ?>



<div id="summarytop">
<?php
// second loop for summary
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div id="summaryrepeat">
</div>
<?php
endwhile; ?>
</div>
<?php endif; ?>



<?php } // done the foreach statement ?>


vi_au comments:

Looks good to me - thanks :)


Sébastien | French WordpressDesigner comments:

you're welcome
don't forget to vote for award :)


vi_au comments:

Have already done so

2014-06-18

Arnav Joy answers:

try this

<?php

// get all the categories from the database

$args = array('child_of' => 3);

$cats = get_categories($args);



// loop through the categries

foreach ($cats as $cat) {

// setup the cateogory ID

$cat_id= $cat->term_id;

?>



<!-- Placed at top of each category -->

<div id="summarytop">



<?php

// create a custom wordpress query

query_posts("cat=$cat_id&posts_per_page=100");

// start the wordpress loop!

if (have_posts()) : while (have_posts()) : the_post(); ?>

<div id="summaryrepeat">

</div>

<?php endwhile; ?> </div><div id="additional1"></div>

<?php endif; ?>

<?php } // done the foreach statement ?>


vi_au comments:

No, the additional1 div needs to come before the summarytop. Placing it before the endif shows it after the summarytop div