48

All I've got is the following little snippet of code:

<select size="1" name="EventHour<?php echo $i; ?>"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
    <option>11</option> 
    <option>12</option> 
  </select> 
  : <!-- note this character -->
  <select size="1" name="EventMinute<?php echo $i; ?>"> 
    <option>00</option> 
    <option>05</option> 
    <option>10</option> 
    <option>15</option> 
    <option>20</option> 
    <option>25</option> 
    <option>30</option> 
    <option>35</option> 
    <option>40</option> 
    <option>45</option> 
    <option>50</option> 
    <option>55</option> 
  </select> 

The should output fine. However, WordPress adds a p-tag around both of my select-elements as well as around the ":"-character. This makes them all end up on different rows.

I've installed and activated the WordPress plugin "Disable Visual Editor WYSIWYG" on this page without any success. Any other ideas what I can do to stop this from happening?

10 Answers 10

73

Use this:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

in your functions.php

Here's the complete answer: http://codex.wordpress.org/Function_Reference/wpautop#Disabling_the_filter

1
  • +1 for the link to the codex which provides a link to a plugin that lets you do this on individual pages with ease.
    – KnightHawk
    Jun 11, 2015 at 18:07
10

Wordpress modifies and cleans your entered HTML both in the editor and at output.

Use this plugin to get unmodified markup into your posts:

https://wordpress.org/extend/plugins/raw-html/

5
  • I tried your suggestion ignoring readability for now and it still adds the <p> tag for some reason. Jun 28, 2012 at 18:41
  • 1
    OK, I thoughtI had understood the process better... Can't get it to work properly, either. Maybe have a look at this plugin: wordpress.org/extend/plugins/raw-html
    – pixelistik
    Jun 29, 2012 at 13:21
  • I see. I modified the answer, because my initial explanation was actually wrong.
    – pixelistik
    Jul 5, 2012 at 20:16
  • This is the correct answer. Search for "Raw HTML" in the Plugin Installer and then surround whatever html you want to remain pure with [raw][/raw]. This has been driving me nuts for years and finally I can get around it. Thanks @pixelistik Apr 10, 2013 at 17:09
  • 3
    "Cleans" is a strong word here. Inserting p tags where I added none is the opposite of cleaning.
    – kloddant
    Sep 27, 2017 at 16:19
4
<!-- wp:html -->

You can insert your code between these tags.

<!-- /wp:html -->

Tested on 5.6.2 WordPress

2
  • This also worked for me on WordPress 5.3.1. @yayami-omate can you or anyone else point to some documentation about this trick? Our site is still using the classic editor so I was surprised to see it work in that context (as opposed to the Gutenberg block editor). Aug 30, 2022 at 19:09
  • This worked for me on WordPress 6.1.1. However, it took awhile because I made a stupid mistake. I had not noticed the requirement to have the slash in the closing tag. Without the slash, the content duplicated itself. For me, the best solution ended up being to only include the opening instruction as the first line in the editor (no closing). Also note, including wp:html generated pages that passes w3.org's HTML validation. Previously, I had stray p tags errors.
    – Karl
    Feb 24 at 12:25
3

Try this in your functions.php

<?php remove_filter ('the_content', 'wpautop'); ?>
5
  • Thanks, still get the same result though. Jun 28, 2012 at 16:13
  • @user1048676 Have you tried this plugin (wordpress.org/extend/plugins/ps-disable-auto-formatting)? Jun 28, 2012 at 16:36
  • I just tried to install this plugin and still get the same issue. Jun 28, 2012 at 18:41
  • 1
    Wordpress will not clean up the inserted <p> tags that it already has entered you have to clean them out, but they will not come back afterwards. Sep 20, 2013 at 21:48
  • 1
    @mahatmanich Interesting. How do you "clean up" already inserted p tags? Especially when they do not even show up in the text editor? If you know how to get at that (a "meta text editor"?) it would be especially helpful information! Jun 22, 2018 at 14:17
2

You can minify your code. Wordpress won't destroy code if everything is on one line.

I do that when I want to put <style> or <script> tags inside certain posts.

1
  • Tried that, still screws with your code, added p and br at random places.
    – cjb110
    May 24 at 8:05
0

In my case, I'm doing it manually for the page:

Result that shows extra p tags:

 <p><?php if($description){ echo $description; } ?></p> 
 <p><?php if($description){ echo wpautop($description); } ?></p> 

Result that removes extra p tags:

 <?php if($description){ echo wpautop($description); } ?>  

Note, I removed the p tags around the echo, then added wpautop to the echo.

End Result:

<p>description content</p> 
0

If the post is custom post type, you can add meta box with add_meta_box and there you can initialize your own editor with wp_editor which can be customized. For example you can pass settings to the tinymce like 'force_p_newslines' and 'forced_root_block'

0

At least with contact-form-7 I had some success using a html-minifier to prevent those pesky p-tags. Came here because I googled if others also find this as frustrating as I do.

If you still have problem after code minifire then use just convert your tag to div where p tag is automatically add.

0

if anybody else is having this problem and can't or doesn't want to install another plugin, or again can't or doesn't want to have to edit their functions.php file, you can also do this!

My original code:

your original code

that worked wonderfully..

and then wordpress happened

My code with the workaround:

your original code
//
that worked wonderfully..
//
and then wordpress happened

So long as I make sure to not have any empty lines in my code this seems to be a workaround for me at least. I'm wondering if the : wasn't enough to trick it not to add a p tag, but I'm coding in javascript and it worked for me.

0

Another workaround: Put your select inside a <div> tag, without any whitespace chars between them. So Instead of :

<select ...>
</select>

<select ...>
</select>
 

You write this:

<div><select ...>
</select></div>

<div><select ...>
</select></div>

I've had the same problem with <a> elements, and this solved for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.