10 Tips for Writing Code in WordPress Posts

In this article we look at 10 tips for writing code in WordPress posts. Depending on the nature of your blog, there might be times when you want to use pieces of code (such as HTML, CSS, PHP, or JavaScript) within your posts. The challenge is to make the code appear as code without being executed.

 

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 &lt;. 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:

1.      1. 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.

 

2.      2. Convert Part of the Code into Character Entities or Extended Characters: To elaborate, if you use the following: <code><div id=”menu2″></code>, 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 &lt;. Following this logic, the code above would be rewritten as: <code>&lt;div id=”menu2”&gt;<code>.

 

3.      3. How to Write URL’s within Paragraphs: If you write text for a link like this: http://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:&#47;&#47;yourassetrecovery.net&#47;?page_id=2</code>.  This will solve the problem.

 

4.      4. 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>

 

5.      5. 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: &lt;div id: &quot;footer &quot; &gt;

 

6.      6. Use Pastebin to Style Your Code: You can copy code into Pastebin and it will style your code for WordPress.

           

            The upper section of this screen shot is what the code will look like in a WordPress post.

           

            The actual post in WordPress.

7.      7. 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.

 

Here is an example using Adobe Dreamweaver. 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.

 

Here is the result.

8.      8. 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.

 

 

 

The page where you can download the Gist.

 

9.      9. Make Use of HTML Codes: Check out the HTML Codes page for characters and symbols.

 

 

 

Here is a sample of what you can expect to find.

 

10 10. 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.

 

Here is a sampling of these.

 

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.

 

Resources and Plug-Ins

·         Writing Code in Your Posts

·         How to Display Code in WordPress Posts

·         TinyMCE Advanced

·         9 Syntax Highlighter Plug-Ins and Services