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 );
}

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:

This is how the TinyMCE Advanced plugin setup looks like:

Read more in English: wp.tutsplus.com