The JetEngine DevTools Break Listing by Months Add-on for the JetEngine plugin divides post and CPT listings according to the publish date or the date in the meta field. The differences here are that:

• the necessity to add constants into the theme’s code to work with the meta field (no need for posts);
• users should develop queries with posts CPTs as a source to work with posts or CPTs respectively.

 Additionally, users can extend the add-on functionality for any object type, apply filters, or sort posts.

Downloading the add-on

Download this add-on for free by the link jet-engine-break-listing-by-months.

Press the “Code” button to unroll the drop-down menu. Press the Download Zip tab and download the add-on.

Then rename the add-on from jet-engine-break-listing-by-month-master to jet-engine-break-listing-by-month.

Installing the add-on

Go to the WordPress Dashboard, navigate to the Plugins tab, and press the “Add New” button to add the add-on.

This tutorial details How to install Jet plugins via WordPress Dashboard.

Activate the add-on.

Building a custom query

Adding a meta field

Use the built CPT with posts you want to list. Here, the dates_department CPT has the date meta field to be used for breaking the listing, namely for a custom query and changing the active theme’s file.

Defining the meta field in the active theme’s file

Navigate to the Appearance > Theme File Editor tab.

Choose the functions.php file of your active theme.

Add a row with the following code at the end of this file:

define(‘JET_ENGINE_BREAK_BY_FIELD’, ‘date’ );

This row (row 82 in the image below) defines the meta field’s name (here, date) in the functions.php file of the active theme.

Save changes by pressing the “Update File” button.

Building a custom query

Navigate to the JetEngine > Query Builder and press the “Add new” button to create a query.

Specify its Name (here, break_month) and Query ID; select the Posts Query option from the Query Type drop-down menu. 

Navigate to the Posts Query setting tab and specify the Posts Type (the CPTs used for listing).

Move to the Pagination setting tab and type -1 in the Post Per Page field to show all posts.

Press the “Add Query” to save it.

Applying the custom query to the listing of CPTs in Elementor

Open the page with the listing grid you break. Unroll the Custom Query tab and turn on the Use Custom Query toggle in the Listing Grid widget. Choose the recently created query from the drop-down list (here, break_month).

Applying the custom query to the listing of CPTs in Gutenberg

Add the Listing Grid block to the page, navigate the Custom Query settings, and turn on the Use Custom Query toggle. Select the built custom query (here, break_month).

Breaking of listings built on the post’s publish dates (not CPTs) does not need adding additional data to the active theme’s files. For this case, users can apply only the add-on and build the query.

Building a custom query

Navigate to the WordPress Dashboard > JetEngine > Query Builder and press the “Add new” button to create a query. 

Specify its Name (here, break_month) and Query ID. Unroll the Query Type drop-down menu and select the Posts Query option.

Navigate to the Posts Query setting tab and specify the Posts Type (here, Posts) and Post Status (here, Published).

Open the “Pagination” tab and type -1 in the Post Per Page field to show all posts on the page.

Press the “Add Query” button.

Applying the custom query to the listing of posts in Elementor

Open the page with the Listing grid widget for posts. Click the Custom Query settings tab and move the Use Custom Query toggle. Choose the custom query (here, break_month).

Applying the custom query to the listing of posts in Gutenberg

Build or open the page with the Listing Grid block with the posts. Navigate to the Custom Query settings tab and move the Use Custom Query toggle. Select the query you need from the Custom Query drop-down menu (here, break_month).

Search settings

Create a Search Filter using the JetSmartFilters plugin (here, date1).

Read the tutorial on  How to Use Search Filter and apply JetSmartFilter’s widgets.

Search results filtering in Gutenberg

Build a page to apply the Search Filter and the Listing with posts or CPTs. 

Navigate to the listing settings and open the Query tab. Specify the built query (here, break_month) as the custom query from Query Builder as the source of the item).

Add the Search Filter block and the Apply Button block. Use the built Archive Page for redirection of the search results.

This tutorial explains How to Create Archive Template for Displaying Search Results. 

Select the filter you need (here, date1) from the Select Filter drop-down menu. Specify the Listing Grid option from the The Filter For drop-down menu.

The image below shows the search results for these CPTs divided by months in Gutenberg.

Search results filtering in Elementor

Open the page with the listing. Unroll the Custom Query settings of this listing and move on the Use Custom Query toggle.

Select the query from the drop-down menu (here, break_month).

Add the Search Filter widget to the page. Unroll the Content settings and choose the created filter (here, date1) from the Select Filter drop-down menu.

The search results will be divided according to the months.

To extend the plugin functionality to any object, rewrite the getting data part according to the following code by the link:

jet-engine-break-listing-by-months-additional

• For CCT created date you can get with $post->cct_created, custom field accessible by its name – $post->my_field;
• For terms and users you need to use get_term_meta and get_user_meta functions.