Adding Styles to WordPress TinyMCE Editor/ WYSIWYG Editor

This is a quick plugin from SpeckyGeek to add style options to your TinyMCE Editor for WordPress.

1. Open up your functions.php file within your theme in your favorite text editor.
2. Open up custom-styles.php
3. Copy and paste the code from custom-styles.php into functions.php and then modify to your hearts content.

Download the file at https://maxwellrowe.com/custom-styles.zip

Here it is in its entirety:

<?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( get_stylesheet_directory_uri() ) . ‘/editor.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’ => ‘Cambria 13’,
‘inline’ => ‘span’,
‘classes’ => ‘cambria’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘normal’,
‘font-family’ => ‘Cambria, serif’
)
),
array(
‘title’ => ‘Cambria 13 Bold Drk Gry’,
‘inline’ => ‘span’,
‘classes’ => ‘cambria’,
‘styles’ => array(
‘color’ => ‘#333’,
‘fontWeight’ => ‘bold’,
‘font-family’ => ‘Cambria, serif’
)
),
array(
‘title’ => ‘Helvetica Neue H1’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica34’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘normal’,
‘font-size’ => ’34px’,
‘line-height’ => ‘120%’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’,
‘margin-bottom’ => ‘1em’
)
),
array(
‘title’ => ‘Helvetica Neue Bold 15 Green’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica14bold’,
‘styles’ => array(
‘color’ => ‘#88b740’,
‘fontWeight’ => ‘bold’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’,
‘font-style’ => ‘italic’
)
),
array(
‘title’ => ‘Helvetica Neue Bold 15 BLK’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica14bold’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘bold’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’,
‘font-style’ => ‘italic’
)
),
array(
‘title’ => ‘Helvetica Small Drk Gry 13’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica13’,
‘styles’ => array(
‘color’ => ‘#333’,
‘fontWeight’ => ‘normal’,
‘font-size’ => ’13px’,
‘font-family’ => ‘Helvetica, sans-serif’
)
),
array(
‘title’ => ‘Courier’,
‘inline’ => ‘span’,
‘classes’ => ‘courier’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘normal’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Courier, monospace’
)
),
array(
‘title’ => ‘Default P’,
‘inline’ => ‘span’,
‘classes’ => ‘helvetica10’,
‘styles’ => array(
‘color’ => ‘#000’,
‘fontWeight’ => ‘400’,
‘font-size’ => ’15px’,
‘font-family’ => ‘Helvetica Neue, Helvetica, sans-serif’
)
)

);

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