[Ronald]

I have created a gradulicious pro child theme. I am using the TinyMCE advanced editor.
How can I see my style customizations also in the editor? Without having to add my styles to two files: the child theme style.css and the tinymce editor-styles.css?
I have tried by importing the styles.css into editor-styles using the @import css statement but this does not work.
What is the best way to do this?

Ronald

[Mahesh]

@rvaalten: Have you checked Create CSS classes menu option in Editor Settings? If its disabled, add the following code in your child theme’s functions.php file and then check the option and see if this resolves the issue.
add_theme_support('editor-style');

Regards,
Mahesh

[Ronald]

Ok, I did.
But no difference. If I add a style to editor-style.css the style is shown in the editor but not in the frontend. If I add this style in style.css in my child theme, the style is visible in the frontend but not in the editor…
What can I do next?
Ronald

[Mahesh]

@rvaalten: Seems you need to enqueue editor-style.css in the child theme. Please add the following code in you child theme’s functions.php

function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

Regards,
Mahesh

[Ronald]

Hi Mahesh,

Unfortunately it still does not work. By adding this function, if I understand correctly, css added to editor-style.css should also be available to the frontend? It doesn’t.
The editor-style.css is in the parent theme css folder, not in the child theme’s folder. Is this relevant?

Strange that this is not a standard feature of a PRO theme. Having a wysiwyg editor seams to me a common feature!

Regards, Ronald

[Mahesh]

@rvaalten: I tested the same with the plugin on our server and the style did show up in both editor and the frontend. Please contact the plugin support.

Regards,
Mahesh

[Ronald]

Which plugin do you use on your server?
Ronald

[Mahesh]

@rvaalten: I used the following plugin.
https://wordpress.org/plugins/tinymce-advanced/

Regards,
Mahesh

[Ronald]

HI Mahesh, I use the same plugin: tinymce-advanced.
Strange that this does not work on my site.

Here’s functions.php in my child theme:

/**
 * Loading Parent theme stylesheet
 *
 */
add_action( 'wp_enqueue_scripts', 'gridalicious_child_enqueue_styles' );

function gridalicious_child_enqueue_styles() {
    wp_enqueue_style( 'gridalicious-parent-style', get_template_directory_uri() . '/style.css' );
}

add_theme_support('editor-style');

function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

[Mahesh]

@rvaalten: I haven’t even put any additional codes in the child theme and the plugin is working fine. Style is being displayed in both editor and frontend.

Regards,
Mahesh

[Author]

Posts