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

> This is a tutorial on how to paste code in WordPress and maintain the indentation, as well as all the special characters without messing up the formatting.

- Author: [Bhagwad Park](https://www.namehero.com/blog/author/bhagwad-park/)
- Published: 2018-09-17
- Updated: 2018-09-17
- Category: [WordPress](https://www.namehero.com/blog/category/wordpress/)
- Web page: https://www.namehero.com/blog/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:

[![Code with Proper Indentation](https://www.namehero.com/blog/wp-content/uploads/2018/09/Code-with-Proper-Indentation.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Code-with-Proper-Indentation.png)

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

[![Lost Indentation](https://www.namehero.com/blog/wp-content/uploads/2018/09/Lost-Indentation.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Lost-Indentation.png)

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:

[![Enclose in pre Tags](https://www.namehero.com/blog/wp-content/uploads/2018/09/Enclose-in-pre-Tags.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Enclose-in-pre-Tags.png)

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:

[![Maintain Indentation](https://www.namehero.com/blog/wp-content/uploads/2018/09/Maintain-Indentation.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Maintain-Indentation.png)

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](https://www.namehero.com/blog/how-to-insert-a-html-design-in-wordpress-without-modifications/). 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:

[![Another Code Sample with Pre](https://www.namehero.com/blog/wp-content/uploads/2018/09/Another-Code-Sample-with-Pre.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Another-Code-Sample-with-Pre.png)

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

[![Pre Doesnt Work](https://www.namehero.com/blog/wp-content/uploads/2018/09/Pre-Doesnt-Work.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Pre-Doesnt-Work.png)

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](https://opinionatedgeek.com/Codecs/HtmlEncoder) for years. Simply paste your code into the first box, and click “Encode” as shown here:

[![Encode First](https://www.namehero.com/blog/wp-content/uploads/2018/09/Encode-First.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Encode-First.png)

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:

[![Pre with Pre-Encoding](https://www.namehero.com/blog/wp-content/uploads/2018/09/Pre-with-Pre-Encoding.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Pre-with-Pre-Encoding.png)

And now you will have the perfect output of code:

[![How to Paste Code](https://www.namehero.com/blog/wp-content/uploads/2018/09/Perfect-Code.png)](https://www.namehero.com/blog/wp-content/uploads/2018/09/Perfect-Code.png)

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.

## Related posts

- [How To Clean WordPress Of Jetpack Junk Code](https://www.namehero.com/blog/how-to-clean-wordpress-of-jetpack-junk-code/)
- [Writing Custom CSS Code For WordPress Blocks](https://www.namehero.com/blog/writing-custom-css-code-for-wordpress-blocks/)
- [Add Code To WordPress Body Tag With Version 5.2](https://www.namehero.com/blog/add-code-to-wordpress-body-tag-with-version-5-2/)
- [Where To Put Custom Code In WordPress (Hint: Use a Plugin)](https://www.namehero.com/blog/where-to-put-custom-code-in-wordpress-hint-use-a-plugin/)