Help Center

How to Break Listing by Months

How to Break Listing by Months

Find out how to break a single listing grid into sections separated by month based on the post's publish date or the date from a meta field in Elementor and Gutenberg.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg);

  • JetEngine plugin installed and activated with Custom Post Type or posts created, and the Listing items for CPTs or posts built;

  • JetSmartFilters plugin installed and activated;

  • JetThemeCore installed and activated with created Archive template.

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 and Installing the Add-on

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.

jetengine dev tools break listing by months add on downloading

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.

add-on installing and activation

Breaking Listings Based on the Date from the Meta Field

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.

adding meta field

Defining the meta field in the active theme’s file

Navigate to the Appearance > Theme File Editor tab.

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.

functionsphp file of active theme editing

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.

query builder tab

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).

general settings of edit query tab

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

pagination settings of edit query tab

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).

custom query settings for cpt listing in elementor

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).

custom query settings for cpt listing in gutenberg

Breaking Listings Based on the Post’s Publish Dates

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).

custom query settings for cpt listing in elementor

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).

custom-query-settings-for-post-listing-in-elementor

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).

custom query settings for post listing in gutenberg

Applying Filters

Search settings

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

jet smart filter creation

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).

custom query settings of listing grid block

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.

listing grid filtering results 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).

custom query settings of listing grid widget

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.

general settings of searchfilter widget in elementor

The search results will be divided according to the months.

listing grid filtering results in elementor

Advanced Functionality

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.

That’s all about breaking a single Listing Grid widget and block into sections separated by month based on post publish date or date from the meta fields.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.