How to create a shortcode/edit a function to solve the conflict between Bootstrap and wpautop in Wordpress

Question

Following on from my previously unsolved question How to show Bootstrap Buttons inline instead of one per line in Wordpress Specifically? and after extensive research in this point, I found out that that there is a conflict between Wordpress and Bootstrap.

Wordpress simplified the text editing process by introducing invisible line breaks < /br> after each line. When Using Bootstrap elements (e..g buttons) with Wordpress, a line break < /br> gets introduced after each button code, leading them to appear one button per line, likr this screenshot:

The only solution I found (which appears as an edit in my other question referred to above), is to add this function: remove_filter( 'the_content', 'wpautop' );

However, this function while it solved the Bootstrap problem, forces me to write full html on all text of all posts, otherwise the text will appear as one unformmatted block.

As a workaround for this problem, I thought of putting the Bootstrap components in a div tag, then either creating a shortcode that applies this filter to the content of of the divtag, or create a function that targets this div tag without the need to add a shortcode.

As a start, I created this shortcode function, but it didn't do anything: (yes it doesn't have a div tag specified, but I was testing if the shortcode will work, but it didn't).

    function stop_wpautop(){
    remove_filter( 'the_content', 'wpautop' );
}
    add_shortcode( 'stop-wpautop', 'stop_wpautop'); 

I also tried replacing the_content with a div tag class name that I wrapped the Bootstrap components with, but it didn't work too.

    function stop_wpautop(){
    remove_filter( 'bootstrap-components', 'wpautop' );
}
    add_shortcode( 'stop-wpautop', 'stop_wpautop'); 

Finally, I added the filter straight without a shortcode, but it didn't work too:

remove_filter( 'bootstrap-components', 'wpautop' );

So obviously, I am writing the function wrong. Can someone please guide me as to what's wrong, or any suggestion to limit the effect of the wpautop to a certain div tag only?

EDIT I can add the Bootstrap code in a custom field then show the custom field contents if this will make things easier, but I still don't know how to replace the_content with the custom field name.

Thanks in advance.

Answer 1

This is the function that I am using to output the test buttons.

add_shortcode('show_boot_buttons', 'func_show_buttons');

function func_show_buttons( $atts ) {
    $atts = shortcode_atts(
        array(
            'class' => 'btn',
            'text' => 'Press Me',
        ), $atts, 'show_boot_buttons' );

    return '<button type="button" class="btn ' . esc_html( $atts['class'] ) .'">'. esc_html( $atts['text'] ). '</button>';
}

You can insert a button with the following code example.

[show_boot_buttons class="btn-primary" text="Press This"]