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

Related Tutorials..

Color Custom Field as Section Background Color on Category/Term Archives in Bricks

Color Custom Field as Section Background Color on Category/Term Archives in Bricks

How to use a color from a taxonomy term custom field for as the hero section background color on archive pages.
Categories:
Tags:
Pro
Related Posts by Taxonomy in Bricks

Related Posts by Taxonomy in Bricks

In the previous Posts Related by Current Post's Terms in Bricks tutorial, we showed how posts related to the current single post that have the…
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…
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
Querying Posts by Date/Datetime Custom Fields in Bricks

Querying Posts by Date/Datetime Custom Fields in Bricks

This Pro tutorial shows how to configure ACF and Meta Box to query posts in Bricks by custom field(s) of the type Date/Date Time Picker…
Categories:
Tags: