Adding Custom Styles to the MCE dropdown toolbar

I am using the following code to add style drop downs the mce toolbar, I want to be able to add a h1 element with the drop down but my code isnt working, I have tried a couple of different ways but it doesnt work, I got this code form here

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
//mce custom classes
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Button',
            'selector' => 'h1',
            'classes' => 'button'
        ),
        array(
            'title' => 'h1',
            'block' => 'h1',
            'classes' => 'superHead',
            'wrapper' => true
        ),
        array(
            'title' => 'Bold Brown',
            'inline' => 'span',
            'styles' => array(
                'color' => '#481e07',
                'fontWeight' => 'bold'
            )
        ),
        array(
            'title' => 'Header',
            'inline' => 'span',
            'styles' => array(
                'font-size' => '24px'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

//mse custome classes
add_action( 'admin_init', 'add_my_editor_style' );

function add_my_editor_style() {
    add_editor_style();
}

Based on the tutorial you are missing the whole first step:

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}