How To Add Table Classes to Bootstrap in TinyMCE and WordPress

August 24, 2016 | 1 Comment | Programming | bootstrap tinymce wordpress

This short article is about adding custom table classes to Bootstrap in TinyMCE and WordPress. It’s very common problem an it has a simple solution:

Let’s add TinyMCE filter in our function.php. This file should be located in your current theme:

<?php
//wp-content/themes/my-theme/functions.php
function bootstrap_classes_tinymce($settings)
{
    $styles = array(
        array(
            'title' => 'None',
            'value' => ''
        ),
        array(
            'title' => 'Table',
            'value' => 'table',
        ),
        array(
            'title' => 'Striped',
            'value' => 'table table-striped table-hover',
        ),
        array(
            'title' => 'Bordered',
            'value' => 'table table-bordered table-hover',
        ),
    );
 
    $settings['table_class_list'] = json_encode($styles);
 
    return $settings;
}
 
add_filter('tiny_mce_before_init', 'bootstrap_classes_tinymce');

You can add any style in styles array. As result you should see this picture in your admin area and table properties:

Screenshot from 2016-08-24 17-36-24

Example of striped table:

Example cell Example cell
Example cell Example cell

Example of bordered table:

Example cell Example cell
Example cell Example cell

About the Author / Artem Zhuravlev

Artem Zhuravlev. Web developer. Blog writer.

Need help with your website ? Contact with me by email infzanoza@gmail.com for services of experienced web developer.

Follow @infernosquad
1 COMMENT
Chris

Just what I was looking for!

BTW it works whether you’re using Bootstrap or not.

LEAVE A COMMENT