Writing Code in Your Posts

By August 28, 2015 Wordpress No Comments

Whether you write plugins or hacks for WordPress, or you want to add bits and pieces of code about your own WordPress site or other programming code like HTML, CSS, PHP or JavaScript, putting code in your post that actually looks like code, but doesn’t behave like code, is a frequent challenge for bloggers.

By default, the way a piece of code written or pasted to WordPress post editor is interpreted depends on whether you use visual or HTML post editor. Visual editor will consider the code to be an ordinary text, converting (encoding) the < and > characters into their &lt; and &gt; character entity equivalents, so that the code is not interpreted by a web browser. Quotes are converted too, but remember that by default, WordPress also applies auto-correction so that the text is quoted properly according to your language specifics. HTML editor does not convert any of these characters, so be aware that HTML and CSS markup you use in your code examples will be recognized by a web browser and you may end up with a funky looking text and a messed up layout.

Note that this behavior may differ with respect to the WordPress version, post editor and other plugins used. In some older versions of WordPress, unrecognized uses of the < and > characters were converted into the &lt; and &gt; character entities, and when an HTML tag was found within the post, the tag was left as it was, allowing for its interpretation in a web browser.

In general, there are two uses of code within a web page. There is code found within a paragraph to make a point about the code that is being discussed, and then there is code that is highlighted…

…in such a way as to look 
like a block of code.

Code Within Paragraphs

There are two HTML tags which will turn text into a monospaced font. They are <code> and <tt>. The latter is rarely used today, replaced by the more useful and semantically correct <code>, which distinguishes text that is computer code from natural language.

This is an example which mentions code within a paragraph,
namely the functions <code>wp_title()</code>, 
<code>wp_content()</code> and <code>wp_footer()</code>, 
which are very useful in WordPress.

This is great for making a piece of non-HTML text look like code, but what about HTML tags that you want to showcase?

In the header.php template file, 
look for the <code><div class="header"></code> 
section to change the <code><h1></code> heading.

Using the <code> tag doesn’t tell WordPress to encode HTML markup within the tag or strip it from the post. WordPress thinks that you are using this markup for formatting, leaving it untouched. A web browser then sees a <code> tag followed by a <div> tag and so it responds by creating a new container in your web page.

To avoid this behavior, use character entities or extended characters to represent the left and right arrow characters in a way that is not recognized as the beginning and end of an HTML tag by a web browser, like this:

In the header.php template file, 
look for the <code>&lt;div class="header"&gt;</code> 
section to change the <code>&lt;h1&gt;</code> heading.

URLs Within Paragraphs

By default, WordPress will turn any phrase that begins with http: into a link. If you are giving an example of how to link to a specific post within a WordPress site, instead of using the link with http://example.com/index.php?p=453 and having it turn into a link, you can use extended characters for the slashes, so WordPress won’t “see” the link.

...link to a specific WordPress post using 
in your post....

List of Related Character Entities

Here is a list of some HTML character entities related to the topic of this article:

< = &lt; or &#60;
> = &gt; or &#62;
/ = &#47;  	
] = &#93;
[ = &#91;
" = &quot; or &#34;
' = &#39;
“ = &ldquo; or &#8220;
” = &rdquo; or &#8220;
‘ = &lsquo; or &#8216;
’ = &rsquo; or &#8217;
& = &amp; or &#38;

There is a list of resources below which will help you turn HTML tags into character entities automatically, so you don’t have to memorize these character codes.

Using the <pre> tag

To set your code aside so that it looks like a box of code which may be copied and pasted within other code or template file, you can use the <pre> HTML tag.

The <pre> tag instructs the browser to use a monospaced font, but to exactly reproduce whatever is inside of the <pre> tags. Every space, line break, every bit of code is exactly reproduced.

<h3>Section Three Title</h3>
<p>This is the start of a 
<a title="article on relationships" href="goodtalk.php">
good relationship</a> between you and me....

Using the <pre> tag isn’t very “pretty” but it does the job. Examples of how to style it can be found in the next section. Still, it showcases the code exactly.

By exactly, we mean EXACTLY. If you have a long line of code, it will run off the page because there are no instructions which tell the code to wrap. It won’t. Here is an example:

<h3>Section Three Title</h3><p>This is the start of a <a title="article on relationships" href="goodtalk.php">good relationship</a> between you and I and I think you should read it because it is important that we have these little <a title="article on communication" href="communication.php">conversations</a> once in a while to let each other know how we feel....

Not pretty, is it. To avoid this screen run-off, put in line breaks. Unfortunately, deciding where to put those line breaks in when you are showcasing code that will be copied makes it a difficult decision.

If you are familiar with programming language, you will know when a line break won’t mess up a line of code, so choose there. If you are unfamiliar with where to put line breaks, experiment. Put the code in, make the line breaks, and then test the code. If it works, then use the line break there. If not, change the line break position.

If you have long lines of code, consider showcasing only excerpts and providing a link to the full code placed on your site in a text or PHP file, or using one of the many online pastebins which are available for temporarily showcasing code.