Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

In the past, by adding the editor stylesheet, I was able to see the options in both the Format and Styles drop-downs, as they would appear in the post. That is, the entry in the menu would be styled according the the CSS rules that were placed in the editor stylesheet.

Strangely, this has stopped working on two sites that have both been updated to WP 3.6. I can still see the custom styles in the editor content window and the styles still apply to the post content - they just don't appear as styled options in the drop-down menu. What is even stranger, is that ONE of the custom rules I have defined DOES display in the drop-down with it's custom style applied.

The editor stylesheet is actually the entire front end stylesheet being added via the following and is obviously working because the styles work in the post content;

add_action( 'init', 'pds_add_editor_styles' );
function pds_add_editor_styles()
      {
            add_editor_style( 'library/css/style.css' );
      }

I'm adding the custom styles via the following;

add_filter( 'tiny_mce_before_init', 'pds_mod_tinymce_editor' );
function pds_mod_tinymce_editor( $init )
      {  
            $style_formats         = array(
                  array(
                        'title'    => '90% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-90-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '80% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-80-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '70% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-70-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '60% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-60-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '50% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-50-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'No space below',
                        'selector' => '*',
                        'classes'  => 'no-bottom-margin',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Double space below',
                        'selector' => '*',
                        'classes'  => 'double-bottom-margin',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Small Black',
                        'selector' => '*',
                        'classes'  => 'small-black',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Big',
                        'selector' => '*',
                        'classes'  => 'just-big',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Really Big',
                        'selector' => '*',
                        'classes'  => 'really-big',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Super Big',
                        'selector' => '*',
                        'classes'  => 'super-big',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'RightHeight',
                        'selector' => '*',
                        'classes'  => 'rightheight-font',
                        'wrapper'  => true
                  ),
            );
            $init['style_formats'] = json_encode( $style_formats );

            return $init;
      }

Format drop-down options not carrying styles

Custom styles drop-down only carrying styles for ONE custom style

On one of my other clients sites the styles work perfectly, as you can see below. This site hasn't yet been updated to 3.6.

enter image description here

I'm very confused by the situation and don't know what my next step is. I've tried adding only the relevant styles to their own stylesheet and loading that instead of the entire style.css file, but that doesn't work, either. Clearing my cache has no effect.

If anyone can offer a little insight, I'd greatly appreciate it.

Cheers

share|improve this question

1 Answer 1

up vote 1 down vote accepted

Ok, this was driving me nuts too as it seems to be completely undocumented However, fear not for it is surprisingly easy to fix! :D

In your tiny_mce_before_init hook function right before the return statement simply add the line:

unset($init['preview_styles']);

This will make wordpress function as it did before the 3.6 update (the updated added a line in wp-includes/class-wp-editor.php [#347] which changed the default behavior.)

From what I can tell, this setting limits the css properties that will be previewed in the styles drop-down menu. As of 3.6 it is set to 'font-family font-weight text-decoration text-transform' by default. Thus causing properties like: color, size, line-height, etc. to not render.

I know it's a bit late, but hopefully this will help in the future since, as of 3.6.1, this is still the default behavior.

share|improve this answer
    
You are amazing, @Kara. I had all but given up on this in favour of focusing on other things. Thanks very much for sharing - it probably just saved me hours of trawling through the TinyMCE config settings. –  Phil Oct 7 '13 at 0:12
    
This still works in 3.9! Thanks so much. –  Dalton Jul 8 at 14:22
    
According to the TinyMCE demo you can add the styles directly in the custom_formats object. However, I have yet to be able to get this to work via WordPress' PHP filter, so this seems like the next best option. –  helgatheviking Jul 8 at 17:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.