How to Preserve and Format HTML Tags in WordPress

Posted on Updated on

If you need to add code to your WordPress post – especially if it requires the usage of HTML tags, you have a problem. Most of us don’t write our code directly into the WordPress visual editor, but copy and paste it from somewhere else. If you do this, WordPress will automatically “escape” your special characters in the backend, but it will destroy your formatting. Let’s take an example.

In the screenshot below, I’ve pasted a chunk of PHP code directly into the WordPress editor. My original text had nice spacings and alignments to make it easy to read. But WordPress completely messes up everything:

messed up formatting

This looks terrible and it’s not something you want to place in front of your users. Well then, let’s try it the other way around by pasting it code into the HTML editor instead. So I click on the “Text” tab and re-paste it as shown below. This time it renders correctly within the text box at first:

paste into text editor

So far so good. But see what happens when you switch back to the visual editor:

HTML tags lost

The presence of HTML tags within our code completely messes up whatever internal restructuring WordPress performs. And if you think you can avoid this problem by wrapping your code in “pre” or “code” tags, think again. In addition, if you publish the entire post without switching to the visual editor in the first place, it won’t make a difference. The post will publish, but your code will still be messed up.

Escaping Characters

So what do we do to avoid this? How do we achieve the twofold objective of preserving our formatting intact with tabs, spaces etc. as well as ensuring that we retain our special HTML characters? The answer lies in something known as HTML encoding.

Encoding HTML consists of replacing troublesome characters like “>” with their ASCII equivalents allowing for an unambiguous representation of the entity. Normally WordPress does this automatically for special characters pasted into the visual editor but as we’ve seen before, this plays havoc with our formatting and spacing. Of course, we could always manually insert the spaces into our code directly from the WordPress editor, but you can’t keep doing that all the time especially if you have a lot of it.

Neither can you encode the HTML manually by replacing each and every special character – it’s very confusing and even if you had the time, you’ll probably make a mistake. No, what we need is an automatic tool for this purpose. There are many such online resources, and one of them is this one.

Open up the link and in the text field, paste in your code that you want to display “as is”. Then as shown in the screenshot below, click the “Encode” button.

encode HTML

This will process your text and “escape” all the special characters within it giving you what may look like a confusing mess of characters in the resulting output:

encoded HTML

But believe it or not, this is exactly what we need! Copy everything in the output box and paste it directly into the WordPress HTML editor – NOT the visual editor! After that, surround the pasted text with <pre> tags as shown here:

paste to HTML editor and add tags

Now when you finally revert back to the visual editor, your code should be exactly as you wanted it to be with all characters intact along with the proper spacing and formatting.

code showing as expected

Now that you’ve got your code to display as planned, you can go the extra mile and highlight it nicely so that users can easily read it as well as effortlessly copy it directly from your website.

2 Comments on “How to Preserve and Format HTML Tags in WordPress”!

  • Hello.
    Actually my problem is a different one. I want to include “Schema markup” code in the Text editor. But when I move to Visual tab, it disappears. So is there anything from the HTML code disappearing when switching tabs.

  • I thought I’d be able to switch back to the visual editor and actually see the “visual” of how the page would appear (and continue editing from there). I didn’t expect to be met with more code, however cleaned up it may be. I guess your tutorial is useful for some situations, but it’s not what I thought or need. I need to be able to actually see and design what I’m doing in the visual area without the page being all jacked up.

Leave a Reply

Your email address will not be published. Required fields are marked *