What is 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.

How to use Display Code in Dev mode

FacetWP Listing Builder Dev ModeWhen 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 if ( have_posts() ) : ?>
    <?php while ( have_posts() ): the_post(); ?>
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <?php endwhile; ?>
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

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' );
?>

How to use Query Arguments in Dev mode

FacetWP Listing Builder Dev ModeWhen 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",
];

Convert to query args button

FacetWP Listing Builder - Convert to query argsYou 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.

Display a listing template

Templates can be displayed with a shortcode or with PHP.

See also