Creating Custom Styles in the TinyMCE Dropdown Menu

by Nikolaenko Maxim · Published October 18, 2012 · Updated August 20, 2018

If you are creating a WordPress theme for a website, which will be filled by people who do not know HTML, you can add custom styles to them for the convenience of working with them. visual editor TinyMCE.

In the plugins folder, without any subdirectories create a file called custom-style.php and put in this file, following code:

/*
Plugin Name: Custom Styles
Plugin URI: https://www.speckygeek.com
Description: Add custom styles in your posts and pages content using TinyMCE WYSIWYG editor. The plugin adds a Styles dropdown menu in the visual post editor.
Based on TinyMCE Kit plug-in for WordPress
https://plugins.svn.wordpress.org/tinymce-advanced/branches/tinymce-kit/tinymce-kit.php
*/
/**
 * 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( plugin_dir_url(__FILE__) ) . '/editor-styles.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' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'Testimonial',
            'selector' => 'p',
            'classes' => 'testimonial',
        ),
        array(
            'title' => 'Warning Box',
            'block' => 'div',
            'classes' => 'warning box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#ff0000',
                'fontWeight' => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
/* Learn TinyMCE style format options at https://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 = plugin_dir_url(__FILE__).'editor-styles.css'; // Customstyle.css is relative to the current file
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}

Plugin Name: Custom Styles

Plugin URI: https://www.speckygeek.com

Description: Add custom styles in your posts and pages content using TinyMCE WYSIWYG editor. The plugin adds a Styles dropdown menu in the visual post editor.

Based on TinyMCE Kit plug-in for WordPress

https://plugins.svn.wordpress.org/tinymce-advanced/branches/tinymce-kit/tinymce-kit.php

/**

* 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( plugin_dir_url(__FILE__) ) . '/editor-styles.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' => 'Download Link',

'selector' => 'a',

'classes' => 'download'

array(

'title' => 'Testimonial',

'selector' => 'p',

'classes' => 'testimonial',

array(

'title' => 'Warning Box',

'block' => 'div',

'classes' => 'warning box',

'wrapper' => true

array(

'title' => 'Red Uppercase Text',

'inline' => 'span',

'styles' => array(

'color' => '#ff0000',

'fontWeight' => 'bold',

'textTransform' => 'uppercase'

)

);

$settings['style_formats'] = json_encode( $style_formats );

return $settings;

}

/* Learn TinyMCE style format options at https://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 = plugin_dir_url(__FILE__).'editor-styles.css'; // Customstyle.css is relative to the current file

wp_enqueue_style( 'myCustomStyles', $StyleUrl );

}

After adding the code, activate the plugin in your WordPress admin – in the plugins section. From the editor TinyMCE, it will be possible to change styles in the drop-down menu Style.

IMPORTANT! I often use the plugin TinyMCE Advanced, it helps to add new buttons to the editor, remove unnecessary buttons and make simple editor settings TinyMCE. With this plugin, you can enable a dropdown list of styles., which will allow you to select the previously connected styles.

Externally, the TinyMCE Advanced plugin looks like this: