How to add a Bootstrap grid to the wordpress Editor as a selection or dropdown menu

Question

Problem: I'm looking to expand our WordPress theme(s)/websites to make it easier for our communications team to create posts and pages by adding in Bootstrap rows and columns.

My idea is to create A custom Field type with a selection to add in rows and columns to fit our themes pages.

Has anyone done something like this? We are using Divi Builder but that is a bit complicated for average users and we are not in arush to create a whole new theme for our 30+ websites.

Or would I need to create a custom plugin for that? I'd rather not use a third party plugin for security reasons

Answer 1

So are you wanting output bootstrap markup in your default wordpress editor to make rows and columns etc?

Short answer is no, the wysiwyg editor is only really built for paragraphs, headings, quotes, horizontal rules, lists, images, inline formatting etc...

In order integrate bootstraps block layout markup would require some extra level of builder addon. Elementor definitely could do the job with some super customisation, even ACF flexible content would do it, and i think even WP Gutenberg can do this natively... but would require customisation to use bootstrap markup.

But if you wanted to attempt and utilise the standard wordpress editor (not Gutenberg editor) using the element dropdown (paragraph, headings etc by default).

You could try this, however I recommend loading the same front end bootstrap css into the wysiwyg editor so you can instantly see changes.

Please note this method below is risky as the user would need to understand how bootstraps row/column structure should be formatted. The probability of html markup going wrong is highly likely. Hence using an actual block element builder (like Elementor or ACF) would be a safer choice.

Anyway, see below example of how to customise standard wordpress wysiwyg editor dropdown for wrapping html tags around content.

First load the same front end bootstrap css into the wysiwyg editor...

// editor stylesheet (containing the front end css for the post content)
add_editor_style('dist/css/editor.css');

Now lets add the styleselect dropdown to our wysiwyg editor...

// add the style select dropdown to our wysiwyg editor
add_filter('mce_buttons_2', 'formatting_dropdown');

/**
 * @link https://developer.wordpress.org/reference/hooks/mce_buttons_2
 * @param $buttons
 * @return mixed
 */
function formatting_dropdown($buttons) {

    // global post object
    global $post;

    // if no post return param
    if(!$post) return $buttons;

    // switch case for post types or type to run this on (page/post)
    switch ($post->post_type) {
        case 'page':
        case 'post';
            // reveal the hidden “Styles” dropdown in the advanced toolbar
            array_unshift($buttons,'styleselect');
            return $buttons;
        default;
            return $buttons;
    }

}

And then add your bootstrap formatting settings using this filter below...

// init filter for handling the style select options
add_filter('tiny_mce_before_init', 'formatting_dropdown_options');

/**
 * @link https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * @param $mceInit
 * @return mixed
 */
function formatting_dropdown_options($mceInit) {

    // global post
    global $post;

    // if no post return param
    if(!$post) return $mceInit;

    // switch case for post type (page/post)
    switch ($post->post_type) {
        case 'page':
        case 'post';

            // new style array
            $style_formats = [
                [
                    'title' => 'row',
                    'block' => 'div',
                    'classes' => 'row'
                ],
                [
                    'title' => 'col',
                    'block' => 'div',
                    'classes' => 'col'
                ]
            ];

            // bs5 breakpoints
            $breakpoints = ['xs','sm','md','lg','xl','xxl'];

            // bs5 column grid
            $grid = 12;

            // add bs5 column classes to $style_formats array
            foreach ($breakpoints as $breakpoint) {
                foreach (range(1, $grid) as $column) {
                    $style_formats[] = [
                        'title' => $breakpoint === 'xs' ? 'col-' . $column : 'col-' . $breakpoint . '-' . $column,
                        'block' => 'div',
                        'classes' => $breakpoint === 'xs' ? 'col-' . $column : 'col-' . $breakpoint . '-' . $column
                    ]
                }
            }

            // override style format with new style formats
            $mceInit['style_formats'] = json_encode($style_formats);

            // init array
            return $mceInit;
            break;

        default;

            // init array
            return $mceInit;

    }

}