Add WordPress Category Image and Nested Listings with JetEngine

Learn how to add a WordPress category image and efficiently display categories with nested listings using JetEngine, JetThemeCore, and Elementor. Create elaborate post designs and express your creativity.

Setting Up Categories

Before we start, let’s understand our workspace. In WordPress, categories are like the folders on your computer. You’ve got:

• Parent Categories:
  • Books
  • Photography
  • Travel
• Child Categories (for Photography as an example):
  • Landscape
  • Macro
  • Portrait

Now, imagine if each of these folders had a cool icon. That’s what we’re aiming for!

Adding a WordPress Category Image

1. Click on ‘Taxonomies’ via the JetEngine Menu. If it looks empty, don’t fret. There’s a ‘Built-In’ button. Click on it, and ‘Categories’ will appear.
2. In ‘Taxonomies’, you’ll see ‘Categories’. Click on it.
3. Here, we’ll add a new meta field. This is where our image will reside.
4. For the ‘Field Type’, select ‘Media’.
5. Hit ‘Update’ to save your changes.

Now, return to your categories. You’ll spot a new image field. Time to upload an image for each category!

Displaying Category Images on Posts

1. Go to JetEngine > Query Builder
2. Create a New Query
   Name it ‘Parent Category Query’.
3. Post Terms Query
   Select this and opt for ‘Categories’ for taxonomy.
4. Object Post IDs
   Pick ‘Current ID’.
5. Parent Category Display
   To showcase only parent categories, set the ‘Parent Child’ option to ‘Parent’ and set the value to ‘0’.

Building a Listing Item with JetEngine

1. Go to ‘Listings’ on the JetEngine menu.
2. Click on ‘Add New’ to create a new listing.
3. For ‘Listing source’, choose ‘Taxonomies’.
4. For ‘From Taxonomy’, select ‘Categories’.
5. Click on ‘Create Listing Item’ and it will launch the Elementor editor.
6. Here, you’ll use JetEngine widgets to design your listing.
7. Drag the ‘Dynamic Field’ widget onto the canvas. Set the ‘Object Field’ to ‘Name’ to display the category name.
8. Next, drag the ‘Dynamic Image’ widget. Set the ‘Source’ to ‘Term Thumbnail’ to display the WordPress category image you added.
9. Feel free to adjust the layout, style, and other design elements to your liking.
10. Once you’re satisfied with the design, click ‘Publish’ or ‘Update’ to save your listing item.

Building a Custom Single Post Template with Nested Listings

1. Navigate to the Crocoblock theme builder.
2. Start crafting your post template.
3. Add dynamic fields for the post title and content.
4. Display your categories using the JetEngine listing grid you just created.

Displaying Nested Listings

Nested listings are like the sub-folders within your main folders.

Create New Child Category Query

1. In JetEngine’s Query Builder, create a ‘Child Category Query’.
2. Select ‘Terms Query’ as the query type.
3. In the General tab select ‘Categories’ as taxonomy.
4. Select ‘Current ID’, click on Advanced Settings, and select ‘Default WordPress Object (for current page)’ as the Object/Post Ids.
5. Go to the ‘Parent/Child’ tab and select ‘Queried term’ under Parent.
6. Save the new query.

Create New JetEngine Child Category Listing

1. Go to ‘Listings’ on the JetEngine menu.
2. Click on ‘Add New’ to create a new listing.
3. For ‘Listing source’, choose ‘Terms’.
4. For ‘From Taxonomy’, select ‘Categories’.
5. Click on ‘Create Listing Item’ and it will launch the Elementor editor.
6. Add a dynamic image widget and under ‘Custom meta field/repeater key’ enter ‘image’.
7. Update the listing.

Add child listing to parent listing

1. Open your parent category listing which you created earlier.
2. Add a listing grid within it.
3. Select the child category listing.
4. Under ‘Custom Query’ select your ‘Child Category Query’.
5. Refine the listing designs to your liking.

Wrapping Up

With JetEngine, there are so many possibilities to customize your WordPress site. Whether you’re adding WordPress category images or setting up nested listings, the possibilities are endless. Have fun experimenting.