Opens in a new tab
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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Custom query loop for looping through SureCart product images.
Categories:
Tags:
Pro
Bricks Query Loop Cards with Hover Image

Bricks Query Loop Cards with Hover Image

How images uploaded to posts can appear when the featured images in a Bricks posts query loop are hovered.
Categories:
Pro
Child Posts Section in Bricks

Child Posts Section in Bricks

This Pro tutorial provides the steps to limit the posts (can be of any post type) output by Bricks' query loop to children of the…
Categories:
Pro
Custom Nested Queries in Bricks

Custom Nested Queries in Bricks

In most of the previous tutorials covering nested query loops in Bricks on this site, we accessed the parent query's looping object in the inner…
Categories:
Pro
Mixed Post Types Grid in Bricks

Mixed Post Types Grid in Bricks

How to set up a mixed post types grid in Bricks, where you can display both standard posts and custom quote cards in alternating positions.
Categories:
Pro
Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Step by step on how to use Isotope in Bricks for filtering posts by categories.
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
Top-level Pages and Children Bricks Query Loop

Top-level Pages and Children Bricks Query Loop

This Pro tutorial for Bricks users can be considered Part 2 or a variation of the earlier Bricks Query Loop for Top-level Parent Pages with…
Categories:
Pro
Nested Queries in Bricks – Posts Grouped by Published Years and Categories

Nested Queries in Bricks – Posts Grouped by Published Years and Categories

In the past we showed how posts could be grouped by years in Bricks. This Pro tutorial takes it further by grouping posts by categories…
Categories: