3rd Apr '23
/
3 comments

Meta Box Relationship Slider in Bricks

Meta Box Relationship Slider in Bricks

This Pro tutorial provides the steps to modify the query parameter of a Bricks query loop to display slides of posts that are related to entries of a CPT via a Meta Box Relationship field.

Scenario:

CPT: featured-article

Meta Box Relationship: post-featured-articlesfrom featured-article to post

Requirement:Show the post title, post excerpt and a button linking to the post's permalink of all unique posts that are connected to the items of Featured Article CPT as slides in Bricks' nestable slider on a static Page (say, the homepage).

Step 1

Install and activate Meta Box and its AIO extensions.

Create the Featured Article CPT having a slug of featured-article.

Step 2

Create a Relationship titled say, "Post -- Featured Articles" from Featured Article to Post.

Do not tick "Reciprocal relationship".

Relationships in Meta Box are bi-directional by default unlike in ACF Pro which needs a separate plugin or code snippet.

Step 3

Create Featured Article CPT entries and select 1 or more related posts for each.

Step 3

Edit your homepage (or any other static Page/template) with Bricks.

Add a Section and inside its Container, a Slider (Nestable) element.

Apply this Dynamic data condition on the Section to ensure that it gets output only if there's at least 1 post that has been selected as a related/connected item for any featured article.

{echo:bl_get_count_posts_related_to_featured_articles}

We shall define this custom function in a bit.

Delete Slides 2 and 3.

Enable query loop on Slide 1. Do not set any query parameters in the builder.

Add a Heading, Basic Text and Button elements inside the Slide 1.

Change Heading's text to:

{post_title}

Change Basic Text's text to:

{post_excerpt}

Change Button's text to Read more →

Link type: Dynamic Data

{post_url}

Step 4

Add the following in child theme's functions.php or a code snippets plugin:

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
Dynamic Accordion in WordPress using Meta Box and Alpine.js

Dynamic Accordion in WordPress using Meta Box and Alpine.js

This Pro tutorial provides the steps to implement an accordion using Alpine.js in WordPress that pulls the values of sub fields of a Meta Box…
How to add a custom SwiperJS slider in Bricks

How to add a custom SwiperJS slider in Bricks

In this tutorial, we'll show you how to integrate a custom slider in Bricks using the SwiperJS library and how to add custom parameters using…
Categories:
Tags:
Pro
Post Titles and Post Content Tabs in Bricks

Post Titles and Post Content Tabs in Bricks

How to set up Nestable tabs with post titles as the tab menu, and post content and/or any other post-specific data as the tab content.
Categories:
Latest Featured Posts First in Bricks Query Loop (No Duplicates)

Latest Featured Posts First in Bricks Query Loop (No Duplicates)

In the Bricks Facebook group a user asks: We can use AI to help unfreeze our brains sometimes or at least have it write the…
Categories:
Pro
Recently Viewed Posts Bricks Query Loop

Recently Viewed Posts Bricks Query Loop

How to output the most recent X number of posts (any post type) viewed by the current visitor.
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: