Using the Listing Builder in Dev Mode
If you browse to Settings > FacetWP, click the “Listings” tab and then “Add new”, the new template will by default use the “visual” Listing Builder.
However, if you need more flexibility or prefer to code your post loops and query arguments by hand in PHP, you can still take advantage of the Listing Builder by using its “Dev mode”.
Dev mode can be enabled independently on both the “Display” and “Query” tabs, by clicking the checkbox on the right.
Note that although you can freely switch each tab between the “visual mode” and Dev mode, the two modes are not related (except momentarily when you use the “Convert to query args” button). For the Display tab as well as the Query tab, a listing template uses one mode or the other: the mode in which you leave the tabs when you save the listing template, is used.
You can also mix modes. For example, you can use visual mode in the Display tab and Dev mode in the Query tab.
When the “Display” tab is active, click the
Dev mode checkbox.
Use the “Display Code” box to build the WordPress loop for your template: the output for a single listing item.
The following example will output the linked title for each post item:
<?php while ( have_posts() ): the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <?php endwhile; ?>
Alternatively, you could save your display code into a PHP template file and include it in the “Display Code” box:
<?php include( get_stylesheet_directory() . '/your-post-loop.php' ); ?>
When the “Query” tab is active, click the
Dev mode checkbox.
Use the Query Arguments box to build the query for your template. The query determines the initial posts to load, how many per page, and in which order. You can use query parameters from WP_Query.
The following example fetches published posts, shows 15 posts per page, and orders them alphabetically by title:
<?php return [ "post_type" => "post", "post_status" => "publish", "posts_per_page" => 15, "orderby" => "title", "order" => "ASC", ];
You can write all query arguments directly in Dev mode, but you can also build the query in visual mode first, and then click the “Convert to query args” button.
This will automatically enable Dev mode for the Query tab and convert the visual settings to PHP query arguments, which you can then further adapt yourself.