{"id":10851352,"date":"2018-11-06T03:54:27","date_gmt":"2018-11-06T03:54:27","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=10851352"},"modified":"2023-01-16T13:22:51","modified_gmt":"2023-01-16T13:22:51","slug":"write-code-in-your-posts-classic-editor","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/write-code-in-your-posts-classic-editor\/","title":{"rendered":"Write code in your posts (Classic Editor)"},"content":{"rendered":"\n

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

By default, the way a piece of code written or pasted to WordPress post editor<\/a> 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 < and > character entity<\/a> 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<\/a> 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.<\/p>\n\n\n\n

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<\/a> was found within the post, the tag was left as it was, allowing for its interpretation in a web browser.<\/p>\n\n\n\n

Code Within Paragraphs<\/h2>\n\n\n\n

The HTML tag which will turn text into a monospaced<\/code> 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.<\/p>\n\n\n\n

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.<\/pre>\n\n\n\n
This is great for making a piece of non-HTML text look like code, but what about HTML tags that you want to showcase?<\/p>\n\n\n\n
In the header.php template file,
look for the <code><div class=\"header\"><\/code>
section to change the <code><h1><\/code> heading.<\/pre>\n\n\n\n
Using the <code><\/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><\/code> tag followed by a <div><\/code> tag and so it responds by creating a new container in your web page. <\/p>\n\n\n\n
To avoid this behavior, use character entities or extended characters<\/a> 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:<\/p>\n\n\n\n
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.

<\/pre>\n\n\n\n
URLs Within Paragraphs<\/h2>\n\n\n\n
By default, WordPress will turn any phrase that begins with http:<\/em> 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<\/code><\/em> and having it turn into a link, you can use extended characters for the slashes, so WordPress won’t “see” the link:<\/p>\n\n\n\n
...link to a specific WordPress post using 
<code>http:& amp;#47;& amp;#47;example.com& amp;#47;index.php?p=453<\/code>
in your post....<\/pre>\n\n\n\n
Note: Take off Space between ‘&’ and ‘amp’.<\/p>\n\n\n\n
List of Related Character Entities<\/h2>\n\n\n\n
Here is a list of some HTML character entities related to the topic of this article:<\/p>\n\n\n
(less than) = &lt; or &#060;\n(greater than) = &gt; or &#062;\n\/ = &#047;\n] = &#093;\n[ = &#091;\n" = &quot; or &#034;\n' = &#039;\n\u201c = &ldquo; or &#8220;\n\u201d = &rdquo; or &#8220;\n\u2018 = &lsquo; or &#8216;\n\u2019 = &rsquo; or &#8217;\n(ampersand) = &amp; or &#038;<\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
Using the\u00a0<pre>\u00a0tag<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
The <pre> tag instructs the browser to use a monospaced font, but to exactly reproduce<\/em> whatever is inside of the <pre>tags. Every space, line break, every bit of code is exactly reproduced.<\/p>\n\n\n\n
<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....<\/pre>\n\n\n\n
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<\/em>.<\/p>\n\n\n\n
By exactly<\/em>, we mean EXACTLY. If you have a long line of code, it will run off the page because there are no instructions<\/em>which tell the code to wrap. It won’t. Here is an example:<\/p>\n\n\n\n
<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....<\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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\u00a0PHP\u00a0file, or using one of the many\u00a0online pastebins\u00a0which are available for temporarily showcasing code.<\/p>\n\n\n\n
Troubleshooting Codes<\/h2>\n\n\n\n
Writing code within a WordPress post can be a challenge, maybe forcing you to override the WordPress default styles and to use filters which “fix” what we write. If you are having trouble with writing code within your WordPress post, this section might help.<\/p>\n\n\n\n
Quotes Auto-correction<\/h3>\n\n\n\n
A frequent problem when using codes within your post is the quotes auto-correction feature of WordPress, mostly known from word processing software. By default, when serving a web page, WordPress converts the “<\/strong>straight“<\/strong> quotes into the opening and closing \u201ccurly\u201d quotation marks according to your WordPress installation language<\/a> set in the wp-config.php<\/em> file. Note that the auto-correction (also called smart quotes) feature is applied regardless of whether you have written the quotes in visual or HTML post editor.<\/p>\n\n\n\n
In HTML post editor, you can avoid this problem by wrapping the quotes with the <code>, <tt> or <pre> tags.\u00a0Other solution is replacing quotes with their respective character entities, e.g. using:<\/p>\n\n\n\n
<code><p class=& #34;red& #34;><\/code>    \/\/ Take off space between & and #<\/pre>\n\n\n\n
instead of:<\/p>\n\n\n\n
<p class=\"red\"><\/pre>\n\n\n\n
Note that in some older versions of WordPress, if you edited a page again after publishing it, the HTML editor replaced all these entities with their literal equivalents. For example, if you carefully used &#34 for your quotes, they would have come back as “, and if saved, the auto-correction feature would have an effect on them.<\/p>\n\n\n\n
Resources<\/h2>\n\n\n\n