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

By | November 12, 2019

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.

wordpress tinymce plugin folder

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

open tinymce

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

wordpress tinymce version

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

download tinymce 4.9.2

 

Open tinymce_4.9.2.zip and find table plugin folder

tinymce table plugin

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.

upload tinymce table plugin to wordpress

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 on wordpress tinymce

Leave a Reply

Your email address will not be published. Required fields are marked *