How to Add a TinyMCE Table Button to WordPress

Hostinger Sale
How to Add a TinyMCE Table Button to WordPress

The post editor that ships with WordPress by default is called TinyMCE. It’s an external tool that allows people to compose their articles using a WYSIWYG style of editing. At the top of the editor is a series of buttons, each one of which serves a specific function. For example, you have one to bold the text, another to align it, and so on and so forth. Most WordPress bloggers will never need to move beyond the options that the TinyMCE editor presents. In fact, the full set of buttons is even hidden from the default user and it requires you to click the one that makes the other toolbars visible.

Having said that, there are times when you need to extend the functionality of TinyMCE. One of the most common requirements for additional functionality takes the form of a TinyMCE table button. By default, there is no inbuilt option to easily allow users to create tables of varying sizes. Writing the HTML for them manually can be painful and using external tools to copy and paste the code is an unnecessary headache. So if your site relies heavily on the display of tables, or if you just want that functionality available within the TinyMCE editor itself, then this article is for you!

TinyMCE Plugins

Each button on the TinyMCE editor that represents a specific function, is a separate plug-in. These plug-ins are included along with the core WordPress installation – meaning that they can be overwritten whenever WordPress updates itself. Each plug-in is a folder containing a single JavaScript file. These folders are located in:

wp-includes/js/tinymce/plugins/

It might seem obvious for us to simply add our own plug-ins to this folder. However, any good WordPress developer will tell you that messing around with core parts of WordPress is a terrible idea. Not out of fear that something will go wrong, but out of worry that your changes will simply be overwritten when WordPress updates. We need a more long-term solution – one that persists between different versions of WordPress.

Downloading TinyMCE Table Button

Unfortunately, the process for creating a new TinyMCE table button from scratch is far from simple. It’s written almost entirely in JavaScript and makes use of a complicated structure that takes time to understand, get used to, code, and debug.

Keeping this in mind, it’s a good idea to reuse plug-ins wherever you find them. Take the TinyMCE table plug-in for instance. Even though it’s not a default button within WordPress, the company that creates TinyMCE bundles it by default when deploying its code. Since it’s an open source project, this gives us the perfect opportunity to grab the table plug-in ourselves and plug it into WordPress. Visit the following site: https://www.tinymce.com/download/

Scroll down until you see the following section: “Download TinyMCE Community”.

download tinymce

This will initiate the download of one of the latest versions of TinyMCE. It’s not always easy to find the right download, but keep in mind that the most recent version of WordPress as of this writing,  uses TinyMCE version 4.0 and above. The earlier versions of TinyMCE used a completely different folder structure. Now it’s just a single JavaScript file for each plug-in. In the example above, I’m downloading version 4.4.1 – so I’m okay.

Once you’ve downloaded the archive, we need to find the “table” plug-in that’s bundled along with it. Extract the archive and navigate through the following table structure:

tinymce -> js -> -> tinymce -> plugins

get the table folder

This should bring up a huge list of folders, each of which is a separate plug-in. Scroll all the way down until you find the one labeled “table”. if you open it, you’ll see a single JavaScript file sitting inside. That’s the one we want.

Moving it over to the WordPress Installation

As mentioned earlier, we don’t want to simply add the plug-in along with all the others in WordPress, as they will simply get overwritten by the next update. You can place it anywhere else you want that’s accessible via a URL. Personally, I like to place custom content directly into the wp-content folder since it’s easily accessible via an inbuilt WordPress function and whatever we put that can’t be mistaken for a separate plug-in. Nevertheless, you can choose to place this within your plug-ins folder as well – as long as you know the URL where you can find it.

In the example below, I’ve created a new “tinymceplugins” folder inside wp-content. Inside that, I’ve uploaded the “table” folder that we found earlier inside the downloaded archive.

upload the table folder to wp-content

This is a nice place to put all future TinyMCE plugins if you feel the need for more. The function for accessing the wp-content folder is:

content_url()

So, we can locate the Javascript file of our table plugin using the following code:

content_url() . '/tinymceplugins/table/plugin.min.js';

Registering our Plugin with WordPress

Now that we’ve uploaded the TinyMCE plug-in and know where to find it, it’s time to integrate it with WordPress. This is done in two steps:

  1. Register the plugin
  2. Register the button

The first step is accomplished via the “mce_external_plugins” filter. For the TinyMCE table button, we use the “mce_buttons” filter. To put the two together, open up your functions.php file and insert the following code before the closing ?> PHP tag.

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'] = content_url() . '/tinymceplugins/table/plugin.min.js';
    return $plugins;
}
add_filter( 'mce_external_plugins', 'add_the_table_plugin' );

Note that this will work only if you follow the steps above exactly as described. Particularly the location of the “table” folder containing the JavaScript plug-in file. If you’ve placed it in a different location, then you need to change the following line in the second function:

$plugins['table'] = content_url() . '/tinymceplugins/table/plugin.min.js';

Make it point to where you placed the JavaScript file and all will be well. Save your changes and you’re done! The next time you open the WordPress editor to create or change a post, you should see your shiny new table button as shown here:

TinyMCE table button present

Creating a Table

Using the TinyMCE table plug-in is simplicity itself. Just click it and select the “Insert Table” item from the menu. This will open up an adjacent pane where you can visually drag your mouse pointer to select the number of rows and columns you want your new table to have.

choose table size

However, the final result looks anything but pretty. Don’t worry – all you need to do is grab on to the bottom right corner of whatever was inserted and drag it to the right-hand side to get the desired height and width of the cells that you are looking for:

easier to drag table

You can even get more fine-grained control by clicking the “Table Properties” icon where you can manually insert the specific numbers for the height and width of the table as well as other elements like cell padding etc. There is even an “Advanced” button where you can specify the styles for the table!

set table properties

In other words, it’s a complete WYSIWYG table solution for the TinyMCE editor that’s missing from the default installation of WordPress. We didn’t even have to write the plug-in our self – we just took it off the open source code from Ephox – the development team behind TinyMCE. Like I said earlier, the actual process of developing a TinyMCE plug-in from scratch can be pretty painful, so it’s good to have a ready-made solution for us.

Leave a Reply

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

Disclosure: We receive a compensation from some of the companies whose products are presented on our website.