P text added to html text

Question

I know there are a lot of topics on this, and I've already looked at all them and none of the solutions there apply to me.

I've put a shortcode to run a jscript for a responsive slider in the 'text' side of my page editor. Yet when I load the page, the source code has tons of paragraph tags after every line of the javascript. It even has a paragraph tag before it even asks for the content itself.

I've tried editing the functions.php file of my theme (Reason 2.0), but I'm not sure I could mark it up correctly, it's very php-heavy. I've also tried five of the plugins suggested here. None of them have any effect.

The code is horrendous, and looks like this:

 <p>                <!-- START REVOLUTION SLIDER --></p>
 <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;">
 <div id="rev_slider_1_1" class="rev_slider" style="display:none;">
<ul>
 <li data-transition="slidehorizontal" data-slotamount="5" data-masterspeed="300" data-link="http://www.secondhandculture.org/mad-men-and-attraction"  >
                    <img src="http://www.secondhandculture.org/wp-admin/admin-ajax.php?action=revslider_show_image&#038;img=uploads%2F2012%2F12%2Fmad-men-image.jpg&#038;h=300&#038;t=exact" ></p>
<div class="caption sft"<br />
                 data-x=&#8221;400&#8243;<br />
                 data-y=&#8221;20&#8243;<br />
                 data-speed=&#8221;300&#8243;<br />
                 data-start=&#8221;200&#8243;<br />
                 data-easing=&#8221;easeOutExpo&#8221;><img src="http://www.secondhandculture.org/wp-content/uploads/2012/12/Mad-men-text.png" alt="Mad Men"></div>
<div class="caption big_white sfr"<br />
                 data-x=&#8221;550&#8243;<br />
                 data-y=&#8221;140&#8243;<br />
                 data-speed=&#8221;300&#8243;<br />
                 data-start=&#8221;500&#8243;<br />
                 data-easing=&#8221;easeOutExpo&#8221;>How it makes us love      <br><br />
what we know we should hate, <br><br />
 and asks us why</div>
 </li>
 </ul>
 <div class="tp-bannertimer tp-bottom"></div>
</p>
</div>
</div>
 <p>            <script type="text/javascript"></p>
 <p>                var tpj=jQuery;</p>
 <p>                                    tpj.noConflict();</p>
 <p>                tpj(document).ready(function() {</p>
 <p>                if (tpj.fn.cssOriginal != undefined)
                tpj.fn.css = tpj.fn.cssOriginal;</p>
 <p>                var revapi1 = tpj('#rev_slider_1_1').show().revolution(
                {
                    delay:9000,
                    startwidth:,
                    startheight:300,
                    hideThumbs:200,</p>
 <p>                        thumbWidth:100,
                    thumbHeight:50,
                    thumbAmount:1,</p>
 <p>                        navigationType:"none",
                    navigationArrows:"nexttobullets",
                    navigationStyle:"round",</p>
 <p>                        touchenabled:"on",
                    onHoverStop:"on",</p>
 <p>                        navOffsetHorizontal:0,
                    navOffsetVertical:20,</p>
 <p>                        shadow:2,
                    fullWidth:"off",</p>
 <p>                        stopLoop:"off",
                    stopAfterLoops:-1,
                    stopAtSlide:-1,</p>
 <p>                        shuffle:"off"
                });</p>
 <p>                }); //ready</p>
 <p>            </script></p>
 <p>                            <!-- END REVOLUTION SLIDER --></p>

Answer 1

I had the same problem once, and add_filter( 'the_content', 'wpautop') does not work on my theme. So what I did was the following:

1. In the revo slider admin area, select the slider that is not displaying well.

2. Look for the troubleshooting tab (Bottom right) then change the values

3. Jquery No Conflict Mode = ON

4. Put JS Includes To Body = FALSE

5. (Important part) Output Filters Protection = By Compressing Output

That way, the script will be just in one line therefore the auto paragraph filter will just add the p tag to a single line

Answer 2

A common reason for this is that the theme author changed the priority of the output filters in the theme or even replaced the default ones with his/her own. So, when you insert the Revolution Slider shortcode, paragraph tags are inserter surrounding each line of output, breaking the Javascript code. The usual message in the Firefox error console is:

Error: SyntaxError: syntax error
Source Code:
</p> 

This is a theme problem the theme author should fix. If you want to try to fix it yourself, look for a line like:

add_filter( 'the_content', 'wpautop' , 99);

and change the priority (the 99) of the filter to something like 9. That may help but also break something else. In some themes the code is not exactly that but you can look for a function adding or removing filters from the shortcodes output. You can see examples in the pages I linked below.

However, before doing that try this: recent versions of Revolution Slider have an option to avoid being filtered. When you create a slider, in the Troubleshooting box, there is an option named "Output Filters Protection". Enable it (I have used the "By Echo Output" option).

This is a known problem with some Wordpress themes. Also note, if the theme affected this plugin, it will surely affect other plugins.

A few comments about this problem are posted in http://pippinsplugins.com/never-remove-the-default-the_content-filters-in-themes/ and http://theandystratton.com/2011/shortcode-autoformatting-html-with-paragraphs-and-line-breaks

From the first link (Never Remove the Default the_content Filters in Themes):

There is a terrible, terrible practice among theme developers to remove some of the default filters that are applied to post and page content...

From the second link (Shortcode Autoformatting HTML with Paragraphs and Line Breaks):

... this mysterious issue of my shortcode output being mysteriously auto-formatted with paragraph tags and line-breaks... It’s globally removing two very important core content filters that WP has built-in... This makes this theme work perfectly and negatively affects ANY and ALL plugins that have shortcodes...

The final solution is the one commented in the second article:

Don’t use a theme that poor code in it.

Answer 3

Don´t use inline JS - use register_script() and wp_enqueue_script

function o99_load_my_scripts()  
{  
    // Register for a plugin:  
    wp_register_script( 'custom-script', plugins_url( '/js/my-custom-script.js', __FILE__ ) );  
    // or  
    // Register for a theme:  
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/my-custom-script.js' );  
    // then, you can then enqueue the script:  
    wp_enqueue_script( 'custom-script' );  
}  
add_action( 'wp_enqueue_scripts', 'o99_load_my_scripts' );