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:
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:
So far so good. But see what happens when you switch back to the visual editor:
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.
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.
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:
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:
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.
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.