ACF & Looper - Show Post Based on Custom Field Date

[AaronLentz]

Hi, I’m new to looper and query string and know just enough to be dangerous so I’d greatly appreciate any assistance. I have created a custom post type called, “lesson” and I am wanting to create 12 to 13 lesson posts all at once, but only have one lesson show up each week based upon a custom field date called, “date”.

I would like the lesson to show up according to the custom field date and stay there until the next lesson’s custom field date occurs.

Is there a Query String that could run a today’s lesson based upon a custom field date? Here is a link to the page where I am attempting to achieve this: https://athenscolumbus.com/kids/

Thanks for any help you can provide!

[marc_a]

Hey @AaronLentz,

Thanks for reaching out!

Please check this thread that might help you with your setup.

Layouts/Loopers: How to display posts based on an ACF date picker?

Hi Themeco, I have a CPT called Casting Call. On the Casting Calls archive layout page I want to show only the casting calls for upcoming productions (and hide the past ones). How to achieve this? Using ACF, I created a date picker field called “production_date”. I want the looper to only display the casting calls that have a production_date later than today’s date. When setting up the looper provider, I chose Query Builder, then chose posts: “Casting Call”. There is a date function but it o…

Hope that helps.

[AaronLentz]

Hi @marc_a,

Thanks for pointing me in the right direction. Unfortunately, I haven’t gotten it to work quite yet after reading through the suggested post and all the articles within it.

I thought this might be my WP Query under looper:
post_type=lesson&meta_key=date&orderby=meta_value_num&order=ASC&meta_query%5B0%5D%5Bkey%5D=date&meta_query%5B0%5D%5Bvalue%5D=Ymd&meta_query%5B0%5D%5Bcompare%5D=%3E

and the query would be this:

$meta_query[] = array(
    'key'     => 'date',
    'value'   => date('Ymd'),
    'compare' => '>',
);
$query = array(
    'post_type'  => ‘lesson’,
    'meta_key'   => 'date',
    'orderby'    => 'meta_value_num',
    'order'      => 'ASC',
    'meta_query' => $meta_query
);
var_dump( http_build_query( $query ) );

I’m confused on where to add the information above on xtheme? I tried adding it to child theme functions but when added it made it no longer possible to edit any pages.

I appreciate any more help you can give. I have attached my custom post type and acf for reference if helpful.

[christian]

Hey @AaronLentz,

Working with functions.php or the child theme, in general, requires that you know PHP because if you don’t understand the code and introduce a syntax error, your site will not work.

Please note that we do not provide custom coding support and that includes setting up a WP Query that is needed to generate a Query String. The queries you see in the forum only serve as a guide.

Regarding showing an ACF field or any element based on ACF Field Date, you don’t have to use a query. Instead, use the element Condition as it’s easier. This means that within your loop, set the Condition of the element that you wish to show or hide based on ACF date.

In the example below, I’m outputting the ACF Date field and the Current Date Dynamic Contents in a Text element to guide me for setting the Condition.

Notice the ACF Date is AFTER the Current Date. Based on that, I can hide or show any element in the page.

Below is a quick recording of how to set the Datetime condition. To fully understand the Conditions feature, please check our doc here https://theme.co/docs/conditions-and-assignments

[AaronLentz]

Hi Christian, thanks for your reply. I think I understand what your suggesting with conditions, but how should I call the “lesson” posts to display on the page? Do I do that through Query Builder or Query String?

When I attempt to do it through Query Builder it does not order the posts according to the acf “date”

When I insert the following Query String it shows the posts in the correct order, but shows too many posts and it does not include today’s post.
post_type=lesson&meta_key=date&orderby=meta_value_num&order=ASC&meta_query%5B0%5D%5Bkey%5D=date&meta_query%5B0%5D%5Bvalue%5D=20210524&meta_query%5B0%5D%5Bcompare%5D=%3E

I only want to display one post (the “lesson” post from today’s acf custom field “date”. Then when the next “lesson” post acf custom field “date” occurs on today’s date then that would show instead), but when I change the Looper Consumer to One it shows nothing.

It seems like I’m so close, but missing something. If you could assist, I’d greatly appreciate it!

[christian]

Hey @AaronLentz,

Not sure why you want to “order” by date since you

@AaronLentz

only want to display one post (the “lesson” post from today’s acf custom field “date”

What you’d want to do is display ALL your Lessons and let the Condition show the lesson post from today’s acf custom field “date”.

You can show all your Lessons using the Query Builder. At-least start with that and the Condition.

If your Conidtion is ACF Date AFTER Current Date, it will show Lessons dated after the current date. In other words, it will not display the Lesson dated the current date.

In my example, I used the Datetime condition Expression. You don’t have to use exactly that. I’m just showing what you can do with Conditions. Try using the String Expression as it uses is or is not.

If your condition is Lesson with ACF Current Date IS Global Current Date, that would display the Lesson dated with the current date and WON’T show the rest as they will not meet the condition.

If you’re still confused by that, please provide access to your site so we could set an example. Provide the following details in a Secure Note

• WordPress Login URL
• Admin Username and Password

You can find the Secure Note button at the bottom of your posts.

Thanks.

[AaronLentz]

Hi Christian, thanks for your assistance. after messing around with the string conditions for quite a while I was still unable to accomplish my desired outcome.

Sorry for the confusion on what I’m attempting to do let me try to be clearer. I would like to have all my (“lesson”) posts published.

1. I would then like to have all of the (“lesson”) posts ordered by an ACF custom field (“date”). I wish I could order by acf custom field on the Query Builder, but unfortunately, I can’t.
   

   

2. I am wanting to display only 1 (“lesson”) post at a time on the post block (that I’ve created), but it needs to appear on the day of the ACF custom field type (“date”) and it needs to stay on there until the next lesson post date occurs and then it would show the next post and no longer show the previous post.

3. In addition to this, I am wanting below the post block to display the next lesson’s post Title and Reference.

So visually speaking it would look like this, but of course, it needs to be displayed in the right order with the right content at the right times.

[christian]

Hey @AaronLentz,

To show you that my suggestion works, I changed the date of your “We Are to Worship God Alone” lesson to the current date. I then displayed the Current Date to your layout and set the Condition in your Looper Provider which is also your Looper Consumer. As you can see in the screenshot below, only 1 lesson is showing.

I reverted the date of your “We Are to Worship God Alone” lesson back to October 9, 2022 and as expected, nothing is shown. Only lessons dated in ACF to show on the current date will display.

Please review the setup.

Thanks.

[AaronLentz]

Hi Christian, I appreciate you’re continual work and support on this!

I understand your suggestion, but it does not produce the desired outcome. I agree that your suggested conditions show the post according to today’s date (AKA Global Date). But let me use your example above to explain what I mean…

So, for instance, if today is July 20th (Global Date) and the custom field date is set to July 20th (ACF), then the post (We are to Worship God Alone) will appear only on that particular day.

What I need, though, is for the post (We are to Worship God Alone) to continue to appear on July 21st, 22nd, 23rd, 24th, 25, 26th, and 27th as well, and then on July 28th, I need that post to disappear and have the Next Lesson Post now appear because it’s ACF date is set to July 28th.

[christian]

Hey @AaronLentz,

Thanks for clarifying. It is only now that I completely understand your setup. It turns out that you both need the Condition to show only current lessons and ordering by ACF Date using the Query String. Actually, I found in my test that it will show past and current lessons. Limiting to 1 lesson won’t work so custom CSS is needed to show only 1 post, hiding the old post (which is not a good solution.

It is important to note that the custom CSS is meant only as a guide to show you the possibilities. We cannot provide further support for that.

The best solution for your case is Custom Looper development because it is best to output 1 lesson only then get the ACF Date of the next lesson as basis when the “current” lesson will be replaced. That would require custom programming which can be done only by our Elite team. If you’re interested for us to code that, you can check our Elite service here: https://theme.co/elite

Condition:

Query String:
post_type=lesson&meta_key=date&orderby=meta_value_num&order=ASC

Custom CSS in the Row Element CSS:

Result:

Hope that helps and thank you for understanding.

[AaronLentz]

Christian, that’s amazing! I think it’s working now thanks to your solution. I greatly appreciate your help with everything!

There’s only 1 more thing I’m attempting to do, and that is I am trying to apply your CSS code (from above) to the “Next Lesson:” headline below my post block. The content is showing up correctly, but I only want to keep the first Headline, “Next Weeks Lesson / Genesis 1” and hide the rest of the Headlines. See image.

$el.x-row {
  display: none;
}
$el.x-row:nth-child(2) {
  display: block;
}

When I insert that CSS into the Element CSS it shows none of the posts. I need it to show the first one though. Do you know why the CSS isn’t working?

[tristup]

Hi @AaronLentz,

What you are trying, you need to change the nth-child number in the CSS code given by my colleague to make the first. Your code might look like the following one.

$el.x-row {
    display:none;
}
$el.x-row:nth-child(1) {
    display:block;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks