Posting Usable Code in WordPress With No Plugins

Due to the fact that Worpress decided to get rid of the “Press It” function until 2.6, I have recently had the need to post the code that will allow you to use the “Press It” feature on your own.

As it turns out, it is supposedly very hard to post code in WordPress. If you just copy and paste your code in, WordPress will turn your quote marks into “Smart Quotes”. They look pretty, but do not work with code. So I set about finding a plugin or some other method to correct this.

Everywhere I looked people were recommending different methods. From using plugins and custom fields, to manually editing, and to online converters. I tried them all, but they either didn’t display the code correctly, or messed up my formatting site wide.

So here is my solution, it may have been suggested before, but I sure couldn’t find it with hours of searching and testing. Simply insert this code into your style sheet:

pre {
width: 95%;
overflow: auto;
padding: 10px;
margin: 1em auto;
font-family: "Courier New", Courier, mono;
background-color: #ddd;
color: #555;
border: 1px dotted #999;
}

Now, when you paste your code into the WordPress editor, highlight it, and select the preformatted option from the “Format” drop down menu.

location of the format menu in the wordpress post editor

The pre tag will preserve your quote marks, spacing, indenting, and other elements.

And thats all you have to do. Your code will work when copied and pasted from the browser. If you have a long line of code, instead of running over everything, this will make a horizontal scroll bar to contain it.

Note: WordPress may apply separate <pre> tags to each line when you select it from the drop-down menu. (I have no idea why, it defeats the whole purpose of <pre> tags) To get around this, either manually add <pre> and </pre> before and after the text under the HTML tab in the edit screen, or apply the formatting with the code all as one line, and add the line breaks in afterward.

SHARE IT:

Commenting area

  1. Ah, you’ve found the trick that many think is the solution. However, it doesn’t apply across all code. I’ve been writing and publishing code in web pages for over a decade and if there was such an easy answer to this, I’d have done it a long time ago. 😀 Though, newer versions of WordPress are now more able to publishing code in posts.

    A Plugin or converting it manually is the only technique that works on HTML, PHP, and other code a browser may recognize and act upon. The PRE should be styled accordingly by all WordPress Theme designers, but they often forget that style. Good for you for adding it to your Theme. Test your post thoroughly before publishing it to make sure that the code you publish is reproducible text and not “code”.

Leave a Reply