Adding editor-style.css Showcase Pro fails

[Bart van Maanen]

I've been trying to add an editor-style.css to Showcase Pro, but I can not get it to show up (no pun intended) in the Visuela Editor.

Usually this seemed to work:

//* Visual editor
add_editor_style( 'editor-style.css' );

//* Add Google fonts to Visual Editor
add_action( 'after_setup_theme', 'sp_editor_fonts' );
function sp_editor_fonts() {
	$font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Hind:300,400,500,600,700' );
	add_editor_style( $font_url );
}

In the WordPress Codex I noticed the code has changed to add_editor_style( array|string $stylesheet = 'editor-style.css' ). Does this have anything to do with this issue?

Also, I have tried the code provided by Carrie Dils which works when calling in the complete stylesheet, which is not needed. Just the css elements for post and pages will do.

add_action( 'init', 'sp_add_editor_styles' );

/**
 * Apply theme's stylesheet to the visual editor.
 *
 * @uses add_editor_style() Links a stylesheet to visual editor
 * @uses get_stylesheet_uri() Returns URI of theme stylesheet
 */
	function sp_add_editor_styles() {
 	add_editor_style( get_stylesheet_uri() );
}

So, as I'm not a PHP wonderboy, what am I missing here or overlooking.

Any help is appreciated.

https://beeldbedrijf.nl/

[Victor Font]

add_editor_style does not require a function. The parameter $stylesheet is the name of the stylesheet, relative to the theme root. What you are asking about in the codex is the default name that is used if no style sheet is specified when calling the function. So if your style sheet is named editor-style.css, all you have to do is call the function add_editor_style();. Make sure editor-style.css is in the Showcase Pro child theme root directory. If it's in another directory below the root, like css perhaps, you call it as add_editor_style('css/editor-style.css').

It's also important to note that you will not see the style sheet loaded in the header. The styles are being applied directly through the settings in tinyMCEPreInit.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Bart van Maanen]

Thanks Victor.

I have not tested your suggestion yet, but when I was using the Parallax theme I needed, or seem to be needing, the add_action / function code to get the Google fonts into the Visual Editor.

Also these themes differ in code as the one uses pixels for sizes and the other uses rem's (Showcase).

I've tried several ways now, and in one case the size of headings responded correctly, as did the added Genesis content-box css, but the standard editor font was still used.

My editor-style.css is in the root of the theme, by the way.

[Victor Font]

Pixels vs rems should make no difference for style sheet loading. Both em and rem are flexible, scalable units that are translated by the browser into pixel values, depending on the font size settings in your design.

Also, it may work better if you load the fonts locally: http://localfont.com/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts