Writing and Publishing Code in Your WordPress Blog Posts

The issue of publishing code in WordPress blogs continues to be one that people struggle with. You find or develop code for WordPress, javascript, PHP, CSS, HTML, etc., and want to share it with your readers. Yet, when they copy and paste the code to use, it won’t work. They poke and punch the code but it won’t work.

Why?

By default, PHP, HTML, Javascript, and other web programming code will do one or both of two things when included in its original code format inside of a WordPress blog post:

1. Act like code, trying to initiate the code commands, resulting in unpredictable and ugly web page generation.
2. Be filtered out and leave gapping holes and messed up content.

Either way, it’s not pretty.

Many assume that if they use the <code> or <pre> HTML tags that the code will automatically look and act like content in a code format. Unless you are using a WordPress Plugin that automatically converts anything in those tags to a text code format, all you are doing is changing the font not the structure of the letters and symbols within the code.

Turning Code Into Text

To publish code inside of a blog post, the code must be turned into text by converting the code characters and symbols into character entities. The browser interprets these and displays them into symbols on the screen, turning the code into publishable content.

Code that begins with < is a hint to WordPress that the following content is code. Thus, unless the filters convert it to characters, WordPress tries to act upon the code.

Code with HTML URLs (addresses) can turn into links. WordPress assumes anything that starts with http:// must be an address, thus may turn it into one. You get an active link in your code, possibly a link to nowhere.

Code with quote marks and apostrophes are turned into “pretty quotes” or smart quotes. The quotes become character quotes that slant left and right depending upon their placement. These don’t convert into text quotes when copied and pasted, thus breaking code when the user tries to use it.

For example, I want to display the HTML for a link as part of a tutorial. I turn the < into the character code < so it will not turn the link code into a link:

<a href=”http://lorelle.wordpress.com/” title=”Lorelle’s article on WordPress”>Lorelle’s article on WordPress</a>

But we still have problems. If someone were to copy this and paste it into their template file, the code would not work as the quote marks are slanted. Below is a screenshot example to show you how this looks, just in case this version of WordPress or a WordPress Plugin finally fixes this problem.

When someone copies code with those slanted quote marks and apostrophes and pastes it into their template file, the code won’t work. The quote marks and apostrophes must be converted into text quote marks and apostrophes, not those pretty smart quotes.

To make the code look pretty, I converted the quote marks and other characters to HTML character entities and the results are:

<a href="http://lorelle.wordpress.com/" title="Lorelle's article on WordPress">Lorelle's article on WordPress</a>

Now, the quote marks and apostrophes are straightened up in text form, ready for copying.

With the quote marks, apostrophes, and slash marks turned into character entities and the code wrapped in a <code> tag, the underlying code looks like:

<a href="http://lorelle.wordpress.com/" title="Lorelle's article on WordPress">Lorelle's article on WordPress</a>

This is hard to read but necessary to display the code for your readers to use. The < character code replaces the < and takes the power of the code command away so the code is just text.

You may also notice that the greater than arrow (>) isn’t converted. Some versions of WordPress will automatically convert this arrow into it’s character entity code (>) or may leave it. Since there is no opening arrow to indicate this is “code”, the use of that arrow is unimportant and ignored.

To display a bit of WordPress code from a WordPress Theme which initiates the Customizable Post Listings WordPress Plugin, if it exists, it would be written like this:

See Also

Old Blogging Sites That We Thought were Gone

<?php if (function_exists('c2c_get_recent_posts')) {
  echo ('<li id="recent">Recent Articles<ul>');
 c2c_get_recent_posts(10); 
  echo ('</ul></li>');
} ?>

When published on your WordPress blog, it would look like the proper code:

<?php if (function_exists('c2c_get_recent_posts')) {
  echo ('<li id="recent">Recent Articles<ul>');
 c2c_get_recent_posts(10); 
  echo ('</ul></li>');
} ?>

The character entities convert to their proper “look” as text and code on the page. The reader can copy and paste that directly into their own code files and it should work, if the code works.

To make code work as a printable and copyable code, the most popular character codes that need converting are:

• < – <
• ” – "
• ‘ – '
• / – /

I have a longer list of conversion examples in Signatures and Writing Code.

There are many ways to convert your code into publishing content. You can do the conversion manually using a text editor with a good search and replace function. Use an online code converter or paid, shareware, or freeware code converter program. Or if you use code regularly in your WordPress blog, get a WordPress Plugin that make the job much easier from within your Write Post panel.

At all times when working with code, use a text editor not a word processor so the quote marks, apostrophes, and other code will not be automatically converted into characters which will not copy and paste well into your code files.

Publishing the Code That Writes the Code

As you’ve seen, I’ve taken the step of publishing the code that will generate the code readers will see on their browser screens. This is much harder than you may think.

Since character entity codes within the code are necessary for the code to display in its pieces, I have to convert each character entity code into something that convert and display properly.

I explain this is greater detail in my article on publishing signatures and writing code in your WordPress posts, but here is an example.

In order to display a quote mark as a text quote, and then display it as I write it, and then display it as the code it took to write it, this is the evolution of the character code:

" - " - "

As I have to break down each part of the character code in order for those parts to display, replacing each character code element with its printable equivalent, the underlying code gets longer and longer, and much more complicated to read. And very hard work.