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.

As has been pointed out in multiple posts here there are some big problems with tinyMCE 4 formatting for WP 3.9 - this code comes very close:

TinyMCE: adding CSS to format dropdown

But there are problems - here are the ones that I have discovered:

  • 'color' does not work (as I pointed out at the bottom of the question)
  • 'block' =>'p' - does not work on its own, but it will if you add a class with 'classes'
  • 'lineHeight' - does not work
  • There seems to be no way to control the font size and type in the dropdowns

Has anyone been able to come up with a solution to any of these?

share|improve this question

1 Answer 1

You can control the font size and type in the format dropdown by adding an editor style.

WPSE user helgatheviking explained how to add styles to the format dropdown in her post here. I've included the relevant code below with one minor adjustment which allows CSS attributes like color and line-height to be inherited by the dropdown items as well.

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

    //This allows color styles to be inherited from the editor styelsheet.
    unset($init['preview_styles']);

    $style_formats = array (
        array( 'title' => 'Bold text', 'inline' => 'b' ),
        array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),
        array( 'title' => 'Red header', 'block' => 'h1', 'styles' => array( 'color' => '#ff0000' ) ),
        array( 'title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1' ),
        array( 'title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2' )
    );

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

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );
share|improve this answer

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.