How to Create a WordPress TinyMCE Plugin: Step-by-Step Guide

WordPress / By / February 7, 2026
How to Create a WordPress TinyMCE Plugin: Step-by-Step Guide

WordPress TinyMCE Plugin is the default visual editor, powering the block editor’s text components. Creating a custom TinyMCE plugin allows you to extend its functionality — like adding a button to insert styled links, shortcodes, or custom elements — without modifying core files. This is ideal for developers wanting to streamline workflows or add unique features. In 2026, with the block editor (Gutenberg) dominating, TinyMCE plugins remain relevant for classic-style editing or hybrid setups. At Cope Business, we build custom plugins like this for clients during our technical SEO audit services to enhance content creation and optimize site performance.

This tutorial walks you through creating a simple TinyMCE plugin that adds a custom button to insert a link with a specific CSS class (e.g., for buttons). It’s aimed at users with basic PHP and JavaScript knowledge — always test on a staging site.

Requirements Before Starting

  • A local or staging WordPress site (avoid live sites without backups).
  • Basic coding skills (PHP, JavaScript).
  • A code editor like VS Code.
  • Optional: Knowledge of the classic editor (TinyMCE is still used in blocks).

If you’re a beginner, consider using existing plugins like TinyMCE Advanced for similar features without coding.

Step-by-Step: Creating Your TinyMCE Plugin

We’ll create a plugin that adds a “Insert Button Link” toolbar button. When clicked, it prompts for a URL and wraps selected text in an tag with class=”button”.

Step 1: Create the Plugin Folder and Main File

  1. In your WordPress directory, go to /wp-content/plugins/.
  2. Create a new folder: tinymce-custom-link-class.
  3. Inside, create tinymce-custom-link-class.php.

Step 2: Add the Plugin Header

Open tinymce-custom-link-class.php and add:

PHP

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: https://www.copebusiness.com
 * Version: 1.0
 * Author: Cope Business
 * Author URI: https://www.copebusiness.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

Step 3: Set Up the Plugin Class

Add this code:

PHP

class TinyMCE_Custom_Link_Class {
    
    function __construct() {
        
    }
}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Step 4: Hook into the Init Action (Admin Only)

Inside __construct():

PHP

if ( is_admin() ) {
    add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}

Step 5: Define the setup_tinymce_plugin Function

This checks permissions and registers filters:

PHP

function setup_tinymce_plugin() {
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( get_user_option( 'rich_editing' ) !== 'true' ) {
        return;
    }
    add_filter( 'mce_external_plugins', array( $this, 'add_tinymce_plugin' ) );
    add_filter( 'mce_buttons', array( $this, 'add_tinymce_toolbar_button' ) );
}

Step 6: Register the JavaScript Plugin File

PHP

function add_tinymce_plugin( $plugin_array ) {
    $plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
    return $plugin_array;
}

Step 7: Add the Button to the Toolbar

PHP

function add_tinymce_toolbar_button( $buttons ) {
    array_push( $buttons, '|', 'custom_link_class' );
    return $buttons;
}

Step 8: Create the JavaScript File

In the plugin folder, create tinymce-custom-link-class.js:

JavaScript

(function() {
    tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
        editor.addButton('custom_link_class', {
            title: 'Insert Button Link',
            cmd: 'custom_link_class',
            image: url + '/icon.png' // Add an icon.png file to the folder
        });
        editor.addCommand('custom_link_class', function() {
            var text = editor.selection.getContent({ 'format': 'html' });
            if ( text.length === 0 ) {
                alert( 'Please select some text to link.' );
                return;
            }
            var result = prompt('Enter the link');
            if ( !result || result.length === 0 ) {
                return;
            }
            editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
        });
    });
})();

Step 9: Add a Button Icon

Create or download a small icon.png (16x16px) and place it in the plugin folder. Use a simple link icon.

Step 10: Activate & Test the Plugin

  1. Activate the plugin in Plugins.
  2. Edit a post/page in the visual editor.
  3. Select text, click the new button in the toolbar, enter URL — it inserts a styled link.

Best Practices for Custom TinyMCE Plugins

  • Test Thoroughly — Check on multiple browsers and devices.
  • Security — Sanitize user inputs in JS/PHP to prevent XSS.
  • Performance — Keep JS lightweight; minify if needed.
  • Updates — Monitor for WordPress core changes affecting TinyMCE.
  • Alternatives — For non-coders, use TinyMCE Advanced to extend without custom plugins.

Custom plugins like this give you full control over the editor — great for branded workflows.

Final Thoughts

Creating a WordPress TinyMCE plugin is a rewarding way to customize the editor and streamline content creation. Follow these steps for a simple button, or expand to more complex features.

This enhances productivity and user experience.

Need help creating custom plugins, optimizing your editor, or improving overall site performance? Contact Cope Business for a free technical SEO consultation — we’ll build tailored solutions to elevate your WordPress site.

Was this article helpful?
YesNo

Related Posts