We shall set each item to link to the term archive page.
Update on 13 Mar 2022: Added instructions to set this up for WooCommerce product categories.
Let's say you have a CPT called
deal with an associated
city taxonomy so that deals can be organized by city. Now you want to have a page that shows all the cities so visitors can go to
This tutorial shows you how we can add obtain all the cities and loop over them to show the city image plus name and use CSS Grid to arrange them in a grid.
Let's register a custom image size for the city images.
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Custom image sizes
add_image_size( 'square-thumbnail', 600, 600, true );
If you have not already, register
deal CPT and
Let’s install a plugin so we can assign images to the city taxonomy's terms.
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.