User-Friendly Styled Content in the WordPress Editor

functions.php

<?php

/*
 *  Add "Formats" dropdown to TinyMCE Editor
 */
function matt2015_mce_formats($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'matt2015_mce_formats');


/*
 *  Callback function to filter the MCE settings
 */
function matt2015_mce_before_init_insert_formats( $init_array ) {  
	// Define the style_formats array
	$style_formats = array(  
		// Each array child is a format with it's own settings
		// available element types: inline, block, selector, classes, styles, attributes, exact, wrapper
		// see here: http://codex.wordpress.org/TinyMCE_Custom_Styles#Using_style_formats
		array(  
			'title' => 'Enhancement Block',  
			'block' => 'div',  
			'classes' => array('enhancement', 'feature-block'),
			'wrapper' => true,
		),  
		array(  
			'title' => 'Enhancement Title',  
			'block' => 'h3',  
			'classes' => 'enhance-title',
			'wrapper' => false,
		),
		array(  
			'title' => 'Addition Block',  
			'block' => 'div',  
			'classes' => array('addition', 'feature-block'),
			'wrapper' => true,
		),  
		array(  
			'title' => 'Addition Title',  
			'block' => 'h3',  
			'classes' => 'addition-title',
			'wrapper' => false,
		),
		array(  
			'title' => 'Where to Find it Title',  
			'block' => 'h3',  
			'classes' => 'where-title',
			'wrapper' => false,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'matt2015_mce_before_init_insert_formats' ); 


/*
 *  Add Typography Styles to Editor
 */
function matt2015_add_editor_styles() {
	// Only add the style if it's a post edit screen
	// is_edit_page() is defined below
	if (is_edit_page()){
		add_editor_style( MATTC_URL . 'css/typography.css' );
	}
}
add_action( 'admin_init', 'matt2015_add_editor_styles' );


/*  Enqueue the same style to the frontend
 *  This ensures that the changes you make 
 *  to this CSS file are reflected in both the
 *  backend and frontend
 */
function matt2015_typography_scripts() {
	wp_enqueue_style( 'matt2015-typography', MATTC_URL . 'css/typography.css' );
}
add_action( 'wp_enqueue_scripts', 'matt2015_typography_scripts' );


/*  Function to conditionally check whether
 *  we are on a new post or post edit page
 *  Hat tip to Bainternet:
 *  http://wordpress.stackexchange.com/questions/50043/how-to-determine-whether-we-are-in-add-new-page-post-cpt-or-in-edit-page-post-cp
 */
function is_edit_page($new_edit = null){
	global $pagenow;
	// make sure we are on the backend
	if (!is_admin()) return false;

	if($new_edit == "edit") //check for edit existing page
        	return in_array( $pagenow, array( 'post.php',  ) );
    	elseif($new_edit == "new") //check for new post page
        	return in_array( $pagenow, array( 'post-new.php' ) );
    	else //check for either new or edit
        	return in_array( $pagenow, array( 'post.php', 'post-new.php' ) );
}