Add TinyMCE custom classes to WordPress with backwards compatibility

add_tinymce_custom_classes_with_backwards_compatibility.php

<?php
Sometimes we want to give clients access to additional styles in TinyMCE. These functions also handle backwards compatibility with WordPress as TinyMCE 3 and TinyMCE 4 handle this differently
 
function sennza_mce_buttons( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
add_filter( 'mce_buttons_2', 'sennza_mce_buttons' );

function sennza_mce_before_init( $init_array ) {
	
	// Add back some more of styles we want to see in TinyMCE
	$init_array['preview_styles'] = "font-family font-size font-weight font-style text-decoration text-transform color background-color padding";

	if ( version_compare( $GLOBALS['wp_version'], '3.8', '<' ) ) {
		$init_array['theme_advanced_styles'] = "Edge Green=edge-green;Green Button=button radius;One Half Column=small-6 columns;One Third Column=small-12 medium-4 columns;One Quarter Column=small-6 medium-3 columns";
	} else {
		$style_formats = array(
			// Each array child is a format with it's own settings
			array(
				'title'   => 'Edge Green',
				'inline'  => 'span',
				'classes' => 'edge-green',
				'styles' => array(
					'color' => "#f00",
					'backgroundColor' => "#000",
					'padding' => "10px"
				),
			),
			array(
				'title'   => 'Green Button',
				'inline'  => 'span',
				'classes' => 'button radius',
			),
			array(
				'title'    => 'One Half Column',
				'wrapper'  => true,
				'block'    => 'div',
				'classes'  => 'small-6 columns',
			),
			array(
				'title'   => 'One Third Columns',
				'wrapper'  => true,
				'block'    => 'div',
				'classes' => 'small-12 medium-4 columns',
			),
			array(
				'title'    => 'One Quarter Column',
				'wrapper'  => true,
				'block'    => 'div',
				'classes'  => 'small-6 medium-3 columns',
			),
		);
		// Insert the array, json encoded, into 'style_formats'
		$init_array['style_formats'] = json_encode( $style_formats );
	}

	return $init_array;
}

add_filter( 'tiny_mce_before_init', 'sennza_mce_before_init' );