When you look at the WordPress default editor, you have two options: Visual or HTML. If you use the Visual editor, it will look at code as ordinary text so it will convert (encode) a < character into <. This will prevent the code from being interpreted by a web browser.
In contrast, if you use the HTML option, none of these characters are converted so if you use HTML and CSS (as an example), this code WILL be recognized by your browser and can cause real havoc with your layout.
Other factors are the version of WordPress, the post editor used, and the types of plug-ins you have on your system. Here are some solutions to the problem:
10 Tips for Writing Code in WordPress Posts
Use code In Posts
A simple way of displaying code is to use the code tag in posts. An example is code sample text code. With this sample the text will look like a code sample but things can get really messy if you use an actual piece of code.
Convert Part of the Code into Character Entities or Extended Characters
To elaborate if you use the following: code “div id=”menu2”, WordPress will think that the code used between the code tags is for formatting. This could make a real mess of your layout. The way to solve the problem is to convert the symbols into HTML codes. To elaborate the “<” symbol is converted into <. Following this logic, the code above would be rewritten as: code <div id=”menu2”> code.
How to Write URL’s within Paragraphs
If you write text for a link like this: “https://yourassetrecovery.net/?page_id=2”, WordPress will turn the text into a link. To solve the problem, change the slashes “/” into extended characters.
Here’s the link rewritten accordingly: code http://yourassetrecovery.net/?page_id=2 code. This will solve the problem.
Use the pre Tag
The pre tag tells the browser to use a monospaced font and to showcase what is inside the pre tags, exactly as written. If you have long lines of text, you will need to create breaks or the text will run off the page.
Here is an example:
pre
body {
font:13px Arial Narrow;
letter-spacing:1px;
}
pre
Problems with Code
One problem you could run into is with the use of quotes in the text. While you could solve that using the pre or code tags, another way is to replace the quotes with their corresponding character entities. So a piece of code written as: div id=”footer”
Would be rewritten as: <div id: "footer " >
Use Pastebin to Style Your Code
You can copy code into Pastebin and it will style your code for WordPress.
Turn the Code into an Image
A simple way of dealing with the problem is to use a program like Techsmith SnagIt to create a screen capture of the code. You can load the image into the post and it won’t trigger any of the problems discussed above.
While a screen capture can preserve code highlighting, it has also produced a microscopic result because of a long line of text. This is easily fixed by changing the size of the user interface then copying the text.
Use GitHub Gist
This is a simple way to share code with others. Name the file, choose the language, paste in the code, leave ACE Editor enabled, choose the style of indent (2, 4, or 8) and click on either Create secret Gist or Create Public Gist.
Make Use of HTML Codes
Check out the HTML Codes page for characters and symbols.
Use Fun Character Entities
In this section is a link to more Character Entities, which can look strange on your page. These are bits of code which your browser interprets as symbols.
Conclusion
As you can see, setting your code to display properly in WordPress can be a challenge. We have covered many things you can do and in the resources section below there are plug-ins and more which you can access. With these tools your code display problems should be a thing of the past.
