show wordpress posts only under current category

Question

i'm trying to build a navigation for a website, and i'm struggling with it. I'm trying to make a foldable navigation that shows only categories at first, when clicked, they link to the category, and show current category posts only.

I came this far:

<?php
        // get all the categories from the database
        $cats = get_categories(); 

            // loop through the categries
            foreach ($cats as $cat) {
                // setup the cateogory ID
                $cat_id= $cat->term_id;
                // Make a header for the cateogry
                echo '<h2><a href="./?cat='.$cat->term_id.'">'.$cat->name.'</h2>';
                // create a custom wordpress query
query_posts("cat=$cat_id");

      // start the wordpress loop!
if (have_posts()) : while (have_posts()) : the_post();     ?>
                    <?php // create our link now that the post is setup ?>
                    <a href="<?php the_permalink();?>"><?php the_title(); ?></a><br>


                <?php endwhile; ?> <?php endif; // done our wordpress loop. Will start again for each category ?>         
            <?php } // done the foreach statement ?>

The problem with this is: when i fill in the query so that it only takes the current cat, it displays current cat posts on both my categories. this is what i want for the nav actually:

• graphic design
• Other Projects

when clicked on graphic design:

• graphic design

  • Project 1
  • Project 2

• Other Projects

when clicking on Other projects:

• graphic design
• Other Projects
  • Project 1
  • Project 2

so basically: - when clicking from Index page to a category, only that category should expand - when clicking the other category, the current category changes, so the previous category collapses and the other one expands.

and a bonus: is it possible, that when on a single post, there expands another level of info? for example, a few custom fields per post. like this:

• graphic design
• Other Projects
  • Project 1
    • custom field 1
    • custom field 2
    • …
  • Project 2

thank you very much

Answer 1

Try this code

<?php $article_categories = get_categories(array(
                                        'child_of' => get_category_by_slug('graphic design')->term_id
                                ));

        $talentChildren = get_categories(array('child_of' => get_category_by_slug('Project 1')->term_id));
     ?>


        <div id="content" class="narrowcolumn" role="main">

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

            <div class="post-list">


                    <?php foreach($talentChildren as $talent): ?>
                        <?php
                        $talentSubChildren = new WP_Query();
                        $talentSubChildren->query(array('category_name' => $talent->slug));
                        ?>
                            <h2><?php echo $talent->name; ?></h2>
                            <ul>
                            <?php while ($talentSubChildren->have_posts()) : $talentSubChildren->the_post(); ?>
                                <li>
                                    <?php talent_thumbnail(); ?>
                                    <h4>
                                        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
                                    </h4>
                                    <p><?php the_excerpt(); ?></p>
                                    <a href="<?php the_permalink() ?>">read on &raquo;</a>

                                </li>
                            <?php endwhile; ?>
                            </ul>
                    <?php endforeach; ?>


                    <?php if($wp_query->max_num_pages!=1):?>
                    <div class="pagination">
                        <?php previous_posts_link('&laquo; prev') ?>
                        <span class="current"><?php echo $wp_query->query['paged']; ?></span>
                        of <span class="total"><?php echo $wp_query->max_num_pages; ?></span>
                        <?php next_posts_link('next &raquo;') ?>
                    </div><!-- .pagination -->
                    <?php endif; ?>

            </div>

        <?php else : ?>

            <h2 class="center">Not Found</h2>
            <p class="center">Sorry, but you are looking for something that isn't here.</p>
            <?php get_search_form(); ?>

        <?php endif; ?>

        </div>

Answer 2

Ive gotten a bit further, but i need some help now.

<?php
    // get all the categories from the database
    $cats = get_categories(); 

        // loop through the categries
        foreach ($cats as $cat) {
            // setup the cateogory ID
            $cat_id= $cat->term_id;
            // Make a header for the cateogry
            echo '<h2><a href="./?cat='.$cat->term_id.'">'.$cat->name.'</h2>';
            // create a custom wordpress query
query_posts("cat=$cat_id"); ?>
   <?php if (in_category($cat_id)) { ?>
<?php  if (have_posts()) : while (have_posts()) : the_post();     ?>
                <?php // create our link now that the post is setup ?>
                <a href="<?php the_permalink();?>"><?php the_title(); ?></a><br> 
          <?php endwhile; ?> <?php endif; // done our wordpress loop. Will start again for each category ?>
    <?php } else { ?>
<?php } ?>
  <?php } // done the foreach statement ?>

So this is working now: it lists the posts per category, if in the current category, else it doesnt show anything.

now what i still want: i want to add something extra within the loop IF i'm on a single page. I have this code:

<?php wp_reset_query(); ?>
<?php if (is_single('84')) {  ?>
Yes
<?php } else { ?>
no
<?php } ?>

But that would mean i have to break a query in the middle of a loop. and the is_single thing does not work inside a loop / without the query reset.

I want it looking like this with above code:

• Graphic Design
  • project 1 (for example id=84)
    • Yes
  • project 2 (for example id=101)
    • No

thanks