<?php
// Add custom button for styles
function customStylesButton($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'customStylesButton');

//Add custom styles to the WordPress editor
function my_custom_styles( $init_array ) {

    $style_formats = array(
        // These are the custom styles
        array(
            'title' => 'Hero - H1',
            'block' => 'h1',
			'styles' => array(
				'fontWeight' => 'bold',
				'marginBottom' => '0',
			)
        ),
		array(
            'title' => 'Hero - H3',
            'block' => 'h3',
			'styles' => array(
				'marginTop' => '0',
				'fontWeight' => 'lighter',
			)
        ),
		array(
            'title' => 'Form - H1',
            'block' => 'h1',
			'styles' => array(
				'fontSize' => '40px',
				'margin' => '0',
				'color' => '#2a628e',
			)
        ),
		array(
            'title' => 'Form - H3',
            'block' => 'h3',
			'styles' => array(
				'fontSize' => '18px',
				'margin' => '0',
				'color' => '#7a7774',
				'fontWeight' => 'lighter',
			)
        ),
		array(
            'title' => 'Form - Paragraph',
            'block' => 'p',
			'styles' => array(
				'fontWeight' => 'lighter',
			)
        ),
		array(
            'title' => 'Boxes Area',
            'block' => 'h4',
			'styles' => array(
				'fontSize' => '21px',
				'fontWeight' => 'lighter',
				'color' => '#2a628e',
			)
        ),
		array(
            'title' => 'Second Image Area',
            'block' => 'span',
			'classes' => 'thirdText',
        ),
		array(
            'title' => 'Orange Button',
            'block' => 'span',
			'classes' => 'orangeButton',
			'styles' => array(
				'color' => '#fff',
				'background' => '#e59c0f',
				'textDecoration' => 'none',
			)
        ),
    );
    // 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', 'my_custom_styles' );

?>