Add tables to WordPress and TinyMCE

I recently implemented WordPress 2.6.5 and admin users needed the ability to insert and control tables in their posts.  WordPress uses TinyMCE for its WYSIWYG editor, but tables are not included by default.  In order to get table controls in the TinyMCE toolbar, I took the following steps:

Step 1

Download the latest version of TinyMCE.

Step 2

Unzip the file and find the tinymce/jscripts/tiny_mce/plugins/table directory.
Upload that entire table directory to your wordpress installation and place it in wp-includes/js/tinymce/plugins directory

Step 3

Edit tiny_mce_config.php found in wp-includes/js/tinymce.

Find the line that looks like:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'wpeditimage' );

We want to add ‘table’ to that array.  The resulting line looks like:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'table', 'wpeditimage' );

Find the line that looks like:

$mce_buttons_3 = apply_filters('mce_buttons_3', array());

We want to add ‘tablecontrols’ to that empty array.  The resulting line looks like:

$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols'));

This adds the table options to TinyMCE’s configuration and makes them show up in the third row of buttons.

Save that file.

Step 4

Overwrite the wp-langs.php file found at wp-includes/js/tinymce/langs with the one located here.  Unzip it first…

Step 5

Now we need to clear WordPress’ javascript cache so our changes will show up.  Delete everything in the directory:  wp-content/uploads/js_cache

Step 6

Login to WordPress and write a new post or edit an existing one.  If you’ve done everything correctly, you’ll see your new shiny row of table control buttons.