Add editor styles to the Classic editor

When editing with the classic editor you will notice that your styles and Customizer settings are not being transferred, including typography. For example, any various font size headings that you might have set in the Customizer are not displayed. You would need to preview your page in order to see your changes. There is a way to include styles to your editor, though. You would need to include your CSS inside a GP child theme.

For instance, you could include H2 to H6 heading font sizes like this:

h2, h3, h4, h5, h6 {
	font-size: 20px;
}

@media (min-width: 1025px) {
	h2, h3, h4, h5, h6 {
		font-size: 23px;
	}
}

As you can see I included a media query for the heading mobile font sizes. You can use the values from the Customizer and apply it in your CSS.

Then, add this to your functions.php:

add_action( 'init', 'gm_add_editor_styles' );

function gm_add_editor_styles() {
    add_editor_style( get_stylesheet_uri() );
}

Now try editing a page with the custom editor and your headings are going to be displayed in the intended size without having to preview the page.

GeneratePress logo

Need help on customizing GeneratePress or GenerateBlocks?

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!