WordPress has the ability to automatically format code in the text editor to better suit posts and pages. Unfortunately, the auto formatting can cause problems and break the code snippet. However, you can stop WordPress from formatting HTML quite easily.
This will let you use code snippets without WordPress trying to convert it. And depending on the snippet, this could save a lot of aggravation.
In this tutorial, I’ll show you how to easily stop TinyMCE from changing HTML in WordPress. This will focus more on the WYSIWYG editor and how you can use exact coding in the text system to show on posts or pages.
Using HTML Editor Syntax Highlighter
Today, I’ll show you a bit of what you can do with HTML Editor Syntax Highlighter. It’s a plugin that will give you coding control of posts and pages through the text editor of the WordPress WYSIWYG.
It also comes with a variety of customization options including auto-completion when entering code.
Install and activate, “HTML Editor Syntax Highlighter.”
Upon activation, the plugin will automatically convert the text editor to allow unformatted coding.
Let’s take a look at what this tool does.
Create a new post or open an existing one.
Go to the “Text” editor of WordPress. This might open by default depending on how you create content for your website.
By default, you’ll see a black screen ready for coding. This is the raw form of what your post looks like. The plugin will stop WordPress from changing any code you place into this section.
Changing Options in the Editor
You’ll notice a gear icon on the top right of the editing screen. This is where you’ll find the settings and options for HTML Editor Syntax Highlighter.
Click the gear icon in the top right corner.
This will expand to show a variety of settings you can change. For instance, you can use the drop-down to change the theme of the editor and how it appears to you.
You can also modify the default line height, font size, whether you want to show the code line numbering system or how line wrap functions.
These are completely optional settings you can determine based on what you want to see and develop.
However, let’s take a look at some of the plugin’s functionality options.
Click the “more…” link from the settings bar.
In the advanced options, you can choose to highlight certain parts of your code or selection matches according to the word used. You can also enable the auto-completion feature which will populate the closing tags or brackets while entering code.
To select an option, click the check box next to the feature to enable it.
Click the “X” icon to close the option screen.
This will take you back to the WordPress editor and the HTML screen.
Stop WordPress from Changing Code
For those who have fewer skill in HTML, the auto-formatting ability of WordPress is useful. However, some of the more experienced people may feel frustrated when the system tries to correct elements.
With plugins like this, you can stop WordPress from formatting HTML so your code will work exactly as intended.
How often do you add HTML elements to your posts and pages? Do you prefer developing posts and pages with the visual or text editor?
Author: Michael Brockbank
Michael has been in the tech industry in some form or another since the late 1990s. He’s built a variety of websites using HTML, Joomla and WordPress. Starting his freelance writing career in 2012, he’s completed thousands of projects world-wide covering a wide scope of topics. Michael is currently the Content Marketing Team Lead. Today, he manages a team of writers to create tutorials, blog posts and support content for customers. Outside of GreenGeeks, he manages a YouTube channel that helps others learn how to become freelance writers, bloggers and overall professionals.