Add Table Button on WordPress TinyMCE Editor: A Beginner Guide

WordPress tinymce editor has not added table button on toolbar, which make it is hard to insert table when writing. In this tutorial, we will introduce you how to add a table button to create tables when writing withou downloading any wordpress plugins.

Find wordpress tinymce editor plugins folder

We recommond you use wordpress file manager plugin to view and check, we will upload tinymce table plugin file.

We find this path is: wp-includes/js/tinymce/plugins

Check tinymce verison

It is very important, which can tell us to download what version of tinymce table plugin.

Open tinymce.min.js

You will find the version of wordpress tinymce editor is 4.9.2.

Remember this version number: 4.9.2

Download tinymce table plugin 4.9.2

Open url: https://www.tiny.cloud/get-tiny/self-hosted/

Then download 4.9.2 tinymce and you can get a file called tinymce_4.9.2.zip

Open tinymce_4.9.2.zip and find table plugin folder

This table folder is in plugins folder.

Upload table folder to wordpress

You can upload this table folder which contains file: plugin.min.js to path: wp-includes/js/tinymce/plugins/ with wordpress file manager plugin.

Then you can open your wordpress theme functions.php file.

Add code below to functions.php

function add_the_table_button( $buttons ) {
   array_push( $buttons, 'separator', 'table' );
   return $buttons;
}
add_filter( 'mce_buttons', 'add_the_table_button' );

function add_the_table_plugin( $plugins ) {
    $plugins['table'] = 'https://www.tutorialexample.com/wp-includes/js/tinymce/plugins/table/plugin.min.js';
    return $plugins;
}
add_filter( 'mce_external_plugins', 'add_the_table_plugin' );

Then you can add a table buttion on wordpress tinymce editor and can insert table very easily when writing.

Notice:

$plugins['table'] = 'https://www.tutorialexample.com/wp-includes/js/tinymce/plugins/table/plugin.min.js';

This code is very important, the value of $plugins[‘table’] is the url of tinymce table plugin js file, which is uploaded by you.

The effect is:

Add Table Button on WordPress TinyMCE Editor: A Beginner Guide – WordPress Tutorial