Write codes in your posts by WordPress

37. Write codes in your posts by WordPress.

No matter if 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, PHPor JavaScript, putting code in your post which literally looks like code, but doesn’t behave like code, well, that’s a frequent challenge for bloggers.

Therefore, the way a piece of code is written or pasted to WordPress post editor is interpreted depends on if you’re using visual or HTML post editor. Since 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 either, but you should remember that by default, WordPress also does auto-correction so that the text is quoted properly according to your language. HTML editor doesn’t convert any of these characters, so you must 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 bad looking text and a messed up layout.

Remember that this behavior may differ according 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 like it was, allowing for its interpretation in a web browser.

Mainly there are only two uses of code within a web page. The code found within a paragraph to make a point about the code that is being discussed, and then there is code that is highlighted.

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

If you use the <code> tag it 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, and leaves it untouched. A web browser sees a <code> tag followed by a <div> tag and so it responds by creating a new container in your web page. Similarly, it sees the start of an <h1> tag which will screw up your entire web page layout and design.

To avoid this kind of behavior, you should 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.

WordPress can 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 just use extended characters for the slashes, so WordPress won’t “see” the link. And 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;

This much about writing codes in your posts in WordPress.org!

Share this!

Leave a Comment

Your email address will not be published. Required fields are marked *