FacetWP includes a built-in Listing Builder. It allows you to quickly spin up a listing or grid template, which can then be used in alongside any number of facets.

Browse to Settings > FacetWP and click “Add template”. New templates use the Listing Builder by default. If more flexibility is required and you’re experienced with WordPress development, you could switch to the advanced mode of the Listing Builder.

The Listing Builder is covered in the above video, starting at 1:49.

Using dynamic tags

Dynamic tags let you pull a field’s value into another field.

Let’s say you have a photo_url field and you want to wrap it into an <a> tag. First, add a new layout item and select the desired field:

Selecting item source

Next, set the layout item’s “Name” to photo-url and mark it as hidden:

Editing layout item

Finally, add a new HTML item and set its “Content” to:

<a href="{{ photo-url }}">{{ photo-url }}</a>

FacetWP automatically replaces all instances of {{ photo-url }} with the custom field’s value. You can even pull in multiple fields.

Built-in tags

A handful of built-in tags can also be used throughout the Listing Builder (like within an HTML item, or even in a builder item setting field):

{{ post:id }}

{{ post:name }}

{{ post:type }}

{{ post:url }}

Outputting a template

Templates are added to your pages via shortcodes. See the “Shortcodes” section below for more info.

Responsive support

By default, the Listing Builder automatically changes to 1 column when the browser width <= 480 pixels. You can add additional “breakpoints” via CSS. For example, this CSS switches the layout to 2-columns if the browser width <= 780 pixels:

@media (max-width: 780px) {
    .fwpl-layout {
        grid-template-columns: repeat(2, 1fr);

See also