{"id":30756,"date":"2024-11-05T14:25:08","date_gmt":"2024-11-05T14:25:08","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=30756"},"modified":"2024-11-05T14:31:45","modified_gmt":"2024-11-05T14:31:45","slug":"break-listing-by-months-add-on","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/break-listing-by-months-add-on\/","title":{"rendered":"How to Break Listing by Months"},"content":{"rendered":"\n
\n

The Break Listing by Months<\/em> addon for the JetEngine<\/em> plugin divides the (Custom Post Types) CPT<\/strong> or WordPress post listings according to the publish date or the date in the meta field<\/a>.<\/p>\n\n\n\n

Additionally, you can extend the addon functionality for any object type, apply filters, or sort posts.<\/p>\n<\/div><\/div>\n\n\n\n

Downloading and Installing the Addon<\/h2>\n\n\n\n
\n

Downloading the addon<\/h3>\n\n\n\n

Download this addon for free using the jet-engine-break-listing-by-months<\/a> link.<\/p>\n\n\n\n

Press the \u201cCode<\/strong>\u201d button to unroll the drop-down menu. Then, press the \u201cDownload Zip<\/strong>\u201d button to download the addon.<\/p>\n\n\n\n

\"jetengine<\/a><\/div>\n\n\n\n

Also, it can be downloaded from the DevTools<\/strong><\/a> page, which stores all free addons.<\/p>\n\n\n\n

Then, rename the addon from \u201cjet-engine-break-listing-by-month-master\u201d to \u201cjet-engine-break-listing-by-month.\u201d<\/p>\n\n\n\n

Installing the addon<\/h3>\n\n\n\n

Go to the WordPress Dashboard<\/strong> and navigate to the Add New Plugin<\/strong> tab in the Plugins<\/strong> section. <\/p>\n\n\n\n

Install and activate the addon as detailed in the How to Install JetPlugins via WordPress Dashboard<\/strong><\/a> tutorial.<\/p>\n\n\n\n

\"JetEngine<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Breaking Listings Based on the Post\u2019s Publish Dates<\/h2>\n\n\n\n
\n

Breaking listings according to the post publish dates requires the \u201cPosts\u201d custom query<\/a>.<\/p>\n\n\n\n

Building a custom query<\/h3>\n\n\n\n

Navigate to the WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and press the \u201cAdd <\/strong>N<\/strong>ew<\/strong>\u201d button to create a query.<\/p>\n\n\n\n

Specify its Name<\/strong> (here, \u201cBreak by months\u201d) and enter \u201cbreak_months\u201d into the Query ID <\/strong>field. In the Query Type<\/strong> drop-down menu, keep the \u201cPosts Query\u201d option.<\/p>\n\n\n\n

Navigate to the Posts Query<\/strong> setting tab and specify the Post Type<\/strong> (e.g., \u201cPosts\u201d) and Post Status<\/strong> (here, \u201cPublished\u201d).<\/p>\n\n\n\n

Afterward, press the \u201cAdd\/Update Query<\/strong>\u201d to save it.<\/p>\n\n\n\n

\"custom<\/a><\/div>\n\n\n\n

Applying the custom query to the listing of posts in Elementor<\/h3>\n\n\n\n

Open the page with the Listing Grid <\/strong>widget<\/a> for posts in the Elementor editor.\u00a0<\/p>\n\n\n\n

Unroll the Custom Query<\/strong> settings tab and activate the Use Custom Query<\/strong> toggle. Choose the Custom Query<\/strong> (here, \u201cBreak by months\u201d).<\/p>\n\n\n\n

Hit the \u201cUpdate<\/strong>\u201d button to save the settings.<\/p>\n\n\n\n

\"custom<\/a><\/div>\n\n\n\n

Applying the custom query to the listing of posts in Gutenberg<\/h3>\n\n\n\n

Build or open the page with the Listing Grid <\/strong>block<\/a> with posts in the WordPress block editor.\u00a0<\/p>\n\n\n\n

Navigate to the Custom Query<\/strong> settings tab and activate the Use Custom Query<\/strong> toggle. Select the query you need from the Custom Query<\/strong> drop-down menu (here, \u201cBreak by months\u201d).<\/p>\n\n\n\n

Then, hit the \u201cSave<\/strong>\u201d button.<\/p>\n\n\n\n

\"custom<\/a><\/div>\n\n\n\n

Applying the custom query to the listing of posts in Bricks<\/h3>\n\n\n\n

Build or open the page with the Listing Grid<\/strong> element<\/a> with posts in the Bricks builder.\u00a0<\/p>\n\n\n\n

Navigate to the Custom Query<\/strong> settings tab and activate the Use Custom Query<\/strong> toggle. Select the query you need from the Custom Query<\/strong> drop-down menu (here, \u201cBreak by months\u201d).\u00a0<\/p>\n\n\n\n

Then, hit the \u201cSave<\/strong>\u201d button.<\/p>\n\n\n\n

\"custom<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Breaking Listings Based on the Date from the Meta Field<\/h2>\n\n\n\n
\n

Breaking listings according to the \u201cDate\u201d custom meta field value requires adding additional data to the active theme\u2019s files and the \u201cPosts\u201d custom query.<\/p>\n\n\n\n

Adding a meta field<\/h3>\n\n\n\n

You can add a \u201cDate\u201d meta field to the Custom Post Type (CPT)<\/strong> in the Meta Fields<\/strong><\/a> tab.<\/p>\n\n\n\n

To add such a meta field to the default WordPress post types, use the meta box feature as described in the How to Add Custom Meta Fields to WordPress Post via Meta Boxes<\/strong><\/a> tutorial.<\/p>\n\n\n\n

\"date<\/a><\/div>\n\n\n\n

Set the \u201cDate\u201d meta field for several posts so you can check the results later.<\/p>\n\n\n\n

\"setting<\/a><\/div>\n\n\n\n

Defining the meta field in the active theme\u2019s file<\/h3>\n\n\n\n

Navigate to the WordPress Dashboard > Appearance > Theme File Editor<\/em><\/strong> tab.<\/p>\n\n\n\n

Choose the functions.php<\/strong> file of your active theme from the Theme Files <\/strong>menu on the right side.<\/p>\n\n\n\n

Add a row with the following code at the end of this file:<\/p>\n\n\n\n

define('JET_ENGINE_BREAK_BY_FIELD', 'date' );<\/code><\/pre>\n\n\n\n
where \u201cdate\u201d should be replaced with your \u201cDate\u201d meta field name (\u201cdate_\u201d in our case).<\/p>\n\n\n\n
Save changes by pressing the \u201cUpdate File<\/strong>\u201d button.<\/p>\n\n\n\n
\"functionsphp<\/a><\/div>\n\n\n\n
Building a custom query<\/h3>\n\n\n\n
Navigate to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and press the \u201cAdd <\/strong>N<\/strong>ew<\/strong>\u201d button to create a query.<\/p>\n\n\n\n
Specify its Name<\/strong> (here, \u201cBreak by months\u201d) and enter \u201cbreak_months\u201d to the Query ID <\/strong>field; leave the \u201cPosts Query\u201d <\/strong>option in the Query Type<\/strong> drop-down menu.<\/p>\n\n\n\n
Navigate to the Posts Query<\/strong> setting tab and specify the Posts Type<\/strong> (CPT<\/strong> or WordPress default post type with the \u201cDate\u201d meta field set).<\/p>\n\n\n\n
Press the \u201cAdd\/Update Query<\/strong>\u201d to save it.<\/p>\n\n\n\n
\"general<\/a><\/div>\n\n\n\n
Applying the custom query to the Listing Grid widget\/block\/element<\/h3>\n\n\n\n
Open the page with the Listing Grid <\/strong>for the posts you break. <\/p>\n\n\n\n
Unroll the Custom Query<\/strong> tab and turn on the Use Custom Query<\/strong> toggle in the Listing Grid <\/strong>widget\/block\/element. <\/p>\n\n\n\n
Choose the recently created query from the CUSTOM QUERY<\/strong> drop-down list and save the changes.<\/p>\n\n\n\n
\"breaking<\/a><\/div>\n<\/div><\/div>\n\n\n\n
Applying Filters<\/h2>\n\n\n\n
\n
Filter creation<\/h3>\n\n\n\n
For filter creation<\/a>, the JetSmartFilters<\/em><\/a> plugin should be installed and activated.<\/p>\n\n\n\n
Proceed to the WordPress Dashboard > Smart Filters > Add New <\/em><\/strong>tab.<\/p>\n\n\n\n
For this case, we create the Search Filter<\/strong><\/a>.<\/p>\n\n\n\n
\"search<\/a><\/div>\n\n\n\n
Search results filtering in Gutenberg<\/h3>\n\n\n\n
Proceed to the page with the Listing Grid <\/strong>block with the applied custom query that allows breaking posts by months.<\/p>\n\n\n\n
Add the Search <\/strong>block. Pick the recently created filter in the SELECT FILTER <\/strong>drop-down menu and the \u201cListing Grid\u201d option from the THIS FILTER FOR<\/strong>.<\/p>\n\n\n\n
In the QUERY ID <\/strong>field, enter \u201cbreak_months\u201d.<\/p>\n\n\n\n
Other filter settings can be adjusted as you need.<\/p>\n\n\n\n
\"search<\/a><\/div>\n\n\n\n
Open the Listing Grid <\/strong>settings and unroll the Advanced <\/strong>tab.<\/p>\n\n\n\n
In the CSS ID <\/strong>field, also enter \u201cbreak_months\u201d.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n\n\n\n
Afterward, \u201cSave<\/strong>\u201d the page.<\/p>\n\n\n\n
Search results filtering in Elementor<\/h3>\n\n\n\n
Proceed to the page with the Listing Grid <\/strong>widget with the applied custom query that allows breaking posts by months.<\/p>\n\n\n\n
Add the Search Filter<\/strong> widget. Pick the recently created filter in the Select Filter <\/strong>drop-down menu and the \u201cJetEngine\u201d option from the This filter for<\/strong>.<\/p>\n\n\n\n
In the Query ID <\/strong>field, enter \u201cbreak_months\u201d.<\/p>\n\n\n\n
Other filter settings can be adjusted as you need.<\/p>\n\n\n\n
\"search<\/a><\/div>\n\n\n\n
Open the Listing Grid <\/strong>settings and switch to the Advanced <\/strong>tab.<\/p>\n\n\n\n
In the CSS ID <\/strong>field, also enter \u201cbreak_months\u201d.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n\n\n\n
Afterward, \u201cUpdate<\/strong>\u201d the page.<\/p>\n\n\n\n
Search results filtering in Bricks<\/h3>\n\n\n\n
Proceed to the page with the Listing Grid <\/strong>element with the applied custom query that allows breaking posts by months.<\/p>\n\n\n\n
Add the Search Filter<\/strong> element. Pick the recently created filter in the Select Filter <\/strong>drop-down menu and the \u201cJetEngine\u201d option from the This filter for<\/strong>.<\/p>\n\n\n\n
In the Query ID <\/strong>field, enter \u201cbreak_months\u201d.<\/p>\n\n\n\n
Other filter settings can be adjusted as you need.<\/p>\n\n\n\n
\"search<\/a><\/div>\n\n\n\n
Open the Listing Grid <\/strong>settings, switch to the STYLE <\/strong>tab, and unfold the CSS <\/strong>tab.<\/p>\n\n\n\n
In the CSS ID <\/strong>field, also enter \u201cbreak_months\u201d.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n\n\n\n
Afterward, \u201cSave<\/strong>\u201d the page.<\/p>\n\n\n\n
Testing the flow<\/h3>\n\n\n\n
Now, you can proceed to the front end to test the flow. The search results will be divided according to the months.<\/p>\n\n\n\n
Additionally, you can check the How to Create Archive Template for Displaying Search Results<\/strong><\/a> tutorial.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n<\/div><\/div>\n\n\n\n
Advanced Functionality<\/h2>\n\n\n\n
To extend the plugin functionality to any object, rewrite the getting data part according to the following code by the link:<\/p>\n\n\n\n
jet-engine-break-listing-by-months-additional<\/a><\/p>\n\n\n\n