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
ACF User Field Bricks PHP Query

ACF User Field Bricks PHP Query

In the Bricks Facebook group a user asks: my end goal was to create a set of cards that would display the Users that are…
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
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Categories:
Pro
WordPress Posts using WP REST API in Bricks

WordPress Posts using WP REST API in Bricks

The steps to display posts from any WordPress site that has WP REST API enabled in Bricks builder using a custom query type.
Categories:
Using WP Grid Builder Facets with Bricks’ Query Loop

Using WP Grid Builder Facets with Bricks’ Query Loop

Update: This tutorial was written before WPGB had a Bricks add-on. Now, it is advisable to use that add-on instead. Get it from here. Updated…
Categories:
Pro
Masonry + Click-type Infinite Scroll in Bricks

Masonry + Click-type Infinite Scroll in Bricks

This Pro tutorial provides the steps to lay out posts in a masonry style with a View More button, which, when clicked, loads the next…
Categories:
Pro
Related Episodes Grouped by Episode Chapters on Single Podcasts in Bricks when using JetEngine

Related Episodes Grouped by Episode Chapters on Single Podcasts in Bricks when using JetEngine

A user asks: How to Display Related Episodes Grouped by Chapters on a Podcast Page in Bricks? Hi everyone, I have two post types created…
Pro
CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…
Categories: