How to Add a Dropdown List to Change Line-Height in WordPress Classic Editor

Are you looking to customize your WordPress Classic Editor to give it more functionality? One way to enhance your editor is by adding a dropdown list that allows users to change the line-height of their text. In this blog post, we’ll walk you through the steps to create this feature using TinyMCE, the rich text editor that powers the WordPress Classic Editor.

Why Customize Line-Height?

Line-height is a critical aspect of web design and readability. Adjusting the line-height can make your content more accessible and visually appealing. By adding a line-height option to your editor, you provide your users with an easy way to improve the presentation of their text.

Step-by-Step Guide to Adding a Line-Height Dropdown

Step 1: Enqueue a Custom JavaScript File

First, you need to load a custom JavaScript file in your WordPress admin area. This file will contain the code necessary to add the line-height dropdown to the editor.

Add the following code to your theme’s functions.php file:

function custom_tinymce_enqueue_scripts($hook) {
    if ($hook !== 'post.php' && $hook !== 'post-new.php') {
        return;
    }
    wp_enqueue_script('custom-tinymce-js', get_template_directory_uri() . '/js/custom-tinymce.js', array('jquery'), '1.0', true);
}
add_action('admin_enqueue_scripts', 'custom_tinymce_enqueue_scripts');

This code checks if you are on the post editor screen and then enqueues the custom JavaScript file.

Step 2: Create the Custom JavaScript File

Next, create a JavaScript file named custom-tinymce.js in your theme’s js directory with the following content:

(function() {
    tinymce.create('tinymce.plugins.CustomLineHeight', {
        init : function(ed, url) {
            ed.addButton('lineheight', {
                type: 'menubutton',
                text: 'Line Height',
                icon: false,
                menu: [
                    {text: '1.0', onclick: function() { setLineHeight(ed, '1.0'); }},
                    {text: '1.5', onclick: function() { setLineHeight(ed, '1.5'); }},
                    {text: '2.0', onclick: function() { setLineHeight(ed, '2.0'); }},
                    {text: '2.5', onclick: function() { setLineHeight(ed, '2.5'); }},
                    {text: '3.0', onclick: function() { setLineHeight(ed, '3.0'); }}
                ]
            });
        },
        createControl : function(n, cm) {
            return null;
        }
    });

    tinymce.PluginManager.add('custom_lineheight_plugin', tinymce.plugins.CustomLineHeight);

    function setLineHeight(ed, value) {
        ed.formatter.register('lineheight', {
            inline: 'span',
            styles: { lineHeight: value }
        });
        ed.formatter.apply('lineheight');
    }
})();

jQuery(document).ready(function($) {
    if (typeof tinymce !== 'undefined') {
        tinymce.init({
            selector: '#content',
            plugins: 'custom_lineheight_plugin',
            toolbar: 'lineheight'
        });
    }
});

This script creates a new TinyMCE plugin that adds a dropdown menu to the editor toolbar. When a user selects a line-height value from the dropdown, it applies that value to the selected text.

Step 3: Register the Custom TinyMCE Plugin

Finally, you need to register your custom TinyMCE plugin and add the line-height button to the toolbar. Add the following code to your functions.php file:

function add_custom_tinymce_plugin($plugins) {
    $plugins['custom_lineheight_plugin'] = get_template_directory_uri() . '/js/custom-tinymce.js';
    return $plugins;
}
add_filter('mce_external_plugins', 'add_custom_tinymce_plugin');

function add_custom_tinymce_button($buttons) {
    array_push($buttons, 'lineheight');
    return $buttons;
}
add_filter('mce_buttons', 'add_custom_tinymce_button');

This code tells WordPress to load your custom plugin and adds the line-height button to the TinyMCE toolbar.

Conclusion

By following these steps, you can enhance the WordPress Classic Editor with a custom dropdown for adjusting line-height. This small but powerful customization can greatly improve the readability and visual appeal of your content. Give it a try and see how it transforms your editing experience!