How can I automatically display a visual archive of subcategory posts [and thumbnails] separate from Parent category?

Question

I am using a Wordpress theme, Uncode, that uses the WP Bakery Page Builder / Visual Composer. Here is a brief how-to video that shows the module as part of the theme to query each archive type. https://www.youtube.com/watch?v=M8_H2neBRRA

I want to create categories and subcategories within the Posts section to differentiate the posts: https://toddsines.com/direction/ <-- lists all Direction spots

https://toddsines.com/direction/fashionfilms/ <-- Should list all Fashion films I directed, but instead throws a 404 error.

I tried looking into tweaking the Uncode child theme functions.php, category.php, archive.php and category-$slug.php, as well as some specific subcategory PHP files to show just the results of 1 Subcategory instead of the Parent category to no avail.

I tried to follow this and it is way over my head [I'm a director/photographer/musician, not really a developer, but will get my hands dirty when necessary]

How to create a category and sub-category sorted blogroll with all posts?

<?php
/* template name: Posts by Category! */
get_header(); ?>

        <div id="container">
            <div id="content" role="main">

            <?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>".$cat->name."</h2>";
                    // 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(); ?>

                        <?php // create our link now that the post is setup ?>
                        <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                        <?php echo '<hr/>'; ?>

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

            </div><!-- #content -->
        </div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

I stuck the above in a file called archive-postsbycategory.php and I'm still getting 404 errors. I am sure that is incorrect but I also don't know what is correct syntax.

Additionally, I saw that the developer in the StackExchange link tried to automatically create archives of categories without having to hard-code each and every subcategory, because they may expand, shrink or be reorganized. So making custom content blocks within the theme's post/page builder seems redundant given that the work is being categorized in the post as each post is made. I am surprised that this functionality is not standard practice. I tried looking for plugins and I clearly cannot find the right flavor of queries or something that does not break the Uncode theme to achieve my desires. I would prefer an elegant example — don't we all?

The end result would be like this: A Finder window, with an index of large thumbnails and captions below, but styled similar to this: https://toddsines.com/direction/

When I click the dropdown to https://toddsines.com/direction/fashionfilms/

I should only see fashion films contained within the Direction category.

I DO NOT want a text list.

I want it to look exactly like the examples above and in the YouTube clip — aka styled buttons with animations, CSS-styled text overtop regenerated thumbnails from the media library, etc.

I have fought with WP for the last 4 days trying to figure this out.

Answer 1

WordPress should automatically be displaying archives for each category using files from your theme (or child theme - more on that lower down) from the file hierarchy.

The specific order is:

1. category-slug.php
2. category-ID.php
3. category.php
4. archive.php
5. index.php

It sounds like you need to create or edit your category.php file unless you have ID or slug based customisations. Check the documentation if in doubt.

As for your 404 errors, check the permalinks section in your admin area. Sometimes (especially after making changes) it needs you to hit save there to flush through the changes.

Further reading

Customising archives

This guide goes into detail about customising archives but it is just one of many tutorials on the web.

Child themes

A child theme is a way to make a theme based on another theme without updates to the parent undoing all your work. I assume that this is what you have done in customising your theme. If not Google the subject because there is a lot of good content already written about creating a child theme.