Advanced Custom Fields, or ACF, provides a great user interface for defining and laying out custom fields for Posts, Pages, Custom Post Types, Options, Users and more in WordPress. The Tab Field provides an easy way to clean up your user interface by seperating different field inputs into different tabs, making it easier for your users to find what they are looking for.

One feature that is missing from the Tab field however is the ability to link directly to a specific tab from another page. We can work around this with some pretty straightforward JavaScript. In short when the acf “ready” event fires, we want to look at all the tab buttons, and if any match our URL hash (in lowercase with spaces replaced with hyphens) then we “click” that link, loading the appropriate tab. Subsequently we can update the hash in the address bar any time a new tab is clicked making it easy for uses to bookmark the page or send the link to another user.

If your tab name is “Options Tab 1” the link to it would be something like edit.php?post_type=my-post-type#options-tab-1.

(function($){
	// run when ACF is ready
	acf.add_action('ready', function(){
		// check if there is a hash
		if (location.hash.length>1){
			// get everything after the #
			var hash = location.hash.substring(1);
			// loop through the tab buttons and try to find a match
			$('.acf-tab-wrap .acf-tab-button').each(function(i, button){ 
				if (hash==$(button).text().toLowerCase().replace(' ', '-')){
					// if we found a match, click it then exit the each() loop
					$(button).trigger('click');
					return false;
				}
			});
		}
		// when a tab is clicked, update the hash in the URL
		$('.acf-tab-wrap .acf-tab-button').on('click', function($el){
			location.hash='#'+$(this).text().toLowerCase().replace(' ', '-');
		});
	});
})(jQuery);

The post ACF: Link to Specific Tab appeared first on Justin Silver.

There is a somewhat serious bug in Advanced Custom Fields 5.0 and its handling of backslashes, at least on my WordPress installs. The problem is that the slashes are stripped, but after the data has been serialized resulting in a mismatch between the declared string length in the serialized data, and it’s actual value length.

Imagine for example a Validated Field that uses a regular expression to check that the value is a digit. The validation pattern would look something like \d for our example. When this is serialized, it’s length is 2 and the data looks like s:2:"\d". The problem is that when this is represented as a string to insert into the database, the backslash just escapes the d and what gets saved to the database is s:2:"d".

Now we have a much bigger problem than a missing backslash – because the declared length is 2 but the length of the string "d" is 1, the serialized data can no longer be loaded from the database and all the field configuration values are lost.

This occurs during the upgrade process from ACF 4 to 5, as well as when saving a field with a backslash as part of its configuration. The field will default back to the “Text” field type in the UI, and the settings will be unloadable in the database. It is possible to manually fix this data by adding the missing \ characters back in, but this is going to be tedious work depending on how many fields are affected and the complexity. Even when fixed manually the field will break again the next time it is saved.

A bug has been listed on the ACF support site.

Fix for Backslashes in Field Configuration

The following code attempts to correct this behavior, the following code attempts to use the filters content_save_pre and acf/get_valid_field to double slash any single slashes found in the configuration so that they are saved correctly to the database.

class ACF5_Slash_Fix {
	function __construct(){

		// bug fix for acf with backslashes in the content.
		add_filter( 'content_save_pre', array( $this, 'fix_post_content' ) );
		add_filter( 'acf/get_valid_field', array( $this, 'fix_upgrade' ) );
	}

	function fix_upgrade( $field ){

		// the $_POST will tell us if this is an upgrade
		$is_5_upgrade = 
			isset( $_POST['action'] ) && $_POST['action'] == 'acf/admin/data_upgrade' && 
			isset( $_POST['version'] ) && $_POST['version'] == '5.0.0';

		// if it is an upgrade recursively fix the field values
		if ( $is_5_upgrade ){
			$field = $this->do_recursive_slash_fix( $field );
		}

		return $field;
	}

	function fix_post_content( $content ){
		global $post;

		// are we saving a field group?
		$is_field_group = get_post_type() == 'acf-field-group';

		// are we upgrading to ACF 5?
		$is_5_upgrade = 
			isset( $_POST['action'] ) && $_POST['action'] == 'acf/admin/data_upgrade' && 
			isset( $_POST['version'] ) && $_POST['version'] == '5.0.0';

		// if we are, we need to check the values for single, but not double, backslashes and make them double
		if ( $is_field_group || $is_5_upgrade ){
			$content = $this->do_slash_fix( $content );
		}
		
		return $content;
	}

	function do_slash_fix( $string ){
		return preg_match( '~(?<!\\\\)\\\\(?!\\\\)~', $string )?
			str_replace('\\', '\\\\', $string ) :
			$string;
	}

	function do_recursive_slash_fix( $array ){

		// loop through all levels of the array
		foreach( $array as $key => &$value ){
			if ( is_array( $value ) ){
				// div deeper
				$value = $this->do_recursive_slash_fix( $value );
			} elseif ( is_string( $value ) ){
				// fix single backslashes to double
				$value = $this->do_slash_fix( $value );
			}
		}

		return $array;
	}
}
new ACF5_Slash_Fix();

Included in Validated Field

This fix is also included in the Validated Field plugin available in the WordPress repository. It offers additional enhancements as well to support field validation, read-only values, unique key, and more.

The post Fix Backslashes in Advanced Custom Fields appeared first on Justin Silver.

Advanced Custom Forms Pro 5.0 is out, and it contains a major overhaul to the way that custom fields are handled. It also had a major impact on the way that third-party add-ons were written to extend ACF functionality which meant that it was considerable work to refactor my Validated Fields plugin to support the new architecture. The new architecture is definitely superior in my opinion and has some great new filters that we can leverage such as acf/validate_value and its siblings acf/validate_value/type={$field_type}, acf/validate_value/name={$field_name}, acf/validate_value/key={$field_key}.

Unfortunately this filter does not have the post_ID available to it, which greatly limits the range of things we can do with it. To work around this I found that by inserting a field named acf[post_ID] into the editor form – and the “acf” part is critical – it would be picked up and submitted with the rest of the form values. This meant that it would be available in the $_POST, really opening up the possibilities.

Sample Code

// use a unique value to prevent conflicts with other ACF fields
define( 'MY_ACF_FORM_VALUES', 'MY_ACF_FORM_VALUES' );

// add the post_ID to the acf[] form
function my_edit_form_after_editor( $post ){
	print( "<input type='hidden' name='acf[%1$s][post_ID]' value='%2$d'/>", 
		MY_ACF_FORM_VALUES, 
		$post->ID 
	);
}
add_action( 'edit_form_after_editor', 'my_edit_form_after_editor' );

// use the post_ID in your validation function
function my_validate_value( $valid, $value, $field, $input ) {
	$post_id = $_POST['acf'][MY_ACF_FORM_VALUES]['post_ID'];
	// more code!
	return $valid;
}
add_filter( "acf/validate_value", 'my_validate_value', 10, 4 );

The rest of the my_validate_value() will be up to you.

Shameless Plug.

Why reinvent the wheel? The above code is already included in Validated Field for ACF available in the WordPress repository.

The post ACF validate_value Filter With post_ID appeared first on Justin Silver.

This plugin will create an add-on field wrapper for Advanced Custom Fields (ACF in the WordPress Plugin Repository) that will give you additional validation functionality – PHP functions, regular expression, input field masking, and uniqueness (post type/meta key, meta key, or site-wide). You can find and install the plugin from the WordPress repository, located at http://wordpress.org/extend/plugins/validated-field-for-acf/.

UPDATED: This plugin is compatible with Advanced Custom Fields 4 & 5

The plugin code

This file is always up to date based on the trunk of the WordPress.org SVN repository.

validated_field.php

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx</center>
</body>
</html>

validated_field_v4.php

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx</center>
</body>
</html>

validated_field_v5.php

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx</center>
</body>
</html>

js/input.js

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx</center>
</body>
</html>

css/input.css

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx</center>
</body>
</html>

The post WordPress Plugin: validated-field-for-acf appeared first on Justin Silver.