I read several tutorials on adding custom styles to the WYSIWYG editor (TinyMCE). None of them seem to work in the latest versions of Wordpress. I am using v3.3.2. codex instructions work, but in a limited way ...

NOTE. To be 100% clear, I'm trying to add a Styles drop-down list that the author can use to apply my custom styles to text. (Please do not confuse my question with how to style the editor yourself using editor-style.css ...)

I managed to get the code to work, but only using the commented line in my_mce_before_init(). The problem with this version is that it adds a class with a common <span>. I am trying to use a more powerful version of the code (as shown below), but something is wrong. A pop-up style sheet will appear, but it is empty. If I click on it, the first element says “Styles”, but does nothing. I suspect something happened to my array. Hopefully someone more knowledgeable than me can set me straight.

Here is the relevant code in my functions.php topic ...

This is how I add a button:

// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

This is how I add styles (it works when I uncomment):

//Define the actual styles that will be in the box
function my_mce_before_init($init_array)
{
    // add classes using a ; separated values
    //$init_array['theme_advanced_styles'] = "Section Head=section-head;Sub Section Head=sub-section-head";

    $temp_array['theme_advanced_styles'] = array(
        array(
            'title' => 'Section Head',
            'block' => 'h3',
            'classes' => 'section-head'
        ),
        array(
            'title' => 'Sub Section Head',
            'block' => 'h4',
            'classes' => 'sub-section-head'
        )       
    );

    $styles_array = json_encode( $temp_array['theme_advanced_styles'] );

            //  THIS IS THE PROBLEM !!!! READ BELOW
    $init_array['theme_advanced_styles'] = $styles_array;

    return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

: (. ). , , theme_advanced_styles - . style_formats , . , .