Inserting Source Code Into WordPress Posts and Pages

With traditional web page editing, you can insert HTML and JavaScript into the source code of your web pages without a "system" changing your code.

But not with WordPress. You'll need to do things differently to prevent WordPress from corrupting your source code.

There are two ways to get your source code into WordPress posts and pages without it being changed on you.

Method 1 —

Use the Text tab instead of the Visual tab when typing or pasting in your code. And, this is important, make your code all one line.

If it's not all one line, the moment you use the Visual tab on the same post or page, WordPress is likely to insert <br> and <p> tags into your source code. If there are blank lines, they will get <p> tags. Otherwise, line breaks will get <br> tags.

A technique to make the code all one line is to create and test your source code on a regular web page. When it's working as it should, make the source code all one line. (Because there may be code that's line-break sensitive, verify it still works by testing the one-line version on a regular web page.)

The one-line version of the source code can now be pasted into the WordPress Text tab edit box.

Usually, this method works. If it doesn't for your particular code, you can try method 2.

Method 2 —

Create and test your source code on a regular web page. Then, create a text file with the source code and upload it to your server. Make a note of its URL. (The uploaded text file can have any text file name extension. Either .txt or .html would work.)

Use the Insert Here plugin's shortcode to retrieve your source code at its URL and insert it into the WordPress post or page.

Will Bontrager