June 26, 2023

Display A Category Featured Image with JetEngine & Elementor Pro

Play Video

Customize and enhance your website by adding a Category Featured Image. Presented by Wicky Design this tutorial is centered around using JetEngine and Elementor Pro to achieve this. Not only will we discuss how to add a featured image to your categories, but we will also show how to display your categories in a listing grid. Additionally, we will touch on the use of the query builder in JetEngine for advanced filtering for your listing grid. This tutorial is perfect for those who want to give their WordPress site a more organized and visually appealing look.

Adding a Category Featured Image

  1. Create a Meta Box
    Navigate to JetEngine on your WordPress dashboard and click on ‘Meta Boxes’. Here, you will create a new Meta Box that will allow you to add a featured image to your categories. Name your Meta Box (for example, ‘post category images’), select ‘Taxonomy’ for the Meta Box type, and choose ‘Categories’ for the related Taxonomy.
    Create a Meta Box
  2. Add a New Meta Field
    In your newly created Meta Box, add a new Meta Field. Name it ‘category image’ and select ‘Media’ for the field type. Make sure to copy the Meta Field name to your clipboard as you will need it later in the tutorial.
    Add a New Meta Field
  3. Add Images to Your Categories
    Now, when you navigate to your post categories, you should see a new section where you can add a featured image. Add images to a few of your categories to start with.
    Add Images to Your Categories

Creating a Listing Grid to Display Your Categories

  1. Create a Listing
    Navigate to ‘Listings’ under JetEngine on your WordPress dashboard. Here, you will create a new listing. For the listing source, select ‘Terms’, and for the Taxonomy, choose ‘Categories’. You can then start designing your listing using Elementor.
    Create a Listing
  2. Define and Design Your Listing
    In your listing, add an image widget and select ‘Term Image’ under JetEngine in the Dynamic tags. Make sure ‘Categories’ is selected for the Taxonomy and enter the Meta Field name you copied earlier. You can also add a header widget and a text editor widget to display the category name and description respectively.
    Design Your Listing
  3. Make Your Listing Clickable
    To make your listing clickable, go to ‘Additional Options’ under your container and select ‘Term URL’ under JetEngine in the Dynamic tags. This will make the entire container clickable and redirect to the respective category page when clicked.
    Make Your Listing Clickable
  4. Add a Listing Grid
    Now that your listing is designed, you can add a listing grid to your page. Simply create a new page, add a listing grid, and select your newly created listing. The listing grid will automatically populate with your categories.
    Add a Listing Grid
  5. Use the Query Builder to refine the Grid Results
    If you want to show specific categories or just want to sort them differently you can create a custom query for your listing grid. Create a custom query in the query builder and set the listing grid to the created query.

Why This Tutorial is Beneficial

Understanding how to add a Category Featured Image and display it in a listing grid can greatly enhance the visual appeal and organization of your WordPress site. It allows you to provide a more engaging and visually pleasing experience for your site visitors. Furthermore, the skills learned in this tutorial can be applied to other aspects of your website, making it a valuable addition to your WordPress toolkit.

Tips for Choosing Effective a Category Featured Image

Choosing the right featured images for your categories is crucial. Here are a few tips to help you select effective images:

  • Relevance
    The image should be relevant to the category. It should give the user an idea of what kind of content they can expect in that category.
  • Quality
    The image should be high-quality and clear. Blurry or pixelated images can make your site look unprofessional.
  • Consistency
    Try to maintain a consistent style or theme for all your featured images. This can help to create a cohesive look and feel for your site.
  • Size
    Be mindful of the size of your images. Large images can slow down your site, which can negatively impact user experience and SEO.

Common Issues and Their Solutions

  1. The featured image is not displayed in the listing grid
    Make sure you have added a featured image to your categories. The listing grid will not display an image if none has been added.
  2. The listing is not clickable
    Ensure that you have selected ‘Term URL’ under JetEngine in the Dynamic tags for your container. This will make the entire container clickable.
  3. The listing grid is not populating with categories
    Check that you have selected the correct listing in your listing grid. The listing grid will not populate if the wrong listing is selected.

Required Resources

JetEngine Logo
Payment required
Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Display A Category Featured Image with JetEngine & Elementor Pro
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.