{"id":14570,"date":"2026-01-17T09:41:35","date_gmt":"2026-01-17T09:41:35","guid":{"rendered":"https:\/\/www.copebusiness.com\/?p=14570"},"modified":"2026-02-07T10:01:21","modified_gmt":"2026-02-07T10:01:21","slug":"create-wordpress-tinymce-plugin","status":"publish","type":"post","link":"https:\/\/www.copebusiness.com\/fr\/wordpress\/creer-motpress-tinymce-plugin\/","title":{"rendered":"How to Create a WordPress TinyMCE Plugin: Step-by-Step Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Wordpress TinyMCE Plugin is the default visual editor, powering the block editor&#8217;s text components. Creating a custom TinyMCE plugin allows you to extend its functionality \u2014 like adding a button to insert styled links, shortcodes, or custom elements \u2014 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 <a href=\"https:\/\/www.copebusiness.com\/technical-seo-services\/technical-seo-audit-service\/\" data-type=\"link\" data-id=\"https:\/\/www.copebusiness.com\/technical-seo-services\/technical-seo-audit-service\/\" target=\"_blank\" rel=\"noreferrer noopener\">technical SEO audit services<\/a> to enhance content creation and optimize site performance.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">On this page<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0a0a0a;color:#0a0a0a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0a0a0a;color:#0a0a0a\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.copebusiness.com\/fr\/wordpress\/creer-motpress-tinymce-plugin\/#Requirements_Before_Starting\" >Requirements Before Starting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.copebusiness.com\/fr\/wordpress\/creer-motpress-tinymce-plugin\/#Step-by-Step_Creating_Your_TinyMCE_Plugin\" >Step-by-Step: Creating Your TinyMCE Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.copebusiness.com\/fr\/wordpress\/creer-motpress-tinymce-plugin\/#Best_Practices_for_Custom_TinyMCE_Plugins\" >Best Practices for Custom TinyMCE Plugins<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.copebusiness.com\/fr\/wordpress\/creer-motpress-tinymce-plugin\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;s aimed at users with basic PHP and JavaScript knowledge \u2014 always test on a staging site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Requirements_Before_Starting\"><\/span>Requirements Before Starting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A local or staging WordPress site (avoid live sites without backups).<\/li>\n\n\n\n<li>Basic coding skills (PHP, JavaScript).<\/li>\n\n\n\n<li>A code editor like VS Code.<\/li>\n\n\n\n<li>Optional: Knowledge of the classic editor (TinyMCE is still used in blocks).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re a beginner, consider using existing plugins like TinyMCE Advanced for similar features without coding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step-by-Step_Creating_Your_TinyMCE_Plugin\"><\/span>Step-by-Step: Creating Your TinyMCE Plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;ll create a plugin that adds a &#8220;Insert Button Link&#8221; toolbar button. When clicked, it prompts for a URL and wraps selected text in an tag with class=&#8221;button&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create the Plugin Folder and Main File<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In your WordPress directory, go to \/wp-content\/plugins\/.<\/li>\n\n\n\n<li>Create a new folder: tinymce-custom-link-class.<\/li>\n\n\n\n<li>Inside, create tinymce-custom-link-class.php.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add the Plugin Header<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open tinymce-custom-link-class.php and add:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>\/**<\/em>\n<em> * Plugin Name: TinyMCE Custom Link Class<\/em>\n<em> * Plugin URI: https:\/\/www.copebusiness.com<\/em>\n<em> * Version: 1.0<\/em>\n<em> * Author: Cope Business<\/em>\n<em> * Author URI: https:\/\/www.copebusiness.com<\/em>\n<em> * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor<\/em>\n<em> * License: GPL2<\/em>\n<em> *\/<\/em><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Set Up the Plugin Class<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add this code:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class TinyMCE_Custom_Link_Class {\n    \n    function __construct() {\n        \n    }\n}\n\n$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Hook into the Init Action (Admin Only)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Inside __construct():<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ( is_admin() ) {\n    add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Define the setup_tinymce_plugin Function<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This checks permissions and registers filters:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function setup_tinymce_plugin() {\n    if ( ! current_user_can( 'edit_posts' ) &amp;&amp; ! current_user_can( 'edit_pages' ) ) {\n        return;\n    }\n    if ( get_user_option( 'rich_editing' ) !== 'true' ) {\n        return;\n    }\n    add_filter( 'mce_external_plugins', array( $this, 'add_tinymce_plugin' ) );\n    add_filter( 'mce_buttons', array( $this, 'add_tinymce_toolbar_button' ) );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Register the JavaScript Plugin File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function add_tinymce_plugin( $plugin_array ) {\n    $plugin_array&#91;'custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';\n    return $plugin_array;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7: Add the Button to the Toolbar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function add_tinymce_toolbar_button( $buttons ) {\n    array_push( $buttons, '|', 'custom_link_class' );\n    return $buttons;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 8: Create the JavaScript File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the plugin folder, create tinymce-custom-link-class.js:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function() {\n    tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {\n        editor.addButton('custom_link_class', {\n            title: 'Insert Button Link',\n            cmd: 'custom_link_class',\n            image: url + '\/icon.png'<em> \/\/ Add an icon.png file to the folder<\/em>\n        });\n        editor.addCommand('custom_link_class', function() {\n            var text = editor.selection.getContent({ 'format': 'html' });\n            if ( text.length === 0 ) {\n                alert( 'Please select some text to link.' );\n                return;\n            }\n            var result = prompt('Enter the link');\n            if ( !result || result.length === 0 ) {\n                return;\n            }\n            editor.execCommand('mceReplaceContent', false, '&lt;a class=\"button\" href=\"' + result + '\"&gt;' + text + '&lt;\/a&gt;');\n        });\n    });\n})();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9: Add a Button Icon<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create or download a small icon.png (16x16px) and place it in the plugin folder. Use a simple link icon.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 10: Activate &amp; Test the Plugin<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Activate the plugin in <strong>Plugins<\/strong>.<\/li>\n\n\n\n<li>Edit a post\/page in the visual editor.<\/li>\n\n\n\n<li>Select text, click the new button in the toolbar, enter URL \u2014 it inserts a styled link.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Best_Practices_for_Custom_TinyMCE_Plugins\"><\/span>Best Practices for Custom TinyMCE Plugins<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Test Thoroughly<\/strong> \u2014 Check on multiple browsers and devices.<\/li>\n\n\n\n<li><strong>Security<\/strong> \u2014 Sanitize user inputs in JS\/PHP to prevent XSS.<\/li>\n\n\n\n<li><strong>Performance<\/strong> \u2014 Keep JS lightweight; minify if needed.<\/li>\n\n\n\n<li><strong>Updates<\/strong> \u2014 Monitor for WordPress core changes affecting TinyMCE.<\/li>\n\n\n\n<li><strong>Alternatives<\/strong> \u2014 For non-coders, use TinyMCE Advanced to extend without custom plugins.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Custom plugins like this give you full control over the editor \u2014 great for branded workflows.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span>Final Thoughts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This enhances productivity and user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Need help creating custom plugins, optimizing your editor, or improving overall site performance? <a href=\"https:\/\/www.copebusiness.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contact Cope Business<\/a> for a free technical SEO consultation \u2014 we\u2019ll build tailored solutions to elevate your WordPress site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wordpress TinyMCE Plugin is the default visual editor, powering the block editor&rsquo;s text components. Creating a custom TinyMCE plugin allows [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":14571,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[177],"tags":[],"class_list":["post-14570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/posts\/14570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/comments?post=14570"}],"version-history":[{"count":1,"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/posts\/14570\/revisions"}],"predecessor-version":[{"id":14572,"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/posts\/14570\/revisions\/14572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/media\/14571"}],"wp:attachment":[{"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/media?parent=14570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/categories?post=14570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copebusiness.com\/fr\/wp-json\/wp\/v2\/tags?post=14570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}