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
<?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
// 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?
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?