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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Post Views Counter Query Loop in Bricks

Post Views Counter Query Loop in Bricks

How we can output the most viewed posts in your Bricks site in a query loop.
Categories:
Pro
Posts from Random Categories in Bricks

Posts from Random Categories in Bricks

Updated on 31 Jul 2023 In BricksLabs Facebook group a user asked: How would you query 3 WordPress posts from 3 different categories with Brick…
Pro
Testimonials Slider in Bricks

Testimonials Slider in Bricks

Setting up a dynamic testimonial slide that pulls the data from a CPT's post fields and custom fields.
Categories:
Tags:
How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

This tutorial will explain how to enable the AJAX filter with an infinite scroll query loop container, how to add a sorting function, how to…
Categories:
Pro
Dynamic Horizontal Posts Accordion in Bricks

Dynamic Horizontal Posts Accordion in Bricks

Update on 8 Sep 2024: You may want to follow the newer version that considers accessibility. Looking to make a Horizontal Image Accordion dynamic? This…
Custom Image Field Avatar in WordPress

Custom Image Field Avatar in WordPress

Learn how to use a Meta Box image field value as the author profile image on single post pages in WordPress/Bricks.
Categories:
Tags: