1

In our boilerplate, we target all WYSIWYG content on the front-end of the website with the .typography class in typography.scss and compile it using Gulp. We want to avoid making another file since all of our typography styles are already defined in typography.scss and are outputting to editor-style.css appropriately and it doesn't make sense to have two files if we don't have to. In order to not have another file, we need to add a wrapper with the .typography class to the WYSIWYG in WordPress so it applies in the admin. Any ideas on how to do this in a way that's appropriate? We don't want to change the CSS since it's based on our boilerplate that front-end uses for Drupal and BigTreeCMS as well and want to avoid updating our boilerplate in multiple places (if possible anyway). If this isn't possible we'll do as we need to. Thanks again for your time guys.

2

Here's the approach that I use. I add a single class (typically .entry-content) to the WP Editor on the back end as well as to the wrapper element when I output content on the front end.

style.css

.entry-content h2 {
    color: purple;
}
/* etc ... */

I'm also using add_editor_style() to load my theme's default stylesheet into TinyMCE:

function wpse_editor_styles() {
    // Use our existing main stylesheet for TinyMCE too.
    add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'wpse_editor_styles' );

I use the wpse_editor_styles_class() function below, which simply adds the .entry-content class to the TinyMCE <body> element.

/**
 * Add .entry-content to the body class of TinyMCE.
 * @param array $settings TinyMCE settings.
 * @return array TinyMCE settings.
 */
function wpse_editor_styles_class( $settings ) {
    $settings['body_class'] = 'entry-content';
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wpse_editor_styles_class' );

Sometimes I find it necessary to override the styles applied to .entry-content inside of the WP Editor. I use Sass and I have a partial dedicated for this purpose.

// TinyMCE .wp-content overrides.
body#tinymce.wp-editor {

    // Override Foundation's height: 100%; because WP Editor in 4.0+ won't scroll down all of the way otherwise.
    height: auto !important;

    &.entry-content {
        margin: 16px;
    }
}
  • 1
    Thank you, Dave. Appreciate the explanation and tip for overriding as well. – Stephen Sabatini Jul 31 '17 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.