1

Is there a way to prevent WP from modifying my perfectly fine HTML? When writing content of a page, I'm writing a list as

<ol>
  <li>Paragraph 1 : text

  Some more text</li>
  <li>...</li>
</ol>

then WP transform the HTML into

<ol>
  <li>Paragraph 1 : textSome more text</li>
  <li>...</li>
</ol>

This is coming frustrating as some of the lists are long and contain a few of these HTML configurations.

I tried wrapping the paragraphs inside P tags, but they too get removed and scrapped.

Update

The only solution I've found is here but it's rather hacky... I wish WP would not be such a pain about doing things I don't want nor ask for...

  • TinyMCE Advanced ( the chosen editor WordPress uses ) is pretty finicky when it comes nested elements. A better solution may be to use shortcodes but I'm not sure your specific usecase. – Howdy_McGee Feb 11 '16 at 19:22
1

I assume you are using the text editor...

The example with the blank line in your question would normally be converted by WP to this:

<ol>
<li>Paragraph 1 : text
<p>  Some more text</p></li>
<li>…</li>
</ol>

Wpautop wraps the 2nd line with the p element because of the blank line you created. Your example of WP's output would indicate wpautop has been disabled (by you or by a plugin).

With wpautop enabled it is pretty easy to add some CSS to create the space you want:

ol li p {
    margin: 1em 0;
}

It might be better to add a class to your ol so the CSS rule only applies where you explicitly name it:

<ol class="my-ol-par">
    <li>Paragraph 1 : text
        <p>  Some more text</p></li>
    <li>…</li>
</ol>

With the CSS:

ol.my-ol-par li p {
    margin: 1em 0;
}

If wpautop is disabled, and you don't want to enable it, you could always hard code your additional lines within the p element and use the same CSS solution.

UPDATE:

<ol>
    <li>Paragraph 1 : text

        Paragraph 2 : text

        Paragraph 3 : text</li>
    <li>…</li>
</ol>
  • The point I was trying to make is that, WP removes all P elements within the LI element. Even if I had set a CSS class to these paragraphs, the element would be removed altogether anyway. The "hacky" solution is to wrap everything inside my LI element with a DIV. Then, WP does not mess with the HTML. The point is that wpautop is removing HTML elements and this is just wrong. – Yanick Rochon Feb 7 '16 at 1:35
  • 1
    The point I'm making is that the behavior you describe is not normal WP behavior, unless you are using the visual editor and/or wpautop is disabled. As I mentioned, use the text editor NOT the visual editor. When using the text editor with wpautop enabled the first '<li>" in your example should not appear as one line in the output. – BillK Feb 7 '16 at 2:12
  • What WP role are you logged in with? By default the author role does not have the unfiltered_html capability. You need the editor role or admin. – BillK Feb 7 '16 at 10:47
  • So, the answer to this is : "no, you cannot prevent WP from messing with the HTML". Or, to do so, I must wrap some elements or use CSS and different HTML tags. – Yanick Rochon Feb 11 '16 at 13:45
  • No, the answer is WP should not be doing that to your code IF you create and save it with the Text Editor. Creating a post with HTML in the Visual Editor and OR later opening and saving it with the Visual Editor will change the HTML. I tested this with a fresh WP install using 2016 theme. Using the text editor, I posted the code shown at the end of my answer under UPDATE. You can see the resulting WP output here: so.bkstest.com – BillK Feb 11 '16 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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