Support » Fixing WordPress » HTML page – extra tags added

  • Resolved ma3ry

    (@ma3ry)


    I am trying to add an HTML page. When we copy and paste the HTML code into the HTML tab of the page, the only thing that shows up is the header. We believe that the HTML is adding extra tags and removing others. Example – my son-in-law (who created the HTML page says):

    My code says:
    <p role=“alert” id=“errorMsg”></p>

    Your code says:

    <p role=“alert” id=“messageMsg”>

    So, it is missing the closing </p> tag.

    Then, just before the <script> tag, it has inserted a <p> tag….

    So, somehow you have to get WordPress to honour the text you are entering verbatim instead of trying to style it for you.

    Also, the <style</style> tags seem to be missing, so the page won’t look right either.

    So I thought the problem might be the TinyMCE plugin. I deactivated it but that didn’t change anything. So then I thought I could bypass the WP interference by adding the code directly into PHPMyAdmin, but again, nothing changed. The only thing we see is the header.

    Can you tell me please how to “get WordPress to honour the text you are entering verbatim instead of trying to style it for you.”

    Many thanks!

    • This topic was modified 5 months, 3 weeks ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • First, let’s get a few important details:

    1) Are you using the NATIVE WordPress editor (aka Gutenberg), or are you using some other editor plugin (eg Classic Editor plugin, or even something else)?

    2) If you’re using the native Gutenberg editor, can you please confirm if you’re using the CUSTOM HTML block, and not the WYSIWYG paragraph block? HTML code should go into a CUSTOM HTML block.

    Thread Starter ma3ry

    (@ma3ry)

    I am using Classic. I have just tried adding it using Gutenburg HTML blocks and have the same result – only the heading shows.

    This is the HTML if it is of any help in this issue.

    <style>
    body {
    font-family: verdana;
    }
    table, th, td {
    border: 1% solid black;
    }
    table th {
    text-align: left;
    }
    table td:nth-child(1) {
    width: 7.5%;
    text-align: center;
    }
    table td:nth-child(2) {
    width: 12.5%;
    text-align: left;
    text-transform: capitalize;
    }
    table td:nth-child(3) {
    width: 50%;
    text-transform: capitalize;
    }
    table td:nth-child(4) {
    width: 30%;
    text-transform: capitalize;
    }
    th {
    font-size: 1.2em;
    font-weight: bold;
    }
    </style>
    <h1>kimn.ca Sold Properties</h1>
    <p role="alert" id="errorMsg"></p>
    <div id="content"></div>
    <script>
    function markSold(property_id) {
    
    //make a reference to the checkbox
    let c = document.getElementById('property' + property_id);
    
    //clear any errors
    document.getElementById('errorMsg').innerHTML = '';
    
    //build the data
    let data = {};
    if(c.checked) {
    data.setSold = {
    property_id: property_id
    };
    } else {
    data.setForSale = {
    property_id: property_id
    };
    }
    //alert(JSON.stringify(data));
    
    //update the server
    sync(data)
    .then((response) => {
    document.getElementById('errorMsg').innerHTML = response.success.message;
    });
    
    //if the server request fails, reset the state to its pre-change value
    //this.checked = !this.checked;
    
    }
    </script>
    
    <script>
    //send data to the server and get the response
    function sync(data) {
    return new Promise((resolve, reject) => {
    //set a timeout in case the server does not respond
    //give it 5 seconds
    setTimeout(() => {
    reject(new Error('We did not get a response from the server.  Please try again in a moment.'));
    }, 5000);
    
    var request = new Request(‘/markSold/sold.php', {
    method: 'post',
    mode: 'cors',
    body: JSON.stringify(data),
    headers: new Headers()
    });
    fetch(request)
    .then(function(response) {
    //return response.text();
    return response.json();
    })
    .then(function(response) {
    //alert(JSON.stringify(response));
    resolve(response);
    }
    )
    .catch(function(error) {
    switch(error.message) {
    case 'The Internet connection appears to be offline.':
    reject(error);
    break;
    
    default:
    reject(error);
    break;
    }
    });
    });
    }
    </script>
    <script>
    //build the view all data
    let data = {
    viewAll: {
    sortColumn: 'price', 
    sortDirection: 'DESC'
    }
    };
    
    //get the property list
    sync(data)
    .then((response) => {
    //alert(response.success.message);
    document.getElementById('content').innerHTML = response.success.message
    });
    </script>
    • This reply was modified 5 months, 3 weeks ago by ma3ry.

    I posted your code on a fresh WordPress site, and it doesn’t seem to be that anything was stripped off. Please take a look and confirm:

    https://s-qxp36lp3vzmfl.eu1.wpsandbox.org/test-page/

    NB: This sandbox site will melt away automatically after 24hours.

    I am using Classic. I have just tried adding it using Gutenburg HTML blocks and have the same result – only the heading shows.

    Only the heading showing is a different problem which you’ll have to address with your developer.

    At least we now know that the reason the code isn’t working is NOT because WordPress is stripping off the closing paragraph tag. Because here we have nothing stripped off, but the code still isn’t working.

    • This reply was modified 5 months, 3 weeks ago by George Appiah.
    Thread Starter ma3ry

    (@ma3ry)

    I am on your test page and don’t see any of the content that should be there. I just see the header and “Paragraph after HTML code”. It should show a table with tick boxes in the first column with a heading of SOLD, Prices, and then Addresses in the last column.

    Please see my edit above.

    So, somehow you have to get WordPress to honour the text you are entering verbatim instead of trying to style it for you.

    As quoted from your original post above, you were asserting that the reason the code isn’t working is that WordPress is mangling your code.

    If you view the HTML source code in the link I gave (published with Gutenberg’s custom HTML block), you’ll see your code is intact — just as what you posted here. Nothing has been changed, no styling applied, all tags exactly as your original code.

    This means your original assertion isn’t quite true. And something else has to account for why the code isn’t working.

    And you’ll now have to work with whoever wrote the code to get it to work.

    Thread Starter ma3ry

    (@ma3ry)

    Many thanks. I found the problem. There are a smart quote instead of a plain quote.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.