Support » Fixing WordPress » How to prevent HTML code-changes?

  • Hi,

    in one current project, I need pretty much control over the HTML-code, so the content of the page is created in Dreamweaver or just a normal text-editor and then copied into WordPress.

    I already deactivated the visual editor for the admin account to prevent code-rewriting and also installed the “Disable wpautop Plugin”.

    So at the current state, no code changes happen in the editor within WordPress, but the final code that is sent to the browser still gets modified:

    As an examle this code:

    <div class=”headline”><span class=”floatLeft”><img src=”/wp-content/images/course_numbers/headlines/w01.gif” width=”58″ height=”25″></span>
    <h1 class=”short”>Headline content text</h1>

    Is turned into this:

    <div class=”headline”><span class=”floatLeft”><img src=”/wp-content/images/course_numbers/headlines/w01.gif” width=”58″ height=”25″></span></p>
    <h1 class=”short”>Headline content text</h1>

    So for some reason, WP writes two closing paragraphs into
    the source, what makes no sense in this case.

    There’s no need for visual editing at this time in this project.
    I just need a window for pasting in HTML code and get it sent to the browser without any filtering.

    Is there any plugin I could use or a way to remove this filtering by commenting out some php-code?

    I found this behaviour in WP 2.3.3, 2.5.1 and also in the beta for WP 2.6.

    Any ideas how to solve this?
    Thanks in advance for you help!


Viewing 11 replies - 1 through 11 (of 11 total)
  • One tip to prevent this is to make sure that you have no returns or line breaks in your code (I see one before the h1), it should all be on one line.

    Thanks for the quick response!

    I already tried reformatting the code in the code-window, but the results are not really predictable and always wrong. When I insert the code in one line as you propose, the code gets changed to:

    <div class="headline"><span class="floatLeft"><img src="/wp-content/images/course_numbers/headlines/w01.gif" width="58" height="25"></span>LINEBREAK< h1 class="short">Headline content text</h1>

    In the code-window, between the closing span and the opening heading 1, there is not even a blank, so I have no clue why WP inserts a br.

    Also, reformatting the code by hand would simply be impossible for every page within the project.

    Any other ideas?

    The h1 tag is a block level html element and will begin on a new line. This is normal html behavior.

    The Problem is not about the fact that h1 is a block level element.

    It’s about WP adding additional tags like closing paragraphs or line breaks into the source that break the layout.

    Justin Tadlock


    WordPress God

    You might just have to live with the for now.

    If you want to go back in and change everything, I’d recommend something like this:

    <div class="headline">
    <img class="floatLeft" src="/wp-content/images/course_numbers/headlines/w01.gif" width="58" height="25" alt="Added alt text for you" />
    <h1 class="short">Headline content text</h1>

    WP will display this correctly. Plus, it’s less coding for you. I don’t understand why you’re adding an <h1> in a post though.

    Forgot to mention that the <img> will still get paragraph breaks around it though.

    Forgot to mention that the <img> will still get paragraph breaks around it though.

    That’s exactly the problem: You write some correctly formatted HTML-code with deactivated visual editor in WordPress to have full control over the code. Than the code gets written into the database where everything looks still great, but when rendering the page, certain tags, in this case a closing paragraph, are inserted into the HTML and break the code.

    I agree, in most cases, it shouldn’t be necessary to use code-view at all and live with the visual tools WordPress has to offer. But sometimes the project demands a layout that is a little too complex for the visual editor to handle. Again, it’s a great concept of WordPress to include such visual tools that are simple to use and get the job done in most cases. But I think the “raw” HTML-mode should just be a way to get HTML into the page exactly how it was written.

    Is there a documentation about how content gets filtered before the final page gets rendered?

    I could only find this information which is a little dated.

    Justin Tadlock


    WordPress God

    If you don’t want the <p> around the <img>, then just slap a <div> around it.

    I know, it can be a pain when first using it, but the best method is to learn to work with the system instead of against it. If this doesn’t work for you, I’d definitely start searching for a plugin.

    I’m having this problem as well. I’m going to check out the “Disable wpautop Plugin” mentioned above.

    I really don’t fancy rewriting 200+ pages of html. One thing I am finding particularly frustrating is the auto-insert of br tags when my html code goes to a new line. For example:

    <img src="1.jpg">
    <img src="2.jpg">
    <img src=3.jpg">

    Should show three images inline, one after the other.

    WP changes this to

    <img src="1.jpg"><br />
    <img src="2.jpg"><br />
    <img src=3.jpg"><br />

    Causing them to show one under the other.

    I am also seeing additional p tags in the wrong place, causing invalid xhtml markup.

    I struggled with the same issue, and even though I deactivated the visual editor my valid HTML was still stuffed up.

    I recommend using either of the following plugins:

    I tried out both and personally prefer the latter.

    Thanks for the lead on the plug-ins Helaku. I am utterly perplexed as to what reasoning was used for providing a raw code option and then slipping extra code in there for you. It has to be a bug because there’s absolutely zero logic to that one.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to prevent HTML code-changes?’ is closed to new replies.