How to Create a Custom Styles Dropdown in TinyMCE

Created with:

Visibility:

public

August 22, 2023

Are you tired of the limited options in the default styles dropdown menu in TinyMCE? If you want to have more control over the styles available in the editor and create a custom dropdown with your own styles, you’ve come to the right place. In this article, we’ll guide you through the process of creating a custom styles dropdown in TinyMCE, allowing you to easily apply your own custom styles to your content. So let’s dive in and give your TinyMCE editor a personal touch!

					function wpturbo_add_custom_styles_dropdown($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'wpturbo_add_custom_styles_dropdown');

function wpturbo_add_custom_styles($settings) {
    $style_formats = array(
        array(
            'title' => 'Custom Style 1',
            'selector' => 'p',
            'classes' => 'custom-style-1',
            'wrapper' => false
        ),
        array(
            'title' => 'Custom Style 2',
            'selector' => 'span',
            'classes' => 'custom-style-2',
            'wrapper' => false
        ),
    );
    
    $settings['style_formats'] = json_encode($style_formats);
    
    return $settings;
}
add_filter('tiny_mce_before_init', 'wpturbo_add_custom_styles');

The code snippet provided helps in adding a custom styles dropdown in the TinyMCE editor in WordPress. This feature allows users to apply predefined styles to their content.

Let’s break down the code step by step:

The first function, wpturbo_add_custom_styles_dropdown(), is responsible for adding the ‘styleselect’ button to the TinyMCE toolbar. The ‘styleselect’ button is what enables the dropdown menu for selecting custom styles. The function array_unshift() is used to insert the ‘styleselect’ button at the beginning of the $buttons array, ensuring it appears as the first button on the toolbar. Finally, the modified $buttons array is returned.
```
function wpturbo_add_custom_styles_dropdown($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wpturbo_add_custom_styles_dropdown');
```
The second function, wpturbo_add_custom_styles(), is responsible for defining the custom styles that will appear in the dropdown menu. In this example, we are adding two custom styles: ‘Custom Style 1’ and ‘Custom Style 2’. Each style is defined as an element in the $style_formats array. The elements of $style_formats array consist of the following properties:
- title: The name or label for the style.
- selector: The HTML element to which the style will be applied. In this case, ‘p’ refers to <p> tags and ‘span’ refers to <span> tags.
- classes: The CSS class(es) that will be applied to the selected element.
- wrapper: Whether the style should be applied as a wrapper class or not. In this case, we set it to false to apply the style directly to the element.

After defining the custom styles, the $style_formats array is encoded into JSON format using json_encode() and assigned to the style_formats property of the $settings array. Finally, the modified $settings array is returned.

function wpturbo_add_custom_styles($settings) {
    $style_formats = array(
        array(
            'title' => 'Custom Style 1',
            'selector' => 'p',
            'classes' => 'custom-style-1',
            'wrapper' => false
        ),
        array(
            'title' => 'Custom Style 2',
            'selector' => 'span',
            'classes' => 'custom-style-2',
            'wrapper' => false
        ),
    );

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

    return $settings;
}
add_filter('tiny_mce_before_init', 'wpturbo_add_custom_styles');

That’s it! After adding these functions to your theme’s functions.php file or a custom plugin, you will see a new dropdown menu in the TinyMCE editor, allowing you to apply the defined custom styles to your content.

How to Create a Custom Styles Dropdown in TinyMCE

Add Snippet To Project