How to Add Counter to the Listing Grid and the Dynamic Table Blocks with the Listing Сounter Add-on in Gutenberg

Downloading the add-on

To download this add-on’s code for free from GitHub, follow the link jet-engine-list-counter-callback-code.

To download and install the add-on, open the jet-engine-list-counter-callback page and press the “Code” button. Choose the Download Zip tab from the drop-down menu.

Installing the add-on

Open the Plugins tab of the WordPress Dashboard and press the “Add New” button. Install and activate the JetEngine DevTools Listing Сounter Add-on.

Read How to install Jet plugins via WordPress Dashboard in this tutorial.

Open the JetEngine > QueryBuilder tab of the WordPress Dashboard. Press the “Add New” button to build a new query with the following settings:

• type the query name in the Name field (here, Query for listing counter);
• choose the Posts Query option in the Query Type drop-down menu;
• choose the CPT for the listing (here, Properties) or the dynamic table (here, Real Estate).

If needed, add other settings to the query.

This tutorial details How to Use Query Builder. 

Adding callbacks to dynamic fields

Open the page with the pre-created Listing item with CPTs (here, Real_estate) to which you want to add numbers. Add a new dynamic field block to the page: drag and drop the Dynamic Field block where you want to display numbers.

Unroll the Settings of the Dynamic Field block and move the Filter field output toggle. If enabled, this toggle turns on the Callback drop-down menu to select the Listing’s counter option and the Select query drop-down menu (here, Query for listing counter).

Additionally, users can apply stylish settings to the numbers.

Read How to Use Dynamic Field Block in this tutorial.

Adding the custom query to the Listing Grid block

Open a page with the Listing Grid block added. Specify the CPT you need to display (here, Real_estate).

Read How to Build Listing Templates in Gutenberg in this tutorial.

Navigate to the Custom Query tab of the Listing Grid block. If enabled, the Use Custom Query toggle activates the Select query drop-down menu allowing selecting the query you need (here, the previously created Query for listing counter query).

The built page looks as follows on the front end:

Creation of a dynamic table

To create a dynamic table for displaying CPTs as a whole or some fields from them, navigate to the JetEngine > Tables Builder tab of the WordPress Dashboard.

Add a new dynamic table (press the “Add New Table” button) with the following settings:

• type the table name in the Name field of the General Settings tab;
• choose the query from the Data Query drop-down menu (here, Query for listing counter).

Settings of the table

To add the counter, create a new column specially intended for the counter. 

Navigate to the Columns tab of the Table and add the columns to display the dynamic fields or the CPTs.

Type its name (here, index) in the Column Name field, and activate the Filter Column Output toggle. Choose the Listings counter callback from the Filter Callback drop-down menu and the Query for listing counter from the Select query drop-down menu.

Read the WordPress Dynamic Tables Builder Overview detailing how to build dynamic tables in Gutenberg.

Click the “Create Table” button to create the table.

Adding the dynamic table to a page

Open the page or post where you want to display the table. Find the Dynamic Table block. Choose the built table from the Select Table drop-down menu. 

The built table looks as follows on the front end: