Skip to content

Instantly share code, notes, and snippets.

@hereswhatidid
Last active September 27, 2022 15:27
Show Gist options
  • Save hereswhatidid/f88390659cbf1fd6a03d to your computer and use it in GitHub Desktop.
Save hereswhatidid/f88390659cbf1fd6a03d to your computer and use it in GitHub Desktop.
Applies defined CSS classes to the ACF WYSIWYG editor so that you can individually style them.
<?php
function hwid_acf_admin_footer() {
?>
<script>
( function( $) {
acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id ) {
// grab the classes defined within the field admin and put them in an array
var classes = $( '#' + id ).closest( '.acf-field-wysiwyg' ).attr( 'class' );
if ( classes === undefined ) {
return mceInit;
}
var classArr = classes.split( ' ' ),
newClasses = '';
// step through the applied classes and only use those that start with the 'hwid-' prefix
for ( var i=0; i<classArr.length; i++ ) {
if ( classArr[i].indexOf( 'hwid-' ) === 0 ) {
newClasses += ' ' + classArr[i];
}
}
// apply the prefixed classes to the body_class property, which will then
// put those classes on the rendered iframe's body tag
mceInit.body_class += newClasses;
return mceInit;
});
})( jQuery );
</script>
<?php
}
add_action('acf/input/admin_footer', 'hwid_acf_admin_footer');
.hwid-field-group {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
.hwid-field-group.hwid-dark {
background: #000;
color: #fff;
}
.hwid-field-group.hwid-light {
background: #eee;
color: #333;
}
.hwid-field-group.hwid-red {
background: #fff;
color: #f00;
}
<?php
function hwid_theme_add_editor_styles() {
add_editor_style( 'css/editor-style.css' );
}
add_action( 'admin_init', 'hwid_theme_add_editor_styles' );
@chrispink
Copy link

Your last change, line 20 of the prefix 'hwid-' to 'rmg-' makes no sense and breaks the code.
I've changed it in the version I have used and it works.
Nice piece of work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment