From what I understand, there is a list of parent categories and the subcategories, which are like a menu. For your first screenshot:
Cat1
-Subcat1
-Subcat2
-Subcat3
Cat2
-Subcat1
-Subcat2
-Subcat3
Assuming you only have two levels of categories, you would use this to display your categories. Note that you can use this outside the loop:
<ul class="category-sidebar">
<?php
$get_parent_cats = array(
'parent' => '0' //get top level categories only
);
$all_categories = get_categories( $get_parent_cats );//get parent categories
foreach( $all_categories as $single_category ){
//for each category, get the ID
$catID = $single_category->cat_ID;
echo '<li><a href=" ' . get_category_link( $catID ) . ' ">' . $single_category->name . '</a>'; //category name & link
$get_children_cats = array(
'child_of' => $catID //get children of this parent using the catID variable from earlier
);
$child_cats = get_categories( $get_children_cats );//get children of parent category
echo '<ul class="children">';
foreach( $child_cats as $child_cat ){
//for each child category, get the ID
$childID = $child_cat->cat_ID;
//for each child category, give us the link and name
echo '<a href=" ' . get_category_link( $childID ) . ' ">' . $child_cat->name . '</a>';
}
echo '</ul></li>';
} //end of categories logic ?>
</ul><!--end of category-sidebar-->
Now for your second screenshot, I assume that when you click on a parent category from the above menu, it will show a page like that with each sub-category and it's description.
Refer to the tutorial I left in the comments for using conditionals in the category.php, basically what you'll be doing in the archive is checking if a parent category is loading or a sub-category. If it's a sub-category, show a loop of posts, if it's a parent, show the sub-categories with descriptions page. Here is what the code for the sub-categories and their descriptions would look like in the loop:
<?php
//for this category on an archive page, get the ID
$thisID = get_query_var('cat');
$get_children_cats = array(
'child_of' => $thisID //get children of this parent using the thisID variable from earlier
);
$child_cats = get_categories( $get_children_cats );//get children of this parent category
foreach( $child_cats as $child_cat ){
//for each child category, get the ID
$childID = $child_cat->cat_ID;
//for each child category, give us the link and name and description
echo '<div class="child-wrap"><h2><a href=" ' . get_category_link( $childID ) . ' ">' . $child_cat->name . '</a></h2><br/>';
echo '<p>' . $child_cat->category_description . '</p></div>';
} //end of categories logic ?>
I realize this is a lot of code but it looks like you're asking to do multiple things, the only task you have to work on yourself is getting the archive to either display the list of posts or your page in the second screenshot. Hope this helps better than the resources in the comments that I'd provided earlier. Good luck!
