By Page Wood • March 31, 2016

Advanced Custom Fields is an incredible plugin for anyone doing serious WordPress development. Often times I find myself using the WYSIWYG field provided by ACF, which is a full WordPress TinyMCE editor. The ACF WYSIWYG field will behave just like the standard WordPress editor, and most any customizations (shortcode buttons, font-sizes, etc.) are made available, minus one. Due to the way that the ACF WYSIWYG is constructed, adding custom editor styles is a bit tricky.

With a standard WordPress TinyMCE editor it’s pretty straight forward to add styles using add_editor_style() function. Notes on this can be found in the Codex here: https://developer.wordpress.org/reference/functions/add_editor_style/.

Since we can’t use the WordPress hook, we need to hook into the TinyMCE init filter to control what files are loaded within the WYSIWYG editor itself. We do this with a function that grabs existing stylesheets loaded in TinyMCE, and then adds our custom stylesheet to the array of styles set to the content_css property.

Function for Adding our Custom Editor Stylesheets to Advanced Custom Fields WYSIWYG:

add_filter( 'tiny_mce_before_init', function ($mce_init) {

  $content_css = get_stylesheet_directory_uri() .'/css/editor.css';

  //Grab existing stylesheets and then add our new $content_css
  if ( isset( $mce_init[ 'content_css' ] ) ) {
    $content_css_new =  $mce_init[ 'content_css' ].','.$content_css;
  }

  $mce_init[ 'content_css' ] = $content_css_new;

  return $mce_init;
});

Thanks to joelgoodman and emmils3 on the Advanced Custom Fields forum for diving into this topic here: http://support.advancedcustomfields.com/forums/topic/wysiwyg-styling/