ACF filter to customize WYSIWYG field wrapper attribute - width

Question

I am trying to customize the ACF field widths via load_fields filters for certain field types. I successfully customized the image type with:

function acf_image_width($image_width) {
$i_width = '40';
if(empty($image_width['wrapper']['width'])) {
$image_width['wrapper']['width'] = $i_width;
} }
add_filter('acf/load_field/type=image','acf_image_width', 10);

This is pre-populating the image type wrapper attribute width with a value of 40.

For the WYSIWYG field, I did the same but I'm getting an error. I did this but I'm sure I'm getting the field type wrong for WYSIWYG.

function acf_wysiwyg_width($content_width) {
$c_width = '60';
if(empty($content_width['wrapper']['width'])) {
$content_width['wrapper']['width'] = $c_width;
} }
add_filter('acf/load_field/type=wysiwyg','acf_wysiwyg_width', 10);

I have tried acf_the_content and that did not work either. Any help with the field type is appreciated.

Answer 1

When using the acf/load_field filter, as per the documentation link below...

https://www.advancedcustomfields.com/resources/acf-load_field/

The acf/load_field filter function parameter is...

• $field (array) The field array containing all settings.

So both of your function params are wrong. Don't be defining $image_width and $content_width as your functions parameter, as this will just confuse things, because you are actually passing full $field settings as an array.

Just pass $field param array as $field instead, knowing the acf/load_field filter will pass the field settings into $field param as an array.

Then use $field array to update, set or override current array values, and make sure you always return $field at the end of your acf/load_field filter function...

function acf_wysiwyg_width($field) {

  // dump field param contents so you can see the returned data
  // remove 2 lines below once your happy you know what your setting
  var_dump($field);
  exit;

  // then use $field param like this to override the array value (if these keys actually exist)
  $field['wrapper']['width'] = 60;

  // you must always return function param $field for acf/load_field filter to finish the job!
  return $field;

}
add_filter('acf/load_field/type=wysiwyg','acf_wysiwyg_width', 10);

---

So in my IDE (PhpStorm)

Above my acf_wysiwyg_width function if I type this...

/**

Then hit enter/return, it generates these PHP comments...

/**
 * @param $field
 * @return void
 */

So upon following any WP or ACF docs on what variable param type is being passed and returning, in this case for example I would specify (array) on passed param and return type (also added @see with docs url for reference to the documentation I am following for this filter/action function...

/**
 * @see https://www.advancedcustomfields.com/resources/acf-load_field
 * @param $field (array)
 * @return $field (array)
 */
function acf_wysiwyg_width($field) {

    // then use $field param like this to override the array value (if these keys actually exist)
    $field['wrapper']['width'] = 60;

    // you must always return function param $field for acf/load_field filter to finish the job!
    return $field;

}

OK the add_filter part, the number 10 is the priority in when this filter is hit.

add_filter('acf/load_field/type=wysiwyg','acf_wysiwyg_width', 10);

But when a second the integer in the add_filter call is set, it means the number of parameters passed in the function, so in the above example only 1 param $field is passed, which means you do not need to declare a single passed filter/action param.

But if the add_filter call had 2 params to pass for example using this acf_wysiwyg_width function, then you would need to define anything above 1 passed param into your add_filter call like this...

/**
 * @param $field (array)
 * @param $name (string)
 * @return $field (array)
 */
function acf_wysiwyg_width($field, $name) {

  // ...

  // return field array
  return $field

}

// 2 params $field and $name being passed through filter with priority 10
add_filter('acf/load_field/type=wysiwyg','acf_wysiwyg_width', 10, 2);

Can be a little confusing but look carefully at https://developer.wordpress.org/ documentation for filter/action priorities, parameter and return types. Same with all third party docs like ACF. 👍🏼