Child Categories Grid For Themes Using Get Template Part

This template for themes using get_template_part() like Twenty Twenty and most other parent themes, generates a responsive grid containing a image & child taxonomy title as seen in the following screenshot :

Tested using the Twenty Twenty default theme for WordPress. If you’re using a theme framework which uses hooks, like Genesis, use this tutorial instead.

You can use the template to display child terms for any type of taxonomy.

Demo Video

Shows the child category image for each sub category displayed in a 3 column responsive grid using the Twenty Twenty default theme for WordPress.

Works in most WordPress themes.

Installation Steps

The code comes pre-installed in a blank child theme for Twenty Twenty which members can access using the download folder button at the end of this post. If you want to install the code manually in your own child theme, follow these instructions –

There’s 5 steps :

# Step 1 : Upload the file named content-sub-cats.php to your child themes template-parts folder.

Make sure you swap out the parent term id with the id for your parent term which includes the child terms you want displayed on lines 17 and 18 in templates-parts > content-sub-cats.php. Here’s an example showing the values which need to match your parent term :

# Step 2 : Upload the file named page-child-terms.php to the folder named templates.

# Step 3 : Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

# Step 4 : Install the ACF plugin ( free or premium version ) and import the file named acf-archive-image.json

# Step 5 : Create a new page and select the Template named ACF Sub Cats from the Templates drop down menu in the Page Attributes box on the Edit Page screen.

Once you install the code, you can then setup your child categories and add a image for each using the ACF image field. They will only show in the grid when they have at least 1 post assigned to each child category.

Download Folder