This post is for those that are using the Classic Editor, not Gutenberg!

Are you using the Text editor to write your posts, and not the Visual one, like I am? And have you ever added a piece of code that didn’t appear properly or it messed up your post even if you wrapped in the <code></code> tag?

Well, that’s because the Text editor doesn’t act like the Visual editor, which converts the code and makes it look like actual code and not behave like one.

I’m not a web developer myself, but I’m not a complete stranger to it either. I’ve shared many tips and fixes in our blog posts that require adding a bit of simple code, nothing fancy.

Adding code in WordPress without messing up your post

Let’s add a code in the Text editor and just wrap it in the <code></code> tag to see what happens.

Wrapping the HTML code in the <code></code> tag will change its font and style, depending on the theme, so it can highlight the code and differentiate it from the ordinary text; this way, the readers can also see and understand better.

I’ll add this simple HTML code in a post for our example: <code><div class="container"></div></code>.

This is what happened:

As you can clearly see, it ruined the layout, and the second row doesn’t even appear anymore.

What’s the problem?
The Text editor, which is also called the HTML editor, considers that real HTML code that you actually added to change the layout or style of the post. It doesn’t treat it like ordinary text, as the Visual editor does.

What’s the fix?
The fix consists in simply changing the brackets < and > with < and >. This < stands for < and this > stands for >.

So, in order for our example to work, I’ll need to change the brackets with the special characters I showed you.

As you can see, I didn’t change the brackets of the <code></code> tag too. You just need to change the brackets of the code itself.

Let’s see how does the post look now.

Now the post looks like it supposed to and the code is displayed properly.

You could add the code in the Visual editor and then switch back to Text, and it will automatically be converted, but I’d avoid switching from Text to Visual a lot.

If you happen to paste or write a piece of code that has a mistake, and then switch to Visual, that “mistake” will get converted, and you could end up having a lot of things messed up when you switch back to the Text editor.

That’s a wrap

Hope you found the post comprehensive and useful!

If you have any thoughts, suggestions or questions, please drop a comment, contact us, or message us on Facebook.

Don’t forget to share the article with your friends!