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?