Advanced Custom Fields – here's what I did…

ACF Gotchas: Hide on screen

Gabe — Fri, 21 Feb 2020 15:33:56 +0000

If you’ve ever run across issues with the “Hide on screen” options in your ACF groups not working or being ignored, be sure to make note of the “Order No.” value. Hide on screen options for field groups with a lower order number value will take precendance over higher numbered groups.

For example, in the screenshot below you can see two separate custom fields groups that are applied to the same post object:

When viewing the edit screen for this post, the main Content Editor would still appear even though you’ve marked it as hidden in the field group on the right. The reason for this is because the field group on the left has a lower Order No. and takes precedance over the group on the right.

Populate an ACF drop down field with a list of GravityForm forms

Gabe — Tue, 18 Sep 2018 16:54:31 +0000

Here is an example script showing how to populate an Advanced Custom Fields drop down with any forms you have currently enabled that have been created by the GravityForms plugin:

Add ACF fields to product attributes in WooCommerce

Gabe — Sat, 20 Aug 2016 13:24:35 +0000

For a client’s site we wanted to add some ACF fields to the Edit Term page for global attributes. If the attribute list were fixed, this would be a simple task of targeting the specific taxonomies in the field group’s location parameter. What complicated this particular instance is that we wanted ALL attribute edit pages to have these custom fields and the client had the ability to add or remove attribute via the admin. This meant that we had to be able to gather all the attribute types and target them for our field group.

This turned out to be a fairly straight-forward task. By using the WooCommerce function wc_get_attribute_taxonomy_names() we can create a set of location rules that are dynamically created which will target all existing global attribute types.

Here is the complete code which will add a tab and sample image field to all global attribute Term Edit pages:

Customize ACF WYSIWYG Input Styles

Gabe — Thu, 13 Aug 2015 03:29:27 +0000

Often times, a design will call for separate areas within a page to have their own unique styles applied to them. Whether it’s a different background color, font size, or available space, editing those areas can be frustrating when the backend editor does not have those same styles. By default, ACF does not have the ability to specify a body class for the WYSIWYG editor’s iframed body tag. (a prototype solution has been developed) Thankfully, ACF does have a JavaScript filter available that allows us to directly modify those classes, and with a little trickery, we can use the field options to give our WYSIWYG fields unique classes and thus styles.

The filter that is used for this example is ‘wysiwyg_tinymce_settings‘. This filter makes it possible to edit the TinyMCE settings immediately before the field is initialized. What I decided to do was to make use of the existing CSS wrapper field in the ACF admin:

Then, using the previously mentioned filter, I grab those values and apply them to the WYSIWYG editor’s iframe body tag:

Now, if I specify the correct class names within my ‘editor-styles.css’ file, the editor will get the custom styling I’ve set.

Now I can easily style all the ACF WYSIWYG fields in my admin so that they exactly reflect how the content will look on the front end.

The full code is available on Github.

Creating custom product tabs in WooCommerce Storefront with ACF

Gabe — Wed, 05 Aug 2015 21:33:12 +0000

Recently I was tasked with adding some custom tabs to a WooCommerce store using the Storefront theme. There was a commercial solution available but I felt this was something that could fairly easily be done via Advanced Custom Fields and the built-in Storefront filters. 30 minutes later and a solution was in place. Here’s a basic run down of how I was able to pull in the content of a Repeater field:

First, create the content fields within ACF. I used just a basic repeater that contains a text field for the tab title and a WYSIWYG field for the tab content. For the example code, the repeater was named “tabs” and it’s sub fields are named “tab_title” and “tab_content”.

Next, I just had to tie these tabs in to the existing WooCommerce filter “woocommerce_product_tabs” (more details) which allows you to modify the existing tabs for each product on it’s detail page. I grabbed the assigned tabs from the ‘tabs’ ACF field. Stepping through these tabs I added them to the incoming ‘$tabs’ variable within the filter. The required properties for each tab are:

title – The title of the tab
priority – The order in which the tab should appear among the other tabs
callback – The name of the function to call to get the content of the tab

You’ll notice in my code I’m adding a fourth property “tabContent”. This is a custom property used by my content generating function to get the WYSIWYG content to display within the tab.
And that’s all there is to it. Of course there are plenty of areas to improve this small bit of code. For example, I plan on adding in a “Global Tabs” area that would let the client specify global tabs that should appear under all products or even products just within specific Categories. Additionally, I also will be adding a field to control the value of the ‘priority’ property rather than auto-generating.

The full code including the ACF Repeater declaration can be viewed on GitHub.

Extending the get_field function in Advanced Custom Fields to have a default and fallback option

Gabe — Wed, 17 Jul 2013 19:23:09 +0000

This function will extend the default get_field function within Advanced Custom Fields to also allow you to:

pass in a default value in case none are found
fall back to site options (if one exists)
pass in the ID of the post to get the field from and then apply the previous actions