August 22, 2023

Add WordPress Category Image and Nested Listings with JetEngine

Play Video

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.

Required Resources

JetThemeCore Logo
Payment required
JetEngine Logo
Payment required
Elementor Logo
Free Options
Credit to Crocoblock
Crocoblock is a YouTube channel dedicated to providing tutorials, tips, and insights on WordPress and web design. With a focus on the Crocoblock suite of plugins and themes, the channel offers valuable content for WordPress enthusiasts, developers, and designers looking to enhance their skills and create websites with their tools. Through step-by-step tutorials, product overviews, and expert advice, Crocoblock helps its audience master the art of WordPress website building and customization.
Add WordPress Category Image and Nested Listings with JetEngine
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.