4

I want to give the backend-users only 4 text styles to choose from. Headline, Subheadline, Paragraph and a style we called .statement.

Searching for terms like "custom styles in TinyMCE" always ended up with this article from wordpress itself. https://codex.wordpress.org/TinyMCE_Custom_Styles

enter image description here

Unfortunately I don't want to give access to another dropdown. I need to strip the current dropdown of its content and populate it with my own styles.

In the first step I actually don't care about how they look both in the dropdown and in the visual-editor itself. The key here is to take away unnecessary styling options; options the design & frontend will not support. (Although it would be great to alter the looks inside the editor itself)

.

function my_mce_before_init_insert_formats( $init_array ) {

I looked at the $init_array and couldn't find where the dropdown is being created.

Thrilled for your suggestions :)

Louis!

7

I was having the same issue and here is what you can do. The code below disables the h1 tag from the block formats section. The same way you can disable other tags and also add your own. But I'm not sure about how to add custom CSS styles to them. Hope this code will give you a hint in which way to dig.

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre';
    return $initFormats;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_remove_unused_formats' );


Update:

The thing you are looking for was possible before Wordpress 3.9 had been released. Earlier you had to write those lines of code to make it possible. But unfortunately, theme_advanced_styles is deprecated since WP 3.9 updated the TinyMCE to version 4 (see the Change Log). More information on the Andrew Ozz blog.

This is how it was earlier (source):

function make_mce_awesome( $init ) {
    // deprecated settings
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
    $init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
    $init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');


Solution:

Anyway, I have my solution for your task. You can get rid of the default drop-down and add formats drop-down with four styles in it. This will help you to avoid confusions with the users, from what dropdowns they select styles.

Disable the default dropdown:

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( 'formatselect' );

    return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons', 'remove_default_format_select' );


Add new Formats dropdown (more here):

// Callback function to insert 'styleselect' into the $buttons array
function my_new_mce_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons', 'my_new_mce_buttons' );


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                'title' => 'Headline',
                'block' => 'h1'
                ),
            array(
                'title' => 'SubHeadline',
                'block' => 'h2'
                ),
            array(
                'title' => 'Statement',
                'block' => 'div',
                'classes' => 'statement_class',
                'wrapper' => true
            )
        );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );


The last one. Register the css file to get the visual look in your editor: (Learn more)

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );


Hope this helps.

5
  • That's what I was looking for, yeah! – But I also like to add classes to the blocks, which isn't possible in this way Paragraph=p.hyphenate;Heading 2=h2.someClass ... Nov 25 '17 at 13:33
  • Check out for the Update I made, maybe this will help you.
    – Vlad K.
    Nov 27 '17 at 4:48
  • Thank you very much for your efforts – This solution is close but still comes with caveats. 1) The new dropdown looks and behaves differenty; I like that the original dropdown indicates the current state of the block the caret is in. New dropdown only says "Format". 2) 'wrapper' => true makes the Statement a checkbox rather than a radio button (meaning Headline and Statement can be selected together) – nice to have this option, but not what I need in this case. Nov 27 '17 at 10:04
  • For those who are curious: "classes" => "class1 class2" results in <p class="class1 class2"> Nice! Nov 27 '17 at 10:08
  • @katerlouis this doesn't work for block element (h1 for example), does it? I succeed in adding a class to an inline element or a block element like div, but not on headings.
    – Sefran2
    Feb 27 '18 at 14:34
2

In case if you need to edit the block_formats dropdown, you can do this in that way:

add_filter('tiny_mce_before_init', function($init_array) {
    $block_formats = [
        'Paragraph=p',
        'Heading 1=h1',
        'Heading 2=h2',
        'Heading 3=h3',
    ];
    $init_array['block_formats'] = implode(';', $block_formats);

    return $init_array;
});

In case if you need to add some custom format, you can do this in that way:

add_filter('tiny_mce_before_init', function($init_array) {
    $init_array['formats'] = json_encode([
        // add new format to formats
        'h3marked' => [
            'selector' => 'h3',
            'block'    => 'h3',
            'classes'  => 'article-paragraph',
        ],
    ], JSON_THROW_ON_ERROR);

    $block_formats = [
        'Paragraph=p',
        'Heading 1=h1',
        'Heading 2=h2',
        'Heading 3=h3',
        'Heading 3 marked=h3marked',    // use the new format in select
        'Heading 4=h4',
        'Heading 5=h5',
        'Heading 6=h6',
        'Preformatted=pre',
    ];
    $init_array['block_formats'] = implode(';', $block_formats);

    return $init_array;
});

Inspired by this post and this tinymce docs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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