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?