WordPress:Writing Code in Your Posts
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 javascripts, putting code in your post that "looks" like code, but "doesn't behave" like code, is a frequent challenge for bloggers.
By default, WordPress will convert unrecognized uses of < and > into characters which actually look like < and >, which will "look" like a < and a > when posted. Or, if it finds the use of an HTML tag within the post, it will use the tag like it is HTML and you will have funky looking text and a messed up layout.
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 box of code
Code Within Paragraphs
There are two HTML tags which will turn text into monospaced type. 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 normal language.
This is an example of code used within a paragraph to talk about the <code>index.php</code>, <code>sidebar.php</code>, and <code>header.php</code> template files in WordPress.
This is great for using the tag around words that you want to look like code, but what about tags like HTML that you want to showcase?
In the <code>header.php</code> 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 strip the HTML references from the post. It sees the <code> tag and then it sees the div and so it responds by creating a new container in your web page. WordPress thinks that you are actually using HTML tags, and the start of an h1 tag will screw up your entire web page layout and design.
To make WordPress recognize this as code within a paragraph, use character entities or extended characters to represent the left and right arrows and surround them with the <code> tags.
In the <code>header.php</code> template file, look for the <code><div class="header"></code> section to change the <code><h1></code> heading.
By default, WordPress will turn any phrase in the text 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 <code>http://example.com/index.php?p=453</code> in your post....
Here is a list of the most common HTML character entities:
< = < > = > / = / ] = ] [ = [ " = " ' = '
There is a list of [[WordPress:#Resources|resources below]] which will help you turn HTML tags into character entities automatically, so you don't have to memorize these character codes.
Using PRE
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 the monospace code 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 I....
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 PHPS file, or using one of the many online pastebins which are available for temporarily showcasing code.
Troubleshooting Codes
Writing code within a WordPress post can be a challenge, overriding WordPress' default styles and filters which "fix" what we write. If you are having trouble with writing code within your WordPress post, these might help.
Quotes in Codes
A frequent problem using codes within your post is WordPress' technique of "styling" quote marks. Instead of seeing "quotes", by default WordPress texturizes the quotes into open and closed quotes, like the quotes used in many word processing programs. Code that is to be copied needs to have the straight quotes, not the pretty quotes.
You can avoid this problem by using the <pre> tag or by actually including the character code for the quotes in the usage:
<p class="red"> becomes <code><p class="red"></code>
Unfortunately, if you edit a page after first publishing it, the html code editor replaces all these entities with their literal equivalents, so, for example, if you carefully use " for your quotes, they'll come back as " and so when you save, they'll be converted.
Styling Your Code Tags
By default, using <pre> and <code> will put the text in a monospaced font and use the font-size from the body tag. What if you want the font-size to be different, and the look of these tags to also have a different color or style to them?
In your style.css style sheet in your WordPress Theme folder, add styles to these two tags. Here is an example:
pre {border: solid 1px blue;
font-size: 1.3 em;
color: blue;
margin: 10px;
padding:10px;
background: #FFFFB3}
code {font-size:1.2em;
color: #008099}
Using the <code> would look like that and the pre would look like this:
font-size: 1.3 em;
color: blue;
margin: 10px;
padding:10px;
background: #FFFFB3}
code {font-size:1.2em;
Resources
- WordPress:Fun Character Entities
- WordPress Resource Tools Encode
- Tamba2's Simple Code Converter
- HTMLizer Data
Frequent Code User
If you consistently use a lot of formulas, functions, and programming code in your posts, consider using a plugin or PHP tool to make the entire process easier. If you tend to post a LOT of code blocks, consider pasting the code in a Paste Bin and linking to it on your site.
- Code Filter WordPress Plugin - Auto-converts < and > inside of <code>
- Coffee2code's Preserve Code Formatting WordPress Plugin
- QuickCode WordPress Plugin - Hides/unhides formatted blocks of code.
- MathML Embedding
- ASCIIMath Markups
- Using ASCIIMath
- LaTex - A document preparation system
- Using LaTeX in WordPress
- FigureRender - Another LaTeX rendering plugin
- How to Build Dean Lee's Plugin - A plugin for GeSHi - Generic Syntax Highlighter