# List and filter your contents

The **Content list** block shows your contents as cards, filtered and paginated. This article teaches you to choose what the list shows, to build its card and to offer filters, a search and pagination to your visitors.

## Add a list

1. Open in the editor the page that will hold the list, or a template. [Add a block](https://lovelyrender.com/documentation/add-block/) explains how to insert a block.
2. Add the **Content list** block.
3. In the **Settings** tab of the sidebar, **Query** panel, leave **Query source** on **Content type**.
4. Under **Content types**, check the types to list, for example **Projects**. The list fills with their contents.

A list carries a **List body**, which arranges its cards in a grid or in flex. The list body carries an **Item template**: the card repeated for each content. The list body accepts three other blocks, described below: **Exposed filters**, **Search** and **Pagination**.

As long as no type is checked, the panel shows **This list has no source yet**. The list shows nothing on the site. This is the state of a list placed by a catalog creation: it is laid out, and you choose what it lists.

**Note:** Categories are not checked here. A list reaches their terms through the reference: [Link your contents to each other](https://lovelyrender.com/documentation/link-contents/).

## Choose what the list shows

The **Query** panel sets the content of the list.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Query source** | **Content type**: the contents of the checked types. **Reference**: the contents that point to the displayed content. **Siblings**: the contents sorted like the one being read, in the template of a type that has a reference field. **Archive**: the contents of the archive page, in an archive or search template. | **Content type**. |
| **Apply site search term** | On a results page, filters the list with the words the visitor searched for. | Off. |
| **Exclude hidden posts (noindex)** | Leaves out the contents hidden from search engines in their SEO settings. | Off. |
| **Content language** | The language of the listed contents. The section Choose the language of the list details it. | **The language of the page being read**. |
| **Different template per post type** | With several types checked, gives each type its own card. | Off. |

[Link your contents to each other](https://lovelyrender.com/documentation/link-contents/) details the sources **Reference** and **Siblings**.

### Give each type a card

1. Check at least two types under **Content types**, then turn on **Different template per post type**.
2. Duplicate the **Item template** as many times as there are types.
3. On each card, **Post type assignment** panel, choose the type in **This template applies to**.

The card left on **Default (fallback)** serves the types that do not have their own.

## Choose the language of the list

On a multilingual site, **Content language** decides which language the list draws from. The setting appears only from two languages.

| Value | Result for the visitor |
| --- | --- |
| **The language of the page being read** | The list speaks the language of the page that holds it: French contents on the French page, English contents on its translation. |
| **Every language** | All the languages are mixed in the list. |
| A named language, for example **French (France)** | The list always draws from this language, whatever the page. |

The language holds from one page of the list to the next, when the visitor filters and when they search in the list. A content that has no language is always listed.

**Tip:** Is your news written only in French? Choose the named language **French (France)**. The list also shows it on the English pages, instead of staying empty.

## Build the card

The **Item template** is the card repeated for each content. A new card carries two blocks: a level 2 **Heading** that shows the title of the content and leads to it, then the **Post excerpt**.

You add to the card the blocks you want. Each content shows its own values in it. To find the fields of the listed type in the inserter, first select a block of the card. [Show the data of a content](https://lovelyrender.com/documentation/display-content-data/) explains how to show a title, a date or a field.

| Block | Display |
| --- | --- |
| **Post thumbnail** | The featured media of the content, image or video. |
| **Post media** | For a media list, the file itself. For another type, its featured media. |

In the editor, these two blocks show a preview, marked **Preview (will use the actual post media)**. On the site, each card shows its own. A content with no featured media shows none: the following blocks move up.

A video media is set in their **Video settings** panel, for all the cards: **On hover** animates each card when the pointer is on it.

### Mark the card of the page being read

When a list shows the page the visitor is reading, the card of that page takes the **Active** state. Style it in the **Styles** tab of the card. To also change what it contains, turn on **Pass the active state to children**: its blocks take the **Active** state with it.

## Set the link of the card

A new card leads to its content in two ways. A click anywhere on its surface opens it, with no address written in the page. Its title is a real link, the one that search engines and the keyboard follow.

The link of the card is set in its **Link** panel, **Settings** tab.

| Setting | Effect | Default value |
| --- | --- | --- |
| Target | Where the card leads. **Link to the item** leads each card to its own content. | **Link to the item**. |
| **Hide the link from search engines** | The card writes no address in the page: the site opens the target on click. | On. |
| **Open in a new tab** | Opens the target in a new tab. Grayed out as long as the link is hidden. | Off. |

| You want | Do | Result |
| --- | --- | --- |
| A card with no link | Click **Remove link** on the target. | Only the links of its blocks lead anywhere. |
| A card that is a real link | Turn off **Hide the link from search engines**. | The address of each content is written over the whole card. |
| A card to another address | Choose another target in the field. | All the cards lead to the same address. |

On a hidden card, `Ctrl+click` opens the content in a new tab. A click on a link in the card, like its title or a button, follows that link.

**Warning:** A card that is a real link wraps all its content. If it already carries a link, like its title or a button, the browser cuts the card’s link and the layout can fall apart. Nothing warns you. First remove the links from the card’s blocks, or keep the link hidden.

**Warning:** A hidden card cannot be reached with the keyboard. Keep in each card a real link to the content, like the linked title it carries at the start. Without it, search engines no longer find your contents through the list.

## Offer filters

The **Exposed filters** block lets your visitors narrow the list. Add it in the **List body**, then in its **Exposed filters** panel check the filters to offer.

![The Exposed filters panel of a list of projects: the Maintenance contract field checked, a named range called Under 100 m² on the Garden area with the condition Less than or equal to and the value 100, the Garden area checked under Let visitors sort by, then the Garden type reference checked, set to Dynamic (auto).](https://static.lovelyrender.com/uploads/2026/10/902-doc-contenus-filtres.png)

| Group | Result for the visitor |
| --- | --- |
| **References** | One filter per reference field of the listed types, for example by city or by brand. |
| **Content fields** | One filter per field marked **Filterable** on its type. A **Choice** or **Yes / no** field becomes checkboxes. |
| **Named ranges** | Ranges that you write in your own words, for example “Under €200,000”. |
| **Let visitors sort by** | A **Sort by** choice on the fields marked **Sortable**, in **ascending** or **descending** order. |

Each checked filter has its **Order**, which places the filters among themselves. A reference also has its **Input type**: **Dynamic (auto)** or **Always dropdown**.

Several values checked in the same filter widen the result: Nike or Adidas. Two different filters narrow it: Nike and Running.

[Add fields to a type](https://lovelyrender.com/documentation/add-content-fields/) explains how to mark a field **Filterable** or **Sortable**.

### Write a named range

A price or an area has no list to check. A named range creates one.

1. In the **Named ranges** group, click **Add a range**.
2. In **Label shown to visitors**, write the range, for example `Under €200,000`.
3. In **Field**, choose the field, for example **Price**.
4. In **Condition**, choose the comparison.
5. In **Value**, enter the number, for example `200000`. For a range between two bounds, enter two values separated by a comma: `200000,400000`.

| Condition | The content falls in the range when the field… | Field types |
| --- | --- | --- |
| **Is filled**, **Is empty** | has a value, or is empty. | All |
| **Equals**, **Does not equal** | equals the value, or does not. | Numbers and texts. **Equals** also applies to dates and times. |
| **Greater than**, **Greater than or equal to** | is greater than, or greater than or equal to, the value. | Numbers |
| **Less than**, **Less than or equal to** | is less than, or less than or equal to, the value. | Numbers |
| **Before**, **After** | is before, or after, the value. | Dates and times |
| **Between** | is between the two values. | Numbers, dates and times |
| **Contains** | contains the value. | Texts |
| **Is on**, **Is off** | is Yes, or No. | **Yes / no** |
| **Is**, **Is not**, **Is one of** | is the choice, is not the choice, or is one of the choices. | **Choice** |

The **Condition** list offers only the comparisons for the type of the chosen field. A range belongs to the page that holds it: duplicating the page duplicates its ranges.

### Sort without losing content

A sort never removes a content from the list. Contents with no value for the field go last, in both directions. **Default order** brings the list back unsorted.

The chosen filters and sort stay applied from one page of the list to the next. As long as **Hide navigation from search engines (AJAX)** is off, they are written in the address with the page number, whether the list is on a page or in the template of a content. The address can be shared as is. A filtered address names the unfiltered page as the reference address for Google. With AJAX navigation, the address does not change.

**Warning:** Place a single filterable list per page. With two, the visitor no longer knows which filters act on which list.

## Add a search

The **Search** block goes in a list or on its own, anywhere on the site, for example in the header. Its **Search settings** panel offers a **Behavior** depending on that location.

| Behavior | Location | Result for the visitor |
| --- | --- | --- |
| **Classic (results page)**, default | On its own or in a list | It submits and arrives on the results page. The address can be shared and search engines explore it. |
| **Live results (in place)** | In a list | The list fills again in place, without the page changing. |
| **Live dropdown** | On its own | Suggestions show under the field as they type. They choose a content in the list. |
| **Modal (composition)** | On its own | The field opens a composition in a modal, where you placed the search and its list. |

On its own and in **Classic** mode, the block carries **Search the current post type**, turned on by default. It searches the type of the page being viewed. On the home page, it searches the whole site. Turned off, it always searches the whole site.

A block moved to where its mode does not exist goes back to **Classic**. The block’s field and button cannot be changed, but they are styled like form fields. Each search is recorded in your statistics.

**Tip:** For the site search in the header, take **Classic**. For a catalog with filters, take **Live results (in place)**. To lead straight to a content, as in a directory, take **Live dropdown**.

## Paginate the list

The **Pagination** panel of the list sets the number of results. Add the **Pagination** block in the **List body** so the visitor can move from page to page.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Use WordPress reading setting** | Takes the number of contents per page from the reading settings. | On. |
| **Results per page** | The number of contents per page, when the previous setting is off. The editor preview stops at 20. | 20. |
| **Maximum pages** | The number of pages offered. 0 means unlimited. Offered with a **Pagination** block. | 20. |
| **Hide navigation from search engines (AJAX)** | Only the list refreshes on click and no page address exists. Offered with a **Pagination** block. | Off. |

|  | Classic | AJAX |
| --- | --- | --- |
| On click | The page reloads and the address changes. | Only the list refreshes. |
| Search engines | Each page of the list has an address that can be explored. | No address to explore. |
| Share a page of the list | Yes. | No. |
| Browser Back button | It goes back to the previous page of the list. | It goes back to the page visited before the list. |

The **Pagination** block has its **Display** setting: **Numbered pages**, with **Show first and last page links** checked by default, or **Previous / Next**, the arrows only.

**Tip:** Turn on AJAX for a search tool, like filtered listings: Google does not explore hundreds of combinations. Leave it off for a blog or news, where every page must be found.

In both modes, the navigation and the filters work with the keyboard. A screen reader announces the number of results after a filter and the page reached, for example “Page 3 of 7”.

## Set the empty list

The **Empty state** panel of the list sets how a list with no result is displayed. **When there are no results**: **Show a message**, by default, with the text of your choice in **Message**, or **Hide the list**.

A list that carries a search or filters keeps its controls visible even when empty. Only a list with no controls and no results disappears.

## See also

- [Link your content together](https://lovelyrender.com/documentation/link-contents/)
- [Show a content’s data](https://lovelyrender.com/documentation/display-content-data/)
- [Add fields to a type](https://lovelyrender.com/documentation/add-content-fields/)
- [Choose the look with templates](https://lovelyrender.com/documentation/decide-look-templates/)