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

I wrote a WordPress theme for a non-profit where I use templates to style individual pages. I select the template for an individual page in the editor on the right:

For styling of a template page, I simply add a css class to the outer most element in the template and style the rest based on the presence of this class – in this example layout-krankenbett-gruen:

templates/KrankenbettGruen.php:

<?php /* Template Name: Krankenbett grün */ ?>

<?php get_header(); ?>
    <main class="layout-krankenbett-gruen">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
            get_template_part( 'content', get_post_format() );
        endwhile; endif; ?>
    </main>
<?php get_footer(); ?>

I can style the page similar to the display in the editor using this code in functions.php

// enable style sheet for normal page display also in editor
add_theme_support('editor-styles');
add_editor_style('style.css');

such that all styles that get applied to the page get also applied in the editor.

I want to have the editor also show the templates as they look on the page later.
But somehow the css tag which I add for the template is not present in the editor and therefor the display of the template in the editor is not correct.

How can I recognize a template in the editor such that I can display it in the editor in the same style as on the page?

Update:

I saw that the Twenty Twenty Theme also has Templates (Standard-Template, Cover-Template and Template for wide pages). If I change the template in this Theme, the page in the editor does not change, but the page itself does. Is that intended behavior? I feel like the user would like to see how a template looks (in the editor) before he applies it. Am I getting it wrong?

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

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' );