How To Paste Code In WordPress “As Is” With Perfect Formatting

WordPress was built for writing “normal” articles (Until Gutenberg that is!). It’s never been able to properly format code in posts. A bunch of problems crop up when trying to insert code into WordPress like:

1. Losing indentation
2. Incorrect HTML encoding
3. Inability to write HTML code without breaking the editor

In this tutorial, I’m going to show you a method to past all code into WordPress without a hitch, and with perfect formatting. I’ve been using it myself for years, and it’s perfect. So let’s start.

Method 1: The “Imperfect” Way – Doesn’t Always Word

Let’s say I have the following code with proper indentation etc in Notepad:

Here’s what happens when I paste it directly into the WordPress editor:

As you can see, I completely lose all indentation. And a code without proper indentation makes everyone sad. So the best way to paste a lot of code (especially PHP code) is to go to the “Text” tab, and enclose your code between <pre> tags like this:

Simply put your code between these two:

<pre>
.
.
</pre>

And you’re done! With these changes, your code will render properly with the correct indentation as shown here:

You might notice, that WordPress has escaped a lot of HTML characters are replaced them with their HTML entity equivalents.

Method 2: When Method 1 Doesn’t Work

The first method shown here works fine for a lot of code solutions. If you search online for how to paste code into WordPress, most of the tutorial will give you Method 1 and tell you to enclose it within <pre> tags.

Unfortunately, that doesn’t always work.

For example, a little while ago, I’d written a tutorial on how to insert HTML designs into WordPress. The code for that was:

function html_func( $atts, $content = null) {

    $html_code = <<<EOT
<div style="
    border: solid;
">
<div>This is some text</div>
<div>This is another line of text</div>
</div>
EOT;
return $html_code;
}
add_shortcode( 'html', 'html_func' );

Now we can try Method 1 with this and enclose it within <pre> tags as shown here:

Unfortunately, this completely messes up the design when you switch back to the normal view like this:

The reason this happens is because the code contains HTML characters that impact how the page renders. So while the WordPress editor handles certain characters well, and converts them appropriately, HTML tags and characters are still messed up.

To fix this, we need to perform the encoding ourselves before pasting into WordPress. You can use any HTML encoding tool, but I’ve been using this one for years. Simply paste your code into the first box, and click “Encode” as shown here:

Now take the results of the second box, and then paste it into the “Text” tab of the WordPress editor, enclosed between <pre> tags like this:

And now you will have the perfect output of code:

Method 2 is pretty foolproof and works for all code, regardless of language – especially for HTML. The fact that we encode it before pasting, means that all the dangerous characters that can confuse WordPress are removed right at the start. You can see in the “encoded” version, that the tool has replaced a lot of stuff.

Note that if you use code a lot on your site, you might want to add additional features like syntax highlighting, and easy tools for viewers to copy and paste. I’ll cover that functionality in another article, but for now, it’s enough to be able to paste code accurately into WordPress with proper indentation, and without messing up your formatting.