Once you’ve created your collections and added your collection items, it’s time to display them on your site. 

Kirki gives you two ways to do this:

• Collection Element – Display a list of collection items on any page of your site.

• Collection Template – Create a dedicated page template for each collection item, so each item has its own page.

Using the Collection Element

The Collection element lets you display a list of items from any of your collections on any page. In Kirki, when you add a collection element, it’s already linked to its data source.

Add Collection Element

1. Open the Insert panel from the left panel and go to Contents > Collections. 

2. You’ll see a list of all available collections, including default WordPress types like Posts and Pages, and any custom collections you’ve created using Kirki’s Dynamic Content Manager (marked with a CMS badge). 

3. Drag and drop the collection you want to add to the canvas

4. Once placed on the page, it will already be linked to the relevant collection.

Connect List Item Elements to Collection Fields

1. Select an element inside the single item wrapper, such as an image or a text block.

2. Open the Dynamic Content Settings from the Right Panel.

3. Set the Type to your collection – for example, Portfolio.

4. Set the Value to the field you want it to display – for example, Image or Title.

5. Repeat this for each element in the card until the full layout is populated with live collection data.

You can also add, remove, and customize elements in the single item wrapper to craft a structure that best suits your needs and map any extra elements in the same way.

Filter Collection List

1. Select the Collection element and open the Dynamic Content Settings. 

2. Click the plus (+) icon next to Add Filter and choose a field to filter by.

3. Set your condition – for example, show only items where Featured is checked or Year is between 2023 and 2025.

4. For fields that support multiple conditions, click the plus (+) icon to add another condition to the same field and set the logic to AND to narrow results further, or OR to broaden them.

5. Click the plus (+) icon again to stack more filters as needed.

Sort Collection List

1. Select the Collection element and open the Dynamic Content Settings. 

2. Set the Method to the field you want to sort by – for example, Date or Title.

3. Set the Order to ascending or descending.

Limit Collection Items Displayed

1. Select the Collection element and open the Dynamic Content Settings. 

2. Set the Limit value to control how many items appear in the list.

3. You can also specify a Start value to control which item in the list to begin from.

Add Pagination

1. Select the Collection element and open the Dynamic Content Settings.

2. Click the Pagination dropdown.

3. Choose a pagination style:
   • Numeric – for page numbers
   • Infinite Scroll – to load items automatically as the user scrolls
   • Load More – to show a button that loads additional items

Set Collection List Layout

1. Select the Collection element and open the Dynamic Content Settings. 

2. Pick from the available layout options to control how the list renders on the page.

Using Collection Templates

A Collection Template is a single-page design that automatically generates a dedicated page for every item in your collection. Design it once, and each item gets its own page.

Create Template

1. In the Pages panel, click the plus (+) icon and select Template.

2. Set the Collection to Post and choose your collection as the Post Type – for example, Portfolio.

3. Click Add Template to create it.

Design Template

1. The template opens as a blank page.

2. Design your page just like any other page in Kirki. Use pre-built sections for speed, or design it from scratch using elements.

Connect Template Elements to Collection Fields

1. Select any element on the page and open its Dynamic Content Settings.

2. Set the Type to your collection – for example, Portfolio.

3. Set the Value to the collection field you want that element to display.

4. Repeat this for each element until the full layout is mapped to your collection fields.

Preview Different Collection Items

1. Click the dropdown in the top bar.

2. Select any item from the list to preview how the template looks with that item’s data.

3. Verify the layout works across your entire collection before publishing.

Add Dynamic SEO

You can optimize the SEO for your Collection Template Pages by setting up dynamic titles and meta descriptions.

To do that, define a pattern for SEO titles and meta descriptions using dynamic field tags that will automatically apply to all items in the collection.

Access SEO Settings

1. In the Pages panel, click the ellipsis (…) icon beside the template page and select Settings. 

2. Navigate to the SEO tab to configure your dynamic SEO.

Dynamic Field Tags

Use the dynamic field tags to populate SEO meta title & description with dynamic data, ensuring each page is optimized based on its unique content.

Similarly, you can dynamically set the Open Graph cover image, title, and description, ensuring that your content is correctly represented when shared on social media platforms.

Configure General Settings

From the General tab in the Page Settings panel, configure other options for the template page, including:

• Page Name and URL: Set a descriptive name and URL for the template.

• Page Description: Add a brief description of the page’s purpose.