Plugin / ACF WYSIWYG Styling

Delwin Vriend

Description

Description

A very tiny plugin that adds the ACF field key, field name, Flexible Content field name and Flexible Content layout name to the WYSIWYG
editor body tag, allowing you to target these classes, along with the existing post-type-* classes added by default by WordPress, in
your editor-style.css for a better admin/editor experience.

This works for both ACF and ACF Pro, version 5.

Usage

  1. Install the plugin through the Install Plugins interface or by uploading the acf-plugin-wysiwyg-styling folder to your /wp-content/plugins/ directory.
  2. Activate the ACF WYSIWYG Styling plugin from the Admin > Plugins menu.
  3. Create or edit your editor-style.css in your theme directory and use the newly added classes to style your WYSIWYG editors.

For example:

  • The ACF WYSIWYG field with key field_9999ffff11112222 can be targeted with the following CSS:

    body.acf-field-key-field_9999ffff11112222 {
    background-color: red;
    }

  • The ACF WYSIWYG field with key field_9999ffff11112222 in the “room” post type can be targeted with the following CSS:

    body.post-type-room.acf-field-key-field_9999ffff11112222 {
    background-color: blue;
    }

  • All ACF WYSIWYG fields named “my_wysiwyg” can be targetted with the following CSS:

    body.acf-field-name-my_wysiwyg {
    background-color: yellow;
    }

  • All ACF WYSIWYG fields in the Flexible Content field named “page_content” can be targetted with the following CSS:

    body.acf-flex-name-page_content {
    color: green;
    }

  • All ACF WYSIWYG fields in the Flexible Content layout field named “test_layout” can be targetted with the following CSS:

    body.acf-layout-test_layout {
    font-family: “Computer Modern Serif”;
    }

  • The ACF WYSIWYG field named “my_wysiwyg” in the Flexible Content layout field named “test_layout” can be targetted with the following CSS:

    body.acf-layout-test_layout.acf-field-name-my_wysiwyg {
    border: 4px solid red;
    height: 100%;
    margin: 0 auto;
    max-width: 100px;
    }

N.B. I target using the body tag so that a user cannot accidentally target the admin CSS in their edit of the field (regardless of how unlikely
that would be).

DIRECTORY DISCLAIMER

The information provided in this THEME/PLUGIN DIRECTORY is made available for information purposes only, and intended to serve as a resource to enable visitors to select a relevant theme or plugin. wpSocket gives no warranty of any kind, express or implied with regard to the information, including without limitation any warranty that the particular theme or plugin that you select is qualified on your situation.

The information in the individual theme or plugin displayed in the Directory is provided by the owners and contributors themselves. wpSocket gives no warranty as to the accuracy of the information and will not be liable to you for any loss or damage suffered by you as a consequence of your reliance on the information.

Links to respective sites are offered to assist in accessing additional information. The links may be outdated or broken. Connect to outside sites at your own risk. The Theme/Plugin Directory does not endorse the content or accuracy of any listing or external website.

While information is made available, no guarantee is given that the details provided are correct, complete or up-to-date.

wpSocket is not related to the theme or plugin, and also not responsible and expressly disclaims all liability for, damages of any kind, arising out of the use, reference to, or reliance on, any information or business listed throughout our site.

Keep Leading Your Followers!
Share it for them.