Synchronizing Values between Advanced Custom Fields and the WordPress Customizer

Advanced Custom Fields has been part of my WordPress toolbox for a few years. I used standard custom fields as long as I could, but at a certain point I needed a solution with a more power and customization abilities. My two favorite features are Repeater fields (the most super glorious UI for end user array generation) and of course, the ability to create fieldsets that can be used as an options page.

Options with Advanced Custom Fields

Each time we build a custom theme for a client we set up a pretty barebones ACF options page. Fields you would likely find on our options pages are typically something like this:

• Logo (Image Upload field)
• Social Media Links (URL field)
• Telephone Numbers (text field)
• General email addresses (email field)
• Building Addresses (textarea field)

These values can be retrieved anywhere on the site using a code snippet that typically looks something like this:

echo get_field('field_name', 'options');

Options with the WordPress Options API

There is also a WordPress Options API. It does an excellent job of storing and retrieving values from the database, BUT it doesn’t come with the incredibly useful and timesaving field generation features of ACF. I used to work with this API a ton before I started using ACF, and I haven’t really looked back, until now…

Enter the WordPress Customizer

However, we are on WordPress 4.5 now, and I’ve had some time recently to really play around with the customizer. I also really don’t want to stop using ACF Option pages either. I was thinking, why can’t I use both on the same site? It’s actually not that hard, or time consuming to set this up. It really requires setting up two actions: customize_save_after and acf/save_post

That’s great and all, but what about Synchronizing Values?

Alright, our goal is simple:

• If specific values are updated in the Customizer, then make sure the ACF Options Page values are updated.
• If specific values are updated in the ACF Options Page, then make sure the Customizer values are updated.

First Up, write values set by the Customizer over ACF Fields

We are going to keep it really simple for this tutorial. Let’s assume that you want your client to be able to select a new color in the customizer, that is then saved to a specific ACF field:

function customizer_to_acf() {
	
		$all_options	= get_option('sweeth_theme_options');
		$link_color	= $all_options['link_color'];
		
                update_field('field_55a3b49cda866', $link_color, 'options');
	
	}
	
	add_action('customize_save_after', 'customizer_to_acf', 10, 1);

What just happened up there!?!?!

1. We use the get_option function to grab the hex values saved by the Customizer.
2. Then use the update_field ACF function to write the new color value from the customizer over the current color value in ACF.

Super easy, right?

Second, write values saved from ACF Fields to the Customizer

function acf_to_customizer( $post_id ) {
	
	    if( empty($_POST['acf']) ) {
	
	        return;
	
	    }
	
		$new_color				= get_field('field_55a3b49cda866','option');
		
		$current_options 				= get_option('dwellus_mk_options');
		
		$desired_options = array(
			'link_color'	=> $new_color
		);
		
		$merged_options = wp_parse_args( $desired_options, $current_options );
		
		update_option('dwellus_mk_options', $merged_options);
	
	}
	
	add_action('acf/save_post', 'acf_to_customizer', 20);