17th Sep '24
/
3 comments

ACF Select Field Query Types in Bricks

In the BricksLabs Facebook group a user asks:

Hi all, I am building a single post template for a CPT and want to know if I can work more effectively with some ACF data.

With the ACF Select Field, I would like a way I can return the selected items and work with the data in bricks more effectively, Currently I am using a snippet to return the selections > https://codefile.io/f/G1fLgmJ6ee

This works by returning each choice separately, but it removes the workflow from within the builder, and I have to start writing custom CSS, etc., instead of applying a class to an element and styling it in the builder.

Is there a better way I can do this that allows me to keep using the builder to edit elements live and see the correct design/output in the builder? I have a ton of these to do and hope there is a better way.

This Pro tutorial provides the steps to register

  • a custom query type for a specific ACF select field
  • custom query types for all ACF select fields automatically
    • with the corresponding dynamic tags to be used in the editor for outputting the selected choices

Custom query type for a specific ACF select field

Consider this field group:

For the "Sample Page", I have Bricks and Breakdance selected:

After implementing the tutorial, a new "WordPress Page Builders Query" query type will be available

and a new dynamic tag:

to get the output:

Custom query types for all ACF select fields

Field groups:

(in addition to the earlier one)

Sample Service CPT post:

After implementing the tutorial, these query types will be available: "Service Locations (ACF Select)" and "WordPress Page Builders (ACF Select)" with these corresponding dynamic tags:

{bl_acf_service_locations_value}

{bl_acf_wordpress_page_builders_value}

Custom query type for a specific ACF select field

Add the following in child theme's functions.php (w/o the opening PHP tag) 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
Sub Field Value from the Last ACF Repeater Row in Bricks

Sub Field Value from the Last ACF Repeater Row in Bricks

Getting the value of a specific sub field of an ACF Pro‘s Repeater field and output in the query loop.
Categories:
Tags:
Random Posts in the Same Category as the Current Single CPT Post in Bricks

Random Posts in the Same Category as the Current Single CPT Post in Bricks

Here’s how query loop can be set in Bricks to show related posts by a taxonomy’s terms
Categories:
Pro
Non-empty events sorted by event date and other posts below in Bricks

Non-empty events sorted by event date and other posts below in Bricks

Updated on 15 Jan 2024 Consider a scenario where you are showing posts from multiple post types namely post, event and game in a single…
Categories:
Pro
Posts Grouped by Post Dates in Bricks

Posts Grouped by Post Dates in Bricks

Setting up query loops for “Post Dates” with an the inner loop displaying all posts published on that day.
Categories:
Pro
Programmatically populating ACF field values in WordPress

Programmatically populating ACF field values in WordPress

An example of how to set the values of a Select-type field with the names and labels of all public post types.
Categories:
Pro
ACF Date Field Value Custom Format in Bricks

ACF Date Field Value Custom Format in Bricks

In the Bricks forum, a user asks: Hi there, I am setting up an events calendar using bricks. In some circumstances I would like to…
Categories:
Tags:
Pro
Outputting ACF Repeater’s Sub Fields

Outputting ACF Repeater’s Sub Fields

This Pro tutorial provides the code for printing custom HTML after looping through rows of a ACF Repeater (available in ACF Pro) that has a…
Categories:
Pro
How to Insert Element(s) Between Query Loop Posts in Bricks

How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead. This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth…