ACF Tips and Tricks (Advanced Custom Fields)

ACF (Advanced Custom Fields) is an amazing plugin for extending the already potent power of WordPress. Below I’ve collected some of the ACF tips and tricks I use, almost on a daily basis, to get the most out of it that I can.

If you’ve got any tips or tricks you use regularly for ACF, leave a comment below!

---

Create a Theme Options Page

If you’re creating a theme for a client, you’ll at some point need somewhere to store global settings, hence the reason it’s a core part of ACF from version 5 upwards .

I’ve seen it before where developers have created a page (an actual page post type) called “settings”, then pulled all the fields from that page using it’s ID. Doing that makes a real mess and can lead to issues where the page ID may not match from one site to another. If both are using the same theme then you’ve got a headache on your hands.

Note: The only caveat with using theme settings is that they don’t get pulled across when using the WP Import plugin. Therefore the only reliable way around the issue I’ve found is to copy the entire database from local MySQL to the server version (via an SQL export file). Not always ideal, but it does mean your live version is identical to the local one.

<?php
	if(function_exists('acf_add_options_page')) {
		acf_add_options_page(
			array(
				'page_title' => 'Theme Settings',
				'menu_title' => 'Theme Settings',,
				'menu_slug'  => 'theme-settings',
				'capability' => 'manage_options'
			)
		);
	}
?>

More info: acf_add_options_page().

Only Show “Custom Fields” in Menu to Certain Users

Let’s face it, clients don’t usually understand the inner workings of WordPress, or sometimes even the basics, therefore you need to stop them breaking things. They can create posts and pages, yet that tends to be the limit.

The last thing you want a client doing is clicking the “Custom Fields” menu link and messing with something. Especially since anything they change is almost guaranteed to break their site.

Using the below code you can hide the page and menu link form everyone except the specific usernames you specify. It doesn’t just remove the menu link either. If a another user, no matter their role, tries to access that “Custom Fields” page, they’ll be told they don’t have access.

<?php
	function acf_hide_menu_item() {
		$current_user = wp_get_current_user();

		if(is_admin() && !$current_user->user_login == 'admin') {
			add_filter('acf/settings/show_admin', '__return_false');
		}
	}

	add_action('init', 'acf_hide_menu_item');
?>

More info: Hide the ACF menu.

Save and Load Fields from Your Theme

A big issue with ACF for theme development is having two versions of all your fields. One set lives locally and another lives on the live version. This is even more problematic when you have multiple sites using the same theme and fields.

The solution to that problem is ACF’s Sync feature. The way it works is by saving and loading the custom fields via JSON files in your theme.

Once you upload your theme you’ll get a new menu link show up on the “Custom Fields” page, titled “Sync”. Therefore every time you change some fields locally and upload your theme, you can simply click the “Sync” link on the live site to import the fields from your theme to the database.

If you’re wondering why you’d need to sync them at all, you actually don’t have to. However, if the theme changes on the site at any point it’s always good to have the fields saved in the database and not only be part of the theme.

<?php
	//---- Save JSON fields
	function acf_json_save_point($path) {
		$path = get_template_directory() . '/third-party/acf/json/';

		return $path;
	}

	add_filter('acf/settings/save_json', 'acf_json_save_point');

	//---- Load JSON fields
	function acf_json_load_point($paths) {
		unset($paths[0]);

		$paths[] = get_template_directory() . '/third-party/acf/json/';

		return $paths;
	}

	add_filter('acf/settings/load_json', 'acf_json_load_point');
?>

More info: ACF local JSON.

Add API Key to Back-End Google Maps

ACF has a field type called “Google Map”. What it does is let the WordPress user select a location on a map, which then shows on the front-end of the site in the same way.

The issue however is Google requires all maps use an API key, but how do you add an API key to the ACF plugin? Luckily the brilliant developers over at ACF have added a filter for us to use:

<?php
	function acf_google_api_key() {
		acf_update_setting('google_api_key', 'KEY');
	}

	add_action('acf/init', 'acf_google_api_key');
?>

More info: ACF Google Maps API Key.

Get Advertisements from Theme Settings

A handy trick I came up with when developing the latest version of Inspirational Pixels was to make the advertisements easier to manage.

By using an ACF “Group” field, I added all my advertisement codes to the theme settings page (mentioned above). I then created a function to check those ads are populated and pull them in if they are, just by using the field name.

<?php
	function get_advertisement($ad_name = false) {
		$ads = get_field('ads', 'options');

		if(
			$ad_name &&
			(isset($ads[$ad_name]) && $ads[$ad_name] != '')
		) {
			return $ads[$ad_name];
		}
	}
?>

Here’s how you’d use the field, just by calling the field name. We don’t need to specific it’s a theme settings field by adding ‘option’ as the ID, since we’ve done that in the function above.

<?php get_advertisement('header_horizontal'); ?>