help center

Help / Elementor Editor / Using widgets to create your page / Control your page layout / Loop Grid widget / Create a category page using the Loop Grid or Loop Carousel

Control your page layout

On this page

    Create a category page using the Loop Grid or Loop Carousel

    Last Update: June 17, 2024

    Taxonomy Queries allow you to create loops based on post or product categories or tags. For example, if you run a food blog you can create a Loop Grid or Loop Carousel displaying the categories of articles – Appetizers, Soups, Desserts etc..

    Create a category page

    The example below shows a Taxonomy query for posts in a Loop Grid but the same principles apply to products and to the loop Carousel.

    For details about creating a Loop Grid, see Build a Loop Grid.

    To create a taxonomy query:

    1. Drag the Loop Grid to canvas. For details, see Add elements to a page.
      image 39 Create a category page using the Loop Grid or Loop Carousel 217
      A Loop Grid appears on the canvas.
    2. In the panel, go to the Choose template type dropdown and select Post Taxonomy.
      image 40 Create a category page using the Loop Grid or Loop Carousel 219
      If Woocommerce is installed, a ‘Product Taxonomy’ option will also appear.
      Click create a template Create a category page using the Loop Grid or Loop Carousel 221
    3. Click Create a template.
      When we build the template, we’ll use dynamic information. For example, instead of typing in the category names, we’ll use the dynamic tag ‘Archive Title’. This will automatically retrieve the category names without having to manually enter them. For more information, see Dynamic tags.
      Important
      Taxonomy loops for Posts can use the following dynamic tags:
      • Archive Title
      • Archive Description
      • Archive URL
      • You can also add images for your categories using ACF taxonomy images. See Add an image to post categories for more details. 

      image 42 Create a category page using the Loop Grid or Loop Carousel 223
    4. In the popup window, click Save.
      image 43 Create a category page using the Loop Grid or Loop Carousel 225
    5. Drag a Heading widget to the template you just created.
      image 44 Create a category page using the Loop Grid or Loop Carousel 227
    6. In the panel, click the dynamic icon GbwzVBbV0pQ9StDf0pBO c4gHp32uljt1Z4L0GczkKNa4urwGAQ ag39aCr0piBFC7TGwS9luiTSiHGvJWXp1b DYn2NWHawPrS8hDPb7UeTvE2iriHuElfeCaiqmtbbSoldkG9X7cnzPmqPeLetQ Create a category page using the Loop Grid or Loop Carousel 229 next to Title. 
      image 45 Create a category page using the Loop Grid or Loop Carousel 231
    7. Select Archive Title from the dropdown.
      Note
      In WordPress, Post and Product taxonomies are considered a type of archive.

      image 46 Create a category page using the Loop Grid or Loop Carousel 233
      Usually you don’t want the word Category to appear in the loop, so we’ll remove that.
      image 47 Create a category page using the Loop Grid or Loop Carousel 235
    8. In the panel, in the Title field, click the wrench icon qWWYqCMcbitQk5hsc Create a category page using the Loop Grid or Loop Carousel 237 to access Settings.
      image 48 Create a category page using the Loop Grid or Loop Carousel 239
    9. In the window, toggle Include Context to No.
      Now we’ll add the category description.
      image 49 Create a category page using the Loop Grid or Loop Carousel 241
    10. Add a Text Editor widget to the template and using the dynamic tag, select Archive Description.
      image 50 Create a category page using the Loop Grid or Loop Carousel 243
    11. Click Save & Back to save the template.
      image 51 Create a category page using the Loop Grid or Loop Carousel 245

    You’ll see how visitors will view the page.

    You can style the page using the controls found in the Loop Grid or Loop Carousel. For details, see Loop Grid widget and Loop Carousel. 

    Make the categories clickable

    Now that you’ve created a category page you need to make it useful. In general, users expect to click on a category and be taken to a category page. 

    There are two ways to make the items clickable:

    • You can make one of the elements clickable. For example, making the heading clickable so visitors can click the heading and go to the category page.
    • You can make the container clickable so visitors can click anywhere in the container and go to the category page. 
    Warning
    You have to choose one of these methods. Putting a clickable element inside a clickable container can break the page.

    In this example, we’ll make the container clickable.

    To make a category clickable:

    1. While editing the template, select the container by clicking the icon in the upper left corner.
      image 52 Create a category page using the Loop Grid or Loop Carousel 247
      Container settings will appear in the panel.
      image 53 Create a category page using the Loop Grid or Loop Carousel 249
    2. In the panel, open the Additional Options section.
      image 54 Create a category page using the Loop Grid or Loop Carousel 251
    3. From the HTML Tag dropdown menu, select a (link).
      image 55 Create a category page using the Loop Grid or Loop Carousel 253
    4. In the Link field, click the dynamic tag WVVvPi1hswivu9Hlie3V zcHlrwiY JSn22H5MRV sBr0ABKk7Bhc9rfNDMAe1OwKeN0x8F0JUf4IIo xPRLYfNEsqYX 5zXfr5xyg2dDV egP6TwXYCU9GLcjvkaQnJqJGtN4N0Vx5 Create a category page using the Loop Grid or Loop Carousel 255 icon.
      image 56 Create a category page using the Loop Grid or Loop Carousel 257
    5. Select Archive URL from the list.

    When visitors click on the container, they will go to the category page.

    If you want to make one element, such as a Heading or Text Editor widget, clickable:

    1. In the widget’s Content tab, go to the Link field.
      image 57 Create a category page using the Loop Grid or Loop Carousel 259
    2. Click the dynamic tag icon 9NWVhxBiXW8nekN5hLr77tT7epGjhPmPuml49qHN1aj4 qt9wdAoONRt1CKp3vzD6v0GkDSZWOzdCNHcSyFIXD0Z4cjmOnuULViIUBLmQR2ShXSlWc5WwmXo45NLEKEVA5sGTfpDw7U Pazyx2 Gmw Create a category page using the Loop Grid or Loop Carousel 261 and select Archive URL. 

    Removing the category – Uncategorized 

    Uncategorized is a default category that is always present for WordPress posts and products. You probably don’t want it to appear on your category page.

    To hide the Uncategorized category:

    1. Select the Loop Grid or Carousel widget.
      image 58 Create a category page using the Loop Grid or Loop Carousel 263
    2. Open the Query section.
      image 59 Create a category page using the Loop Grid or Loop Carousel 265
    3. In the Filter By dropdown menu select Manual Selection.
      image 60 Create a category page using the Loop Grid or Loop Carousel 267
    4. In the panel, click Exclude.
      image 61 Create a category page using the Loop Grid or Loop Carousel 269
    5. In the Search & Select text box, enter Uncategorized. 

    The Uncategorized category will not appear in the loop.

    Note
    The Taxonomy query is compatible with most commonly used ACF fields and custom post types.

    Add an image to post categories

    You can add images to product categories using WooCommerce and then add those Featured Images to your template. However, for posts you’ll need to use the third-party ACF plugin to add images to your category. For more information about how to attach images to categories, consult the ACF documentation.

    Once these images are attached to your categories, you can add them to your loop.
    image 62 Create a category page using the Loop Grid or Loop Carousel 271

    In the following example, the category images are in a field labeled Featured image.  

    To add images to the template:

    1. Add an Image widget.
      Note
      These steps apply to any widget that uses images.

      image 63 Create a category page using the Loop Grid or Loop Carousel 273
    2. In the panel, in the Content tab, click the dynamic tag icon N7JdQmxmosGePsslEiLVIkDgiNg 2U9iStnLdBrXtl2p WSmalAob QMCTWEHv07oAFtywjjLnJAzCUiQ3f6cwMx1SoJ1q3UtflgTQX5RiP3 GWXe5zmpcew7 gu5DdCOeeeuT98oqJRYwFX3Aa Cw Create a category page using the Loop Grid or Loop Carousel 275.
      image 64 Create a category page using the Loop Grid or Loop Carousel 277
    3. From the dropdown menu, select ACF Image Field.
      image 65 Create a category page using the Loop Grid or Loop Carousel 279
    4. In the dynamic field, click the key icon.
      image 66 Create a category page using the Loop Grid or Loop Carousel 281
    5. In the Key dropdown, select the field you selected for category images.

    The template will now display the category images.

    Have more questions? We’re more than happy to assist.

    Contact Support
    Link is copied to clipboard!
    On this page

    Is this article helpful?

    Share this article

    Related Content

    Create a tags page using the Loop Grid or Loop Carousel

    Taxonomy Filter widget

    Add an alternate template in a loop grid

    Build a loop from an existing template

    Paginate your loop