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:

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.

Set this Container to link to the phone field’s value.

HTML Tag: a (link)

tel:{acf_phone}

Add an Icon element inside the Container and set it to a mobile/phone.

and a “Basic Text” element below it.

Set the text to:

{acf_phone}

Now let’s work on changing the color of the icon and the phone number text to a different color when the Container is hovered.

Select the Container and click the cursor icon whose tooltip reads “States (pseudo-classes)”.

Create this selector: :hover i

With the above active, go to STYLE tab (of the Container element, NOT the Icon element), TYPOGRAPHY and change the Color to your desired icon’s color when the Container is hovered.

Similarly, create another pseudo selector, :hover div and set its color.

Step 4

Create/edit the Page where you would like to display the social links.

Add a Section and inside its Container, an Icon List element.

Set the URL for the Twitter item to:

If the Twitter field were not inside a group-type of field, we could’ve simply used:

{acf_twitter}

but since it is inside a group named social, we need to use ACF’s get_field() function and pass the actual field name prepended with the group name + an underscore as the 1st parameter and option as the 2nd parameter.

Similarly, set the URL of the Facebook item.