Add style dropdown to WordPress TinyMCE editor.

admin.php

<?php
/**
 * Admin functionality for Leaven.
 * @copyright 2016 Robin Cornett
 */

add_editor_style( 'editor-style.css' );

// Add Google fonts to editor
add_action( 'after_setup_theme', 'leaven_editor_fonts' );
function leaven_editor_fonts() {
	$font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700|Lora:400italic,700italic' );
	add_editor_style( $font_url );
}

// Adds the style dropdown to the top menu in the editor.
add_filter( 'mce_buttons', 'leaven_mce_editor_buttons' );
function leaven_mce_editor_buttons( $buttons ) {
	$buttons[] = 'styleselect';

	return $buttons;
}

// Adds the style dropdown to the second row of buttons in the editor.
//add_filter( 'mce_buttons_2', 'leaven_mce_editor_buttons_second' );
function leaven_mce_editor_buttons_second( $buttons ) {
	array_unshift( $buttons, 'styleselect' );

	return $buttons;
}

add_filter( 'tiny_mce_before_init', 'leaven_modify_mce_styles' );
function leaven_modify_mce_styles( $init_array ) {
	// Define the style_formats array
	$style_formats = array(
		array(
			'title'    => __( 'Button', 'leaven' ),
			'selector' => 'a',
			'classes'  => 'button',
		),
		array(
			'title'   => __( 'Notice', 'leaven' ),
			'block'   => 'div',
			'classes' => 'notice',
		),
		array(
			'title'    => __( 'Disclaimer', 'leaven' ),
			'selector' => 'p',
			'classes'  => 'disclaimer',
		),
	);
	$init_array['style_formats'] = wp_json_encode( $style_formats );

	return $init_array;
}

editor-style.css

body { background-color: #fff; color: #292c33; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.75; margin: 0; word-wrap: break-word; }

.mce-content-body { margin: 12px; background: #fff; }

.site-container { overflow-x: hidden; }

a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus, .button, .gallery img { -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }

::-moz-selection { background-color: #292c33; color: #fff; }

::selection { background-color: #292c33; color: #fff; }

a { color: #e0ac34; font-weight: 700; text-decoration: none; }

a:hover { color: #292c33; }

p { margin: 0 0 28px; padding: 0; }

ol, ul { margin: 0; padding: 0; }

li { list-style-type: none; }

b, strong { font-weight: 700; }

blockquote, cite, em, i { font-family: "Lora", Georgia, serif; font-size: 1.1em; font-style: italic; }

blockquote { margin: 40px; }

blockquote::before { content: "\201C"; display: block; font-size: 30px; height: 0; left: -20px; position: relative; top: -10px; }

h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; font-weight: 700; line-height: 1.2; margin: 0 0 10px; }

h1 { font-size: 2.5em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.1em; }

h4 { font-size: 18px; }

h5 { font-size: 0.9em; }

h6 { font-size: 0.76em; }

embed, iframe, img, object, video, .wp-caption { max-width: 100%; }

.gallery-caption, .wp-caption { margin: 0; }

img { height: auto; }

.featured-content img, .gallery img { width: auto; }

input, select, textarea { background-color: #fff; border: 1px solid #dddfe4; color: #292c33; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; padding: 16px; width: 100%; }

input:focus, textarea:focus { border: 1px solid #a5aab6; outline: none; }

input[type="search"] { border-radius: 0; -webkit-appearance: none !important; }

input[type="checkbox"], input[type="image"], input[type="radio"] { width: auto; }

::-moz-placeholder { color: #292c33; font-weight: 300; opacity: 1; }

::-webkit-input-placeholder { color: #292c33; font-weight: 300; }

button, input[type="button"], input[type="reset"], input[type="submit"], .button { background-color: #292c33; border: none; color: #fff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; cursor: pointer; padding: 16px 24px; text-transform: uppercase; width: auto; }

.button.wide { text-align: center; width: 100%; }

.footer-widgets button, .footer-widgets input[type="button"], .footer-widgets input[type="reset"], .footer-widgets input[type="submit"], .footer-widgets .button { background-color: #e0ac34; color: #fff; }

.footer-widgets button:hover, .footer-widgets input:hover[type="button"], .footer-widgets input:hover[type="reset"], .footer-widgets input:hover[type="submit"], .footer-widgets .button:hover { background-color: #fff; color: #292c33; }

button:hover, input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover { background-color: #de2f25; color: #fff; }

.entry-content .button:hover { color: #fff; }

.button { display: inline-block; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button { display: none; }

table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; width: 100%; }

tbody { border-bottom: 1px solid #a5aab6; }

td, th { text-align: left; }

td { border-top: 1px solid #a5aab6; padding: 6px 0; }

.gallery { overflow: hidden; }

.gallery img { border: 1px solid #dddfe4; height: auto; padding: 4px; }

.gallery img:hover { border: 1px solid #a5aab6; }

.gallery-item { float: left; margin: 0 0 28px; text-align: center; width: 50%; }

.aligncenter, .alignright, .alignleft, .centered, .alignright img, .alignleft img { display: block; margin: 0 auto 24px; }

a.alignleft, a.alignnone, a.alignright { max-width: 100%; }

a.aligncenter img { display: block; margin: 0 auto; }

a.alignnone { display: inline-block; }

.alignright .avatar { float: right; margin-left: 24px; }

.notice { border-left: 2px solid #de2f25; margin: 24px; padding: 24px; }

.disclaimer { font-family: "Lora", Georgia, serif; font-style: italic; font-size: 0.9em; }

.mce-content-body ol, .mce-content-body ul { margin-bottom: 28px; margin-left: 40px; }

.mce-content-body ol > li { list-style-type: decimal; }

.mce-content-body ul > li { list-style-type: disc; }

.mce-content-body ol ol, .mce-content-body ul ul { margin-bottom: 0; }

@media only screen and (min-width: 30em) {

 .gallery-columns-3 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-9 .gallery-item { width: 33%; }

 .gallery-columns-4 .gallery-item { width: 25%; }

 .alignleft { float: left; text-align: left; }

 .alignright { float: right; text-align: right; }

 img.alignnone, .alignnone { margin-bottom: 12px; }

 a.alignleft, img.alignleft, .wp-caption.alignleft { margin: 0 24px 24px 0; }

 a.alignright, img.alignright, .wp-caption.alignright { margin: 0 0 24px 24px; } }

@media only screen and (min-width: 50em) {

 .post-password-form { text-align: center; }

 .post-password-form input[type="password"] { width: 50%; }

 .gallery-columns-5 .gallery-item { width: 20%; }

 .gallery-columns-6 .gallery-item { width: 16.6666%; }

 .gallery-columns-7 .gallery-item { width: 14.2857%; }

 .gallery-columns-8 .gallery-item { width: 12.5%; }

 .gallery-columns-9 .gallery-item { width: 11.1111%; } }

functions.php

<?php

add_action( 'genesis_setup', 'leaven_setup', 15 );
function leaven_setup() {
  include_once( get_stylesheet_directory() . '/includes/admin.php' );
}