18th Oct '24
/
0 comments

Weekday Column Posts Bricks Query Loop

Updated on 21 Oct 2024

This Pro tutorial provides the steps to arrange the posts output by a Bricks query loop(s) in weekday columns based on the value of a weekday custom field.

We shall cover two different ways of achieving this.

Using data attributes and CSS Grid

This solution is not accessible but has the benefit of being filterable using 3rd party filtering plugins like WP Grid Builder. Uses a single query.

Using custom query types and CSS Grid

This solution is accessible and uses nested (two) query loops. Filtering is possible using custom JavaScript and covered in this tutorial. Third-party filtering plugins will not work with this approach.

Update on 21 Oct 2024: Added steps on how to sort the posts by time in ascending order.

Using data attributes and CSS Grid

Step 1

Create a field group for your post type having a field of type Select or Button Group or any other type of field using your favorite custom fields plugin that enables selection of one option from many.

In this example, let's go with a Button Group type ACF Field.

Set the choices to

Monday Tuesday Wednesday Thursday Friday Saturday Sunday

Field Name/ID: weekday

Step 2

Edit the Page/template (with Bricks) in which you would like to show the post columns.

Copy and paste the JSON of the fully-built Section from below.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Non-empty events sorted by event date and other posts below in Bricks

Non-empty events sorted by event date and other posts below in Bricks

Updated on 15 Jan 2024 Consider a scenario where you are showing posts from multiple post types namely post, event and game in a single…
Categories:
Pro
Parent post Bricks query loop

Parent post Bricks query loop

Updated on 5 Feb 2024 In the BricksLabs Facebook group a user asks: Is there a way to output the data of a parent post…
Categories:
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Categories:
Pro
Outputting an Element in Bricks x times where x is a custom field value

Outputting an Element in Bricks x times where x is a custom field value

Learn how to output a query loop item(s) as many times as the value of a custom field in Bricks.
Categories:
Pro
ACF Post Object Query Loop inside a Posts Query Loop in Bricks

ACF Post Object Query Loop inside a Posts Query Loop in Bricks

How to loop through a CPT and within each post, output a list of related posts.
Categories:
Pro
Events grouped by months within years based on event date custom field value

Events grouped by months within years based on event date custom field value

How to output events grouped by years and months using three nested query loops in Bricks.
Categories:
Displaying SureCart Featured Products & Products Collections with a Query Loop

Displaying SureCart Featured Products & Products Collections with a Query Loop

We walk through how to use a query loop to display SureCart products, featured products & collections.
Categories: