Help Center
Displaying “New” Badge On Posts Published Within Last 5 Days

Displaying “New” Badge On Posts Published Within Last 5 Days

Learn how to create JetEngine dynamic visibility rules and custom queries for managing the visibility of widgets in a single post or listing template based on the post published date.

Before you start, check the tutorial requirements:

  • Elementor (Free version)

  • JetEngine plugin installed and activated

    with the Dynamic Visibility module activated

There are two ways of creating a Dynamic Visibility rule provided by the JetEngine plugin to show such a badge only on posts that were published within the last N days. Let it be 5 days in our example.

This badge can be used in the Listing template for the needed post type or on the Single post page. 

To learn how to create a Listing, proceed to the How to Create a Listing Template for Post Types in Elementor tutorial.

To discover how to create a Single page, go to the How to Create a WordPress Single Post Page Template tutorial.

Open a Lishing or Single Post page in the Elementor editor.

The Heading or Text Editor widgets can be used for adding the needed text to be shown as a badge.

heading widget in the Elementor editor

The First Dynamic Visibility Rule Example with Elementor Pro

Go to the Advanced settings tab of the widget and open the Dynamic Visibility tab.

As a first example, the following Dynamic Visibility rule can be added.

We enabled the toggle and selected the “Show element if condition met” Visibility condition type and the “Greater than” Condition.

In the Field, click the coin stack icon and select the “Post Date” dynamic tag. In the “Post Date” settings, the Type should be set to “Post Published,” the Format needs to be “Custom,” and the Custom Format should be “U,” which stands for the Unix timestamp. 

The post published date is required to be in the Unix timestamp to compare it with the value, which will be defined in the timestamp as well.

post date dynamic tag in the visibility condition

In the Value field, the “Macros” dynamic tag needs to be selected. From the Macros list, we picked the “String to timestamp” option, where the String to convert is “today-5days.” This value allows us to compare the post published date with a date within the range of the last 5 days and today.

Lastly, the Data Type should be set to “Numeric” since the timestamp value is a number of seconds.

string to timestamp macro

Now, let us check the result of this Dynamic Visibility rule on the front end.

A post has the 31.07.2023 (July 31st, 2023) published date. And we are writing these instructions on 02.08.2023 (August 2nd, 2023). This means the published date is within the range of the last 5 days to today, and the “New” badge should be shown on the front end.

post published date

When we check a post on its Single Post page on the front end, the badge is displayed correctly.

bage on the single post page

Let us also see another case when the badge is not supposed to be displayed.

We edited the published date to be out of the date range set in the Dynamic Visibility Value. Let it be June 22nd, 2023.

editing post published date

And the badge is hidden on the front end, which is also correct according to the set published date and today’s date.

the badge is hidden

The Second Dynamic Visibility Rule Example with Query Builder

The second way includes creating a custom query in the JetEngine Query Builder to check whether the current post on its Single page or in the Listing template has been published within the last 5 days to today.

Proceed to the JetEngine > Query Builder tab and hit the “Add New” button. Name the query and select the “Post Query” Query Type.

post query type

In the General tab, select the needed Post Type and Post Status.

post type and post status

In the Post & Page tab, click the coin-stack icon near the Post In field and select the “Current ID” macro. It means only the current post date will be checked by the query.

current ID macro

Next, in the Date Query tab, we hit the “Add New” button to add a Date Query Clauses and entered the ‘today-5days’ value in the After field. This will check whether the current post has been published within the last 5 days to today.

date query clause

The custom query is completed and can be saved by clicking the “Add/Update Query” button.

We can return to the Listing or Single page in the Elementor editor and add a Dynamic Visibility rule to the “New” badge.

Go to the Advanced settings tab of the widget and open the Dynamic Visibility tab.

We enabled the toggle and selected the “Show element if condition met” Visibility condition type, the “Query Has Item” Condition, and the recently created query in the Query to check field.

You can now click the “Update” button and check the result on the front end.

query has item visibility condition

That is it. Now you know how to create JetEngine dynamic visibility rules and custom queries for managing the visibility of widgets in a single post or listing template based on the post published date.

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.