giannit

Ok, so let me summarize the problem.

PROBLEM: When placing the div associated with the button, the wpautop function encapsulates the surrounding obects in up to 2 p tags which add up to 2 empty lines in the ouput (1 line above the div and/or 1 line under the div).

All these empty lines are both ugly to see and worsen the fruition of the site, hence I want to get rid of them in a proper way.

I forgot to say that the content of the button, ie what is written inside the div, should also be possibile to be a wordpress shortcode.

The approach shown in this example works good except that is doesn’t allow shortcode as content. I tried it on my site, but if I put a shortcode in the data-message, for example data-message="[myshortcode]", then when I click on the button it just shows [myshortcode] not what’s inside the shortcode.

SOmebody knows a workaround?

• This reply was modified 6 years, 7 months ago by giannit.

This is what I tried so far in details (all the following codes were placed in functions.php file)

————————–

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
add_filter( 'the_content', 'shortcode_unautop',100 );

add_shortcode( 'test', 'test_sc' );
function test_sc( $atts ){
    return apply_filters( 'the_content', '$\frac{15}{5} = 3$' );
}

————————–

function wpex_clean_shortcodes($content){
$array = array (
    '<p>[' => '[',
    ']</p>' => ']',
    ']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
add_filter('the_content', 'wpex_clean_shortcodes');

add_shortcode( 'test', 'test_sc' );
function test_sc( $atts ){
    return wpex_clean_shortcodes(apply_filters( 'the_content','$\frac{15}{5} = 3$' ));
}

————————–

add_shortcode( 'test', 'test_sc' );
function test_sc( $atts ){
        $content = apply_filters( 'the_content','$\frac{15}{5} = 3$' );
        $content = shortcode_unautop($content);
        return $content;
}

————————–

add_shortcode( 'test', 'test_sc' );
function test_sc( $atts ){
        $content = apply_filters( 'the_content','$\frac{15}{5} = 3$' );
        return do_shortcode(wpautop($content));
}

————————–

add_shortcode( 'test', 'test_sc' );
function test_sc( $atts ){
        return apply_filters( 'the_content','$\frac{15}{5} = 3$' );
}

add_filter( 'the_content', 'shortcode_empty_paragraph_fix' );
function shortcode_empty_paragraph_fix( $content ) {
    // define your shortcodes to filter, '' filters all shortcodes
    $shortcodes = array( 'test' );
    foreach ( $shortcodes as $shortcode ) {
        $array = array (
            '<p>[' . $shortcode => '[' .$shortcode,
            '<p>[/' . $shortcode => '[/' .$shortcode,
            $shortcode . ']</p>' => $shortcode . ']',
            $shortcode . ']<br />' => $shortcode . ']'
        );
        $content = strtr( $content, $array );
    }
    return $content;
}

————————–

In all the previous cases, what gets displayed is

and the HTML is

<p>the fraction </p><p><img ...></p>
 equals a natural number<p></p>

I would like that the shortcode would not be wrapped in p tags, how to get rid of them?

I found out that by using the code

return apply_filters( 'the_content', '$\frac{15}{5} = 3$' );

the formula is showed correctly, but as side effect it is displayed inside <p> tags, and so a sentence such as

this is [test] a fraction

gets displayed in 3 lines (the first one contains this is, the second one contains the formula, the third one contains a fraction).
Is it possible to show it without the p tags?

the thread can be deleted
i added the button bold using the function QTags.addButton

@bcworkz Thank you very much for support!

I inspected the button with the browser tool and I was easily able to change its color as you can see here

So then I opened the file style.css and added this small code

.qt_content_center {
	color: red;
}

I refreshed the page and I verified that the file was loaded, but the button color was not changed.

This is how the buttons appear in the inspector tool

<div id="ed_toolbar" class="quicktags-toolbar" style="position: absolute; top: 87px; width: 702px;">
    <input type="button" id="qt_content_collpasible button" class="ed_button button button-small" value="BTN">
    <input type="button" id="qt_content_content" class="ed_button button button-small" value="CON">
    <input type="button" id="qt_content_center" class="ed_button button button-small" value="center">
<div>

Maybe to style the buttons the code have to be placed in the functions.php file, but there css code doesn’t work, does it?

• This reply was modified 6 years, 7 months ago by giannit.
• This reply was modified 6 years, 7 months ago by giannit.

Don’t know why but this solved the problem

@font-face {
	font-family: "Computer Modern";
	src: url('http://localhost/matesvolta/wp-includes/fonts/latex/cmunrm.woff');
}
@font-face {
	font-family: "Computer Modern";
	src: url('http://localhost/matesvolta/wp-includes/fonts/latex/cmunti.woff');
	font-style: italic;
}
@font-face {
	font-family: "Computer Modern";
	src: url('http://localhost/matesvolta/wp-includes/fonts/latex/cmunbx.woff');
	font-weight: bold;
}
@font-face {
	font-family: "Computer Modern";
	src: url('http://localhost/matesvolta/wp-includes/fonts/latex/cmunbi.woff');
	font-weight: bold;
	font-style: italic;
}

This seems to solve all the problems

coll = document.getElementsByClassName("col");
conn = document.getElementsByClassName("con");
var i;
for (i = 0; i < coll.length; i++) {
    coll[i].setAttribute('data-id', 'con' + i);
    conn[i].setAttribute('id', 'con' + i);
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = document.getElementById(this.getAttribute('data-id'));
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
}