Compare raw html to wpautop'd html

Read the wordpress expanded source code to see all that wpautop attempts to correct in your wordpress site. Things like:

Wpautop exists for good reasons to make your html look good, however sometimes wpautop may fail at the above and not deal well with your less than ideal html:

Test the html that your theme template or shortcode generates and see what the wpautop filter may do to the content,

  1. temporarily remove the wpautop filter from your wordpress install
  2. view the source html of the post you want to test,
  3. select and copy just the code you worried about, not the whole page.
  4. post it into the text area below

Example non ideal html without wpautop Example html after wpautop


Two breaks before - should make a paragraph maybe?

br on its own can cause an unbalanced p

A paragraph inside a div with the p and the closing div on a new line should be unaltered.

BlockQuote - will we see a double line break before this? just a single? Or is that a newline in the code anyway

is this right

  • a list where the html is well formatted
  • should also be fine
  • a list is a block element
  • it should add line breaks

buttons inside a div will get a br added between them, which may affect the styling

test image test image

Two breaks before - should make a paragraph maybe?

br on its own can cause an unbalanced p

A paragraph inside a div with the p and the closing div on a new line should be unaltered.

BlockQuote - will we see a double line break before this? just a single? Or is that a newline in the code anyway

is this right

  • a list where the html is well formatted
  • should also be fine
  • a list is a block element
  • it should add line breaks

buttons inside a div will get a br added between them, which may affect the styling



test image

test image

wpautopd result:

23 lines unmodified,11 deleted, 15 inserted.

<div>
<div>
<br/><br/>Two breaks before - should make a paragraph maybe?</div>
<p>Two breaks before - should make a paragraph maybe?</p></div>
<div>
<div>
<br>
</p>
<p> br on its own can cause an unbalanced p </p>
<p>A paragraph inside a div with the p and the closing div on a new line should be unaltered.</p>
</div>
<p> br on its own can cause an unbalanced p </p>
<p>A paragraph inside a div with the p and the closing div on a new line should be unaltered.</p>
</div>
<blockquote>BlockQuote - will we see a double line break before this? just a single? Or is that a newline in the code anyway</blockquote>
<blockquote><p>BlockQuote - will we see a double line break before this? just a single? Or is that a newline in the code anyway</p></blockquote>
<p>is this right</p>
<ul>
<li>a list where the html is well formatted </li>
<li>should also be fine</li>
</ul>
<p>is this right</p>
<ul>
<li>a list where the html is well formatted </li>
<li>should also be fine</li>
</ul>

<ul>
<ul>
<li>a list is a block element</li><li>it should add line breaks</li></ul>
<li>a list is a block element</li>
<li>it should add line breaks</li>
</ul>
<p>buttons inside a div will get a br added between them, which may affect the styling</p>
<div class="buttons-group">
<p>buttons inside a div will get a br added between them, which may affect the styling</p>
<div class="buttons-group">
<button type="button" class="secondary">View</button>
<button type="button" class="secondary">View</button><br />
<button type="button" class="secondary">Edit</button>
</div>
<div>
<button type="button" class="secondary">Edit</button>
</div>
<div>
<table class="sample"><tr>
<table class="sample">
<tr>
<td>
<td>
<a href="" title="if there is a newline before the img in a link, wpautop will convert that to a br. this may impact how it looks">
<img alt="test image" src="https://test.icalevents.com/wp-content/plugins/amr-ical-events-list/images/arrow_refresh_32.png" />
<a href="" title="if there is a newline before the img in a link, wpautop will convert that to a br. this may impact how it looks"><br />
<img alt="test image" src="https://test.icalevents.com/wp-content/plugins/amr-ical-events-list/images/arrow_refresh_32.png" /><br />
</a>
</td>
<td>
</a>
</td>
<td>
<a href="" target="_blank" title="If you have additional newlines in your html, wpautop may convert them to brs">

<img alt="test image" src="https://test.icalevents.com/wp-content/plugins/amr-ical-events-list/images/addtogoogle_32.png" title="Add to google calendar" alt="Add to google calendar" class="amr-bling" />
<a href="" target="_blank" title="If you have additional newlines in your html, wpautop may convert them to brs"></p>
<p><img alt="test image" src="https://test.icalevents.com/wp-content/plugins/amr-ical-events-list/images/addtogoogle_32.png" title="Add to google calendar" alt="Add to google calendar" class="amr-bling" /><br />
</a>
</td>
</a>
</td>
</tr></table>
</tr>
</table>
</div>
</div>


Go Back