How can I make the wordpress editor apply the selected template?

welcome to this forum. 🙂

I’m not an expert, BUT I did do something similar by following the instructions and tutorials I found at these links below, hopefully these will help guide you.

In a nutshell, you have to go beyond just enabling the stylesheet in the editor, you have actually add a stylesheet specifically for the editor (editor-styles.css) and declare your styles in that (being sure to keep them the same as your front-facing style.css file).

Also, way below I put my own code if it also helps to serve as an example.

Good luck!!

Tutorials:

https://codex.wordpress.org/TinyMCE_Custom_Styles

https://developer.wordpress.org/reference/functions/add_editor_style/

http://wplift.com/how-to-add-custom-styles-to-the-wordpress-visual-post-editor
(note this last link is a great tutorial but adding the style declarations that way didn’t work, I had to use the code below)

More tutorials:
https://www.wpkube.com/add-dropdown-css-style-selector-visual-editor/

http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/

My use:

// Unhides the Styles drop down selector in the 2nd toolbar in Visual Editor
function bai_tinymce_buttons( $buttons ) {
  //Add style selector to the beginning of the toolbar
  array_unshift( $buttons, 'styleselect' );

  return $buttons;
 }
add_filter( 'mce_buttons_2', 'bai_tinymce_buttons' );

// Adds some styles to the visual editor formats (styles) dropdown, styles are in editor-style.css
function bai_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats = array(
    // Each array child is a format with it's own settings
    array(
        'title' => '.pull-right',
        'block' => 'blockquote',
        'classes' => 'pull-right',
        'wrapper' => true,
    ),
    array(
        'title' => '.tips',
        'block' => 'blockquote',
        'classes' => 'tips',
        'wrapper' => true,
    ),
    array(
        'title' => '.nutshell',
        'block' => 'div',
        'classes' => 'nutshell',
        'wrapper' => true,
    ),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'bai_mce_before_init_insert_formats' );

Leave a Comment