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&img=uploads%2F2012%2F12%2Fmad-men-image.jpg&h=300&t=exact" ></p>
<div class="caption sft"<br />
data-x=”400″<br />
data-y=”20″<br />
data-speed=”300″<br />
data-start=”200″<br />
data-easing=”easeOutExpo”><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=”550″<br />
data-y=”140″<br />
data-speed=”300″<br />
data-start=”500″<br />
data-easing=”easeOutExpo”>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>
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:
In the revo slider admin area, select the slider that is not displaying well.
Look for the troubleshooting tab (Bottom right) then change the values
Jquery No Conflict Mode = ON
Put JS Includes To Body = FALSE
(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
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.
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' );
Related
i am trying to remove <P> tag those wordpress are generating automatically.
I have google for that and get solution like remove filter
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
But by using this its removing all <p> tag those i have already used in page content.
For example :
When i am putting plain text in page content like
This is example.
Wordpress wrapping these plain text in <p> tag like <P>This is example.</p>
How can i stop this adding <p> tag rather than removing all <p> tag.
Try this one it will remove extra <p> for a particulate page
http://wordpress.org/plugins/ps-disable-auto-formatting/
after configuring this plugin you get an option like this, showing on example site
http://www.wordpress-plugin.net/remove-automatic-p-paragraph-in-wordpress/
Use strip_tags() function, this will help you
One of the good plugin in wordpress is :
Row Html
Features of this plugin is :
Disable wptexturize (the function that creates smart quotes and other
typographic characters).
Disable automatic paragraph creation.
Disable image smilies.
Disable convert_chars (the function that converts ampersands to HTML
entities and "fixes" some Unicode characters).
I am using WordPress editor TinyMCE. I have something like this:
<div class="TA_excellent" id="TA_excellent150"><ul>...</ul></div>
<script type="text/javascript" src="http://www.jscache.com/wejs?wtype=excellent&uniq=150&locationId=287500&lang=en_AU">
</script>
When I skipped to visual editor "script" tags are removed from the content. So I tried every kind plugin including Ultimate TinyMCE but this time "script" tags are wrapped by "p" tags.
So output is something like this:
...</ul></div>
<p>
<script type="text/javascript" src="http://www.jscache.com/wejs?wtype=excellent&uniq=150&locationId=287500&lang=en_AU">
</script>
<script src="http://www.tripadvisor.com.au/WidgetEmbed-excellent?uniq=150&locationId=287500&lang=en_AU"></script
</p>
I also tried plugin called "Advanced TinyMCE Settings" it allows me to change the default TinyMCE configuration. My config under TinyMCE settings is like this:
extended_valid_elements: script[type|src],a[*]
I spent hours and hours on it just won't work. I can't get rid of this "p" tags. They keep continue to publish automatically.
Here are screenshots from Ultimate TinyMCE:
Removing unwanted p and br tags (empty ) can be done by adding simple filter function to theme functions.php
Here is the code you need to add.
function remove_additional_p($content){
$content = forec_balance_tags($content);
return preg_replace('#<p>\s*+(<br\s*/*>)?|s*</p>#i','',$content);
}
add_filter('the_content','remove_additional_p',20,1);
Use this code to remove <p></p> before editor initialize.
function tinymce_remove_root_block_tag( $init ) {
$init['forced_root_block'] = false;
return $init;
}
add_filter( 'tiny_mce_before_init', 'tinymce_remove_root_block_tag' );
It can be done without code.
Go to Settings > TINYMCE Advanced and check
Stop removing the <p> and <br /> tags when saving and show them in the HTML editor
Whereas it is bad practice to put scripts in your text area, well you can remove <p> tags by doing this:
$text=str_ireplace('<p>','',$post->post_conent);
$text=str_ireplace('</p>','',$post->post_conent);
I use a slider called revoslider and use as other sliders shortcodes for show this elements
When I use the shortcode without using the visual editor to insert and save, the slider doesn't works because WordPress adds <p> tags into the javascript:
<p> <script type="text/javascript"></p>
<p> var tpj=jQuery;</p>
<p> tpj.noConflict();</p>
<p> var revapi1;</p>
<p> tpj(document).ready(function() {</p>
<p> if (tpj.fn.cssOriginal != undefined)
tpj.fn.css = tpj.fn.cssOriginal;</p>
<p> if(tpj('#rev_slider_1_1').revolution == undefined)
revslider_showDoubleJqueryError('#rev_slider_1_1');
else
revapi1 = tpj('#rev_slider_1_1').show().revolution(
{
delay:9000,
startwidth:960,
startheight:350,
hideThumbs:200,</p>
<p> thumbWidth:100,
thumbHeight:50,
thumbAmount:2,</p>
<p> navigationType:"bullet",
navigationArrows:"solo",
navigationStyle:"round",</p>
<p> touchenabled:"on",
onHoverStop:"on",</p>
<p> navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,</p>
<p> soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,</p>
<p> soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,</p>
<p> shadow:2,
fullWidth:"off",</p>
<p> stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,</p>
<p> shuffle:"off",</p>
<p> hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0
});</p>
<p> }); //ready</p>
<p> </script></p>
Because of this the code never works and I don't understand why WordPress adds these <p> for each line, it's ridiculous
I tried add_filter for content it still doesn't work.
Have you seen this topic on wp?
http://wordpress.org/support/topic/shortcode-is-being-surrounded-by-p-tags
seems to be a problem with nested shortcodes .. If it is your Issue at all?
Do you have a link to the slider you are using?
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:
In the revo slider admin area, select the slider that is not displaying well.
Look for the troubleshooting tab (Bottom right) then change the values
Jquery No Conflict Mode = ON
Put JS Includes To Body = FALSE
(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
When editing a slider, in the Troubleshooting section, you've got an option called Output Filters Protection. Set it to By Echo Output, and revslider's shortcode function will bypass filters, including the faulty one that adds this <p> tags... It does that by outputting (echo) its content directly instead of returning it to wordpress.
Have you tried surrounding your code with <div></div> (without using any class or id)? It prevents Wordpress from surrounding text with <p></p> tags. I've used it to prevent <p></p> tags appearing around images, as described in this topic over at Wordpress.org.
For those who might have had a similar issue, what worked for me was the following:
Since I concluded the issue was within my theme, I had spent some time looking for the issue and found the one line causing the issue:
add_filter( 'the_content', 'do_shortcode', 7 );
I just commented it out and it sorted out the problem.
I have an image that should float right to the text, and it does, inside the main theme. However in a mobile theme, the source code in the end is
<p> <img /> </p>
<p> TEXT </p>
instead of
<p> <img /> TEXT </p>
Where and how could I fix this problem?
I am new to wp (i know php) and I am modifying themes someone else built, so I do not know too much. If this helps, the original theme is twenty ten and the mobile theme is called mobile pack base, so I guess I should see how the initial theme works and parses content, and then modify the mobile pack one, but I have no idea where to look
The extra paragraph is probably being added by wpautop. You can disable it by adding the following to your functions.php file.
remove_filter( 'the_content', 'wpautop' ); // Remove auto formatting in full content
remove_filter( 'the_excerpt', 'wpautop' ); // Remove auto formatting in post excerpts
Sometimes I need to inject some raw HTML code into a Wordpress post, and sometimes I need to comment out a chunk of that code.!
With a plain text editor, I can just use <!-- Comment --> around the chunk I want to hide.
But when I try this in a WP post, it does hide the code but I still see the "closing comment tag" -->.
What's the right way, if possible, to comment out code in a WP post?
Thanks!
wpautop() contains a bug that breaks comments containing HTML code. An easy workaround is to add a second opening HTML comment tag just before the closing - this tricks WordPress into working like you would expect it to. see http://core.trac.wordpress.org/ticket/2691
This will work in WordPress:
<!-- <div class="book floatleft"><a href="#">
<img src="http://www.myreallycoolsite.com/wp-content/uploads/2013/02/button.png" alt="" />
</a></div> <!-- -->
This will not work in WordPress:
<!-- <div class="book floatleft"><a href="#">
<img src="http://www.myreallycoolsite.com/wp-content/uploads/2013/02/button.png" alt="" />
</a></div> -->
Use a hidden div block
like this:
<div style="display: none;">
...comment...
</div>
works like a charm
You could try one of the following plugins which preserves code formatting within the html editor:
TRUEedit Plugin
WP Super Edit
ps-disable-auto-formatting
Unfiltered MU (multisite only)
I believe most of these plugins removes the wptexturize filter that WordPress uses which replaces characters and patterns (which messes up some shortcodes and html).
If your using 'Deans FCKEditor' or 'Foliopress WYSIWYG' that could be the problem since they convert quotes to html quotes, add paragraph markup, mess up shortcodes, and do some other html character replacement.
This snippet should do what you're looking for.
// Add the unfiltered_html capability back in to WordPress 3.0 multisite.
function um_unfilter_multisite( $caps, $cap, $user_id, $args ) {
if ( $cap == 'unfiltered_html' ) {
unset( $caps );
$caps[] = $cap;
}
return $caps;
}
add_filter( 'map_meta_cap', 'um_unfilter_multisite', 10, 4 );
Try this:
<!-- Comment --!>
Works like a charm.
Instead of typeing <!--Comment--> in the editor for your post, Make sure you place the comment tag inside the raw html editor.
(source: headwaythemes.com)
Also use a DOM Inspector to make sure that th --> closing tag is actually coming form the post itself.
Another Tip, before you publish the article, hit the Close Tags button to make sure that it validates your html better.
Try this:
<!--<br />
... commented out stuff ...<br >
<-->
but beware the HTML break tag WordPress will throw in at the end of the comment.
Like jharrel suggested, this works just fine:
<!-- content <!-- -->