Opens in a new tab
28th Jun '22
/
3 comments

ACF Options Fields in Bricks

This Pro tutorial walks you through outputting the values of custom fields attached to an ACF Pro's Options page in Bricks builder.

We shall register a phone text-type of field and a social group-type of field having facebook and twitter text-type of custom fields.

Then output the value of the phone field in the header like this:

when hovered

and the values of Facebook and Twitter fields inside the group as the URLs of the items in an Icon List element.

Step 1

Install and activate ACF Pro.

Create the Options page by adding the following in child theme's functions.php:

// Add ACF options page. if ( function_exists( 'acf_add_options_page' ) ) { acf_add_options_page(); }

Add a new Field Group and create the fields mentioned near the beginning of the article.

You could alternately import this (mirror) field group from our test site.

Ensure that the Options page is selected in the Location meta box.

Step 2

Click on Options menu item in the admin menu and populate the fields.

Step 3

Edit your Header Template with Bricks.

Add a Container in the appropriate location in the structure that is going to be the parent Div for Icon and Basic Text elements.

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
Configuring Image Gallery dynamic source in Bricks

Configuring Image Gallery dynamic source in Bricks

Let's say you have a custom field created with ACF Pro of the type Gallery called "Property Gallery" for posts of "Property" CPT. In the…
Pro
Related Posts using ACF Post Object in Bricks

Related Posts using ACF Post Object in Bricks

Modifying the query loop to limit the posts to only related posts via an ACF Post Object custom field.
Categories:
Tags:
Custom Function for ACF Link Field

Custom Function for ACF Link Field

How to output the label of an ACF link field through Dynamic Data.
Categories:
Tags:
Pro
ACF Term Meta on Single Posts in Bricks

ACF Term Meta on Single Posts in Bricks

Consider this scenario: CPT: Project Custom taxonomy: Project Type Each project will be assigned only one project type. Project Type taxonomy's custom field: Project Type…
Categories:
Pro
Google Maps JavaScript API in Bricks

Google Maps JavaScript API in Bricks

This Pro tutorial provides the steps to show post-specific maps with custom marker content in Bricks using Google's Maps JavaScript API and Advanced Custom Fields.…
Categories:
Pro
ACF Image Data in Bricks

ACF Image Data in Bricks

Displaying Alt text, Caption, Title and URL of an ACF image field for posts in a query loop.
Categories:
Tags:
Pro
ACF Post Object Query Loop inside a Posts Query Loop in Bricks

ACF Post Object Query Loop inside a Posts Query Loop in Bricks

How to loop through a CPT and within each post, output a list of related posts.
Categories: