Wordpress - List of posts by category after clicking category link

Question

On my wordpress site I have a page that lists all categories and sub categories using the following code.

<ul>
<?php 
$parents = get_categories(array('parent' => 0, 'exclude' => '1,7','hide_empty' => 0));
if(!empty($parents)){
    foreach($parents as $parent){
        ?>
        <li>
            <div class="catImg">
                <span><img src="<?php echo z_taxonomy_image_url($parent->term_id); ?>" /></span>
            </div>
            <h2><?php echo $parent->name; ?></h2>
            <ul class="models">
                <?php wp_list_categories(array('hierarchical' => false, 'hide_empty' => 0, 'title_li' => __( '' ), 'show_option_none'   => __( '' ), 'child_of' => $parent->term_id)); ?>
            </ul>
        </li>
        <?php
    }
} else { 
    ?>
    <li>No Categories</li>
    <?php } ?>
</ul>

The code above generates multiple blocks like the photo below. In the photo, 'Team Losi Racing' is the parent category, '8ight 3.0' and '8ight EU' are subcategories of Team Losi Racing.

When I click on the sub categories within the ul.models list I would like to be taken to a page that lists all posts within that category.

As I'm new to wordpress and this is my first theme, I was wondering if someone could possibly point me in the right direction to achieving the above result.

Thanks in advance

Answer 1

ANSWER ONE

As my understanding. You can do like below. Just try this. If you have any query or concern feel free to contact me in any network by searching yeshansachithak.

CODE

<ul>
    <?php 
    $parents = get_categories(array('parent' => 0, 'exclude' => '1,7','hide_empty' => 0));
    if(!empty($parents)){
        foreach($parents as $parent){
            ?>
            <li>
                <div class="catImg">
                    <span><img src="<?php echo z_taxonomy_image_url($parent->term_id); ?>" /></span>
                </div>
                <h2><?php echo $parent->name; ?></h2>
                <ul class="models">
                    <?php 
                      $categories = get_categories('child_of'=>$parent->ID); //Pass the Parent category id here
                      foreach ($categories as $category) {
                        echo '<li>'.$category->cat_name.'</li>';//Child cat list
                        //Show links by using css after click above sub-cat name
                        ?>
                        <ul class="sub-cat-post-links">
                        <?php
                            $args = array( 'offset'=> 1, 'category' => $category->cat_ID );
                            $myposts = get_posts( $args );
                            foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
                                <li>
                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                </li>
                            <?php endforeach; 
                            wp_reset_postdata();
                        ?>
                        </ul>
                        <?php
                      }
                     ?>
                </ul>
            </li>
            <?php
        }
    } else { 
        ?>
        <li>No Categories</li>
        <?php } ?>
    </ul>

Explanation

From your code you can get the parent category. Then we can get the child category of that parents. In the child category list we can list down the posts belongs to child and parent. That list will show after you click on the child cat name. You have to do some css also on that. When we click on the posts name/title. It will take us to the post.single.php

Thanks. This is so quick. Sorry for my bad english

Brief Look

In my answer, Regarding your que image. Team Losi Racing and XRAY is parent category names. 8ight 3.0 and 8ight EU is child category names. When you click on child cat names. It will show the belongs posts below the child category name. like drop down. After you click on the post link. It will take you to the post contents.

As per our discuss please see below second answer. i don't want to delete the first answer. It also help to someone.

ANSWER TWO

here is the code. You can do like below. Just try this. If you have any query or concern feel free to contact me in any network by searching yeshansachithak.

<ul>
    <?php 
    $parents = get_categories(array('parent' => 0, 'exclude' => '1,7','hide_empty' => 0));
    if(!empty($parents)){
        foreach($parents as $parent){
            ?>
            <li>
                <div class="catImg">
                    <span><img src="<?php echo z_taxonomy_image_url($parent->term_id); ?>" /></span>
                </div>
                <h2><?php echo $parent->name; ?></h2>
                <ul class="models">
                    <?php 
                      $categories = get_categories('child_of'=>$parent->ID); //Pass the Parent category id here
                      foreach ($categories as $category) {
                        echo '<li>Category: <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a> </li> ';
                      }
                     ?>
                </ul>
            </li>
            <?php
        }
    } else { 
        ?>
        <li>No Categories</li>
        <?php } ?>
    </ul>

Brief Look

On above one. We are taking that child categories from parents cats. After that, we are display the link to that sub category. When click on the link it will take us to the category post list archive.php page. In there you can style you like.

Many Thanks