The path to the CSS file tinymce.min.css
was incorrect. The solution was to change:
$url .= trailingslashit( plugin_dir_url(get_stylesheet_directory_uri()) ) . '/tinymce.min.css';
to:
$StyleUrl = get_stylesheet_directory_uri().'/style-sheets/tinymce.min.css';
I also had to change:
$StyleUrl = plugin_dir_url(get_stylesheet_directory_uri()).'tinymce.min.css';
to:
$StyleUrl = get_stylesheet_directory_uri().'/style-sheets/tinymce.min.css';
Now all I had to do was to remove the styles array so the complete code is:
// Apply styles to the visual editor
add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {
if ( !empty($url) )
$url .= ',';
// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'style-sheets/tinymce.min.css';
return $url;
}
// Add "Styles" drop-down
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );
function tuts_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Add styles/classes to the "Styles" drop-down
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );
function tuts_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Emphasis box',
'block' => 'p',
'classes' => 'emphasis-box'
),
array(
'title' => 'Alert box blue',
'block' => 'section',
'classes' => 'alertbox blue',
'wrapper' => true
),
array(
'title' => 'Alert box yellow',
'block' => 'section',
'classes' => 'alertbox yellow',
'wrapper' => true
),
array(
'title' => 'Alert box red',
'block' => 'section',
'classes' => 'alertbox red',
'wrapper' => true
),
array(
'title' => 'Alert box green',
'block' => 'section',
'classes' => 'alertbox green',
'wrapper' => true
),
array(
'title' => 'Alert box pink',
'block' => 'section',
'classes' => 'alertbox pink',
'wrapper' => true
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
// Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats
// Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');
// Enqueue stylesheet, if it exists.
function tuts_mcekit_editor_enqueue() {
$StyleUrl = get_stylesheet_directory_uri().'/style-sheets/tinymce.min.css'; // Customstyle.css is relative to the current file
wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}