Writing Code in WordPress

In order to have code appear in your WordPress editor (as opposed to writing code and having it run), you need to put your code in some predefined tags.

The first option is <code></code>.

This will print your code, making it look like code, but still read the actual html items within those opening and closing tags.

For example, while it will read a line-break, it’s not going to print out 37 spaces in a row, as HTML only reads one space regardless of the actual number. Similarly, if you were to include &nbsp; in a code tag, it wouldn’t print out “&nbsp;,” but rather, would include a legitimate non-breaking space.

The second option is <pre></pre>.

This will print your code exactly as you have written it.

For example, if I were to include 37 spaces before the word “the” within a pre tag, it would print out 37 spaces following by the word “the.”

That said, you’ll notice that some code is still actually read by your browser, even within the pre. If were were to include “<a href=”http://ellycallison.com”>ellycallison.com</a>” within a pre tag, it would print out ellycallison.com. Therefore, it’s often important to use HTML character entities to replace “problematic” characters in our code.

HTML Character Entities

We can use these items to write our code in such a way that it will print in the way we want while preventing our browser from actually reading and running any of it.

< = &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;