Dynamic pages for linked categories and content

The names you used might mean you’re looking to create an online shop. If that’s the case, Woocommerce is what you need.

If the names where just for exemplification or you need to do something else with them, I would say you need the following:

You may decide if you want your taxonomies hierarchical (like the categories) or non-hierarchical (like the tags) – it’s just a variable in the code used to create the taxonomy. If you’re new with WP, maybe the code seems too much – but this was the first thing I learned to do in WP some 4 years ago, and doing it ever since.

Still, if you’d like an easier solution, you could use Custom Post Type UI or any similar plugin.

So far, one of your biggest questions is not yet answered: how to add an image to each taxonomy. You can find some custom code to add to your functions.php to enable that, there are even plugins offering just that feature. But my solution would be to use a different plugin: Advanced Custom Fields. It’s really easy to use, and it helps you a lot in developing your custom theme. You can add lots of types of fields to your posts (including CPT), pages and taxonomies. If you need more (like repeater fields, for example), they have a PRO version for around $20 / 1 site – or $80 / unlimited sites.

With this you have your back-end pretty much set up. But you’ll need to display all the data on the front-end. For this, you need to understand the template hierarchy. You don’t need to read the whole page, just look at the image they have there – it’s good enough to get the idea.

Basically, with what the structures presented above, you’d need the following templates (in your theme’s root):

  • archive-product.php: list all the products
  • single-product.php: show a single product
  • taxonomy.php (or taxonomy-clothing_category, taxonomy-brand and so on if you want each of those to look different): list all the products in a taxonomy
  • as the taxonomy templates list the products (posts) in that taxonomy, and not the taxonomies themselves, I usually use a workaround for this situation: I create a custom page template (or more, if they need different designs) and use get_terms() to display those taxonomies. Usually, I would also use the slug of the pages in the process, so I would have this code in the custom template:

    <?php 
    global $post;
    $post_slug=$post->post_name;
    $terms = get_terms( array(
      'taxonomy' => 'post_tag',
      'hide_empty' => false,
    ) );
    ?>
    

    Doing this, you’d have this link structure for your site:

  • example.com/products/ – your list of products

  • example.com/products/nice-product/ – one of your products

  • example.com/clothing_categories/pants/ – the product in pants taxonomy (the slug in bold is set up when you create the custom taxonomy)

  • example.com/clothing_category/ – the custom page set up to display all the categories, with their images (the slug is set in the custom page)

I hope I was clear enough in my explanations, but if there is something unclear, let me know in the comments and I’ll do my best to better explain that.