Якщо ви створюєте тему WordPress для сайту, який будуть наповнювати люди, які не знають HTML, ви можете для зручності роботи для них додати стилі користувача в візуального редактора TinyMCE.

У папці плагінів, без будь-яких піддиректорій створіть файл під назвою custom-style.php і покладіть у цей файл, наступний код:

/*
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(__ФАЙЛ__) ) . '/editor-styles.css';
    return $url;
}
/**
 * Add "Styles" drop-down
 */
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );
function tuts_mce_editor_buttons( $Кнопки ) {
    array_unshift( $Кнопки, 'styleselect' );
    повернення $buttons;
}
/**
 * Add styles/classes to the "Styles" drop-down
 */
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );
function tuts_mce_before_init( $налаштування ) {
    $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'
            )
        )
    );
    $налаштування['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(__ФАЙЛ__).'editor-styles.css'; // Customstyle.css is relative to the current file
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}

Після додавання коду активуйте плагін у вашій адмінці WordPress – у розділі плагіни. З редактора TinyMCE, можна буде змінювати стилі у меню Style.

ВАЖЛИВО! Часто використовую плагін TinyMCE Advanced, він допомагає додати нові кнопки до редактора, прибрати зайві кнопки та зробити найпростіші налаштування редактора TinyMCE. За допомогою цього плагіна можна включати список стилів, що випадає, який дозволить вибрати підключений нами раніше стилі.

Зовні плагін TinyMCE Advanced виглядає так:

Так виглядає налаштування плагіна TinyMCE Advanced:

Детальніше можна почитати англійською: wp.tutsplus.com