Writing and Publishing Code in Your WordPress Blog Posts

Filed as Features on July 16, 2007 4:20 am

The issue of publishing code in WordPress blogs continues to be one that people struggle with. You find or develop code for WordPress, javascript, PHP, CSS, HTML, etc., and want to share it with your readers. Yet, when they copy and paste the code to use, it won’t work. They poke and punch the code but it won’t work.

Why?

By default, PHP, HTML, Javascript, and other web programming code will do one or both of two things when included in its original code format inside of a WordPress blog post:

  1. Act like code, trying to initiate the code commands, resulting in unpredictable and ugly web page generation.
  2. Be filtered out and leave gapping holes and messed up content.

Either way, it’s not pretty.

Many assume that if they use the <code> or <pre> HTML tags that the code will automatically look and act like content in a code format. Unless you are using a WordPress Plugin that automatically converts anything in those tags to a text code format, all you are doing is changing the font not the structure of the letters and symbols within the code.

Turning Code Into Text

To publish code inside of a blog post, the code must be turned into text by converting the code characters and symbols into character entities. The browser interprets these and displays them into symbols on the screen, turning the code into publishable content.

Code that begins with < is a hint to WordPress that the following content is code. Thus, unless the filters convert it to characters, WordPress tries to act upon the code.

Code with HTML URLs (addresses) can turn into links. WordPress assumes anything that starts with http:// must be an address, thus may turn it into one. You get an active link in your code, possibly a link to nowhere.

Code with quote marks and apostrophes are turned into “pretty quotes” or smart quotes. The quotes become character quotes that slant left and right depending upon their placement. These don’t convert into text quotes when copied and pasted, thus breaking code when the user tries to use it.

For example, I want to display the HTML for a link as part of a tutorial. I turn the < into the character code &lt; so it will not turn the link code into a link:


<a href=”http://lorelle.wordpress.com/” title=”Lorelle’s article on WordPress”>Lorelle’s article on WordPress</a>


But we still have problems. If someone were to copy this and paste it into their template file, the code would not work as the quote marks are slanted. Below is a screenshot example to show you how this looks, just in case this version of WordPress or a WordPress Plugin finally fixes this problem.

Example of how not to publish code in blog posts with pretty quote marks

When someone copies code with those slanted quote marks and apostrophes and pastes it into their template file, the code won’t work. The quote marks and apostrophes must be converted into text quote marks and apostrophes, not those pretty smart quotes.

To make the code look pretty, I converted the quote marks and other characters to HTML character entities and the results are:

<a href="http://lorelle.wordpress.com/" title="Lorelle's article on WordPress">Lorelle's article on WordPress</a>

Now, the quote marks and apostrophes are straightened up in text form, ready for copying.

With the quote marks, apostrophes, and slash marks turned into character entities and the code wrapped in a <code> tag, the underlying code looks like:

&lt;a href=&#34;http:&#47;&#47;lorelle.wordpress.com/&#34; title=&#34;Lorelle&#39;s article on WordPress&#34;>Lorelle's article on WordPress&lt;/a>

This is hard to read but necessary to display the code for your readers to use. The &lt; character code replaces the < and takes the power of the code command away so the code is just text.

You may also notice that the greater than arrow (>) isn’t converted. Some versions of WordPress will automatically convert this arrow into it’s character entity code (&gt;) or may leave it. Since there is no opening arrow to indicate this is “code”, the use of that arrow is unimportant and ignored.

To display a bit of WordPress code from a WordPress Theme which initiates the Customizable Post Listings WordPress Plugin, if it exists, it would be written like this:

&lt;?php if (function_exists(&#39;c2c_get_recent_posts&#39;)) {
  echo (&#39;&lt;li id=&#34;recent&#34;>Recent Articles&lt;ul>&#39;);
 c2c_get_recent_posts(10); 
  echo (&#39;&lt;/ul>&lt;/li>&#39;);
} ?>

When published on your WordPress blog, it would look like the proper code:

<?php if (function_exists('c2c_get_recent_posts')) {
  echo ('<li id="recent">Recent Articles<ul>');
 c2c_get_recent_posts(10); 
  echo ('</ul></li>');
} ?>

The character entities convert to their proper “look” as text and code on the page. The reader can copy and paste that directly into their own code files and it should work, if the code works.

To make code work as a printable and copyable code, the most popular character codes that need converting are:

  • < – &lt;
  • ” – &#34;
  • ‘ – &#39;
  • / – &#47;

I have a longer list of conversion examples in Signatures and Writing Code.

There are many ways to convert your code into publishing content. You can do the conversion manually using a text editor with a good search and replace function. Use an online code converter or paid, shareware, or freeware code converter program. Or if you use code regularly in your WordPress blog, get a WordPress Plugin that make the job much easier from within your Write Post panel.

To use an online or downloadable program to convert code to something publishable on your blog, consider the following:

At all times when working with code, use a text editor not a word processor so the quote marks, apostrophes, and other code will not be automatically converted into characters which will not copy and paste well into your code files.

Publishing the Code That Writes the Code

As you’ve seen, I’ve taken the step of publishing the code that will generate the code readers will see on their browser screens. This is much harder than you may think.

Since character entity codes within the code are necessary for the code to display in its pieces, I have to convert each character entity code into something that convert and display properly.

I explain this is greater detail in my article on publishing signatures and writing code in your WordPress posts, but here is an example.

In order to display a quote mark as a text quote, and then display it as I write it, and then display it as the code it took to write it, this is the evolution of the character code:

" - &#34; - &amp;&#35;34;

As I have to break down each part of the character code in order for those parts to display, replacing each character code element with its printable equivalent, the underlying code gets longer and longer, and much more complicated to read. And very hard work.

For more information on writing and publishing code on your blog, see:

Tags: ,

This post was written by

You can visit the for a short bio, more posts, and other information about the author.


Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By Kaj posted on July 16, 2007 at 7:38 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I have a problem the other way round. If I want to put in a video of youtube and I take the code and use the tag it doesn't show the video. How is that possibly?
    I use the closing tag but after i open the post again the code is placed outside the tags and the tags are standing beside each other, like
    .

    Reply

  2. By Simon posted on July 16, 2007 at 7:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Using windows live writer and the insert code plug-in is an easy option for showing code!

    Reply

  3. By Lorelle VanFossen posted on July 16, 2007 at 1:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Kaj: You must insert code for video as described by whatever video service or Plugin you are using. This is an unrelated issue to inserting code that can be read and copied and pasted for code projects.

    Simon: That’s good to know. I’ve just started to explore Windows Live Writer and the entering of code is a nightmare. Do you have a link to the code plug-in?

    Reply

  4. CSS Classroom - Div vs SpanJuly 16, 2007 at 7:51 pm
  5. How To Publish Code In WordPress Blog Posts | One Tip A DayJuly 17, 2007 at 5:58 pm
  6. fluxcapacity » Blog Archive » One solution to Wordpress code-snippet formatting problemsJuly 23, 2007 at 1:11 am
  7. cerebral odd jobs » Another code display and the Live Writer extensionJuly 23, 2007 at 11:25 pm
  8. By Sherill posted on July 27, 2007 at 11:11 am
    Want an avatar? Get a gravatar! • You can link to this comment

    all of this is very good…however I don’t have a clue what any of it means…isn’t there some type of software where you take either the video url or the entire html for the embedded video and copy/past or drag-n-drop it into an editor which does the heaving lifting and just spits out the correct code to copy and past into your blog…sure there is…so jus point me to it…please.

    Reply

  9. By Lorelle VanFossen posted on July 28, 2007 at 11:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    This is not an article about including video in your post. You will have to consult the video service and blogging program you use to find out what works for them.

    This is about publishing readable and copyable code in your WordPress blog or any other blog program that converts “code” to code and not text. If you don’t publish readable code in your blog posts, like how to show someone how to change a code line in a Plugin or web page design, then you won’t need this information.

    Reply

  10. By loldogs posted on July 29, 2007 at 12:25 am
    Want an avatar? Get a gravatar! • You can link to this comment

    This may be the wrong place to ask but… I’m looking for code, form, or wp plugin that displays the url to my post for readers to copy and paste in another location.

    Reply

  11. By Lorelle VanFossen posted on July 30, 2007 at 2:12 am
    Want an avatar? Get a gravatar! • You can link to this comment

    loldogs: First, you do not need anything. Anyone with an ounce of sense when it comes to copying and pasting links knows to right click on the link and choose Copy Shortcut or Copy Link Location.

    Second, why would you want to do that? With the center click of their mouse button, or right click and open in new tab, they can open the link you have in your blog post and read the post as their leisure.

    Honestly, if you want people to blog about a link, they already know how to copy it. Displaying it on your blog posts, unless part of a tutorial, is really ugly. So if I knew why, I might have a better answer. And there is no such WordPress Plugin for this, since it isn’t a desired thing to do.

    Reply

  12. By Brian posted on August 8, 2007 at 2:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi. Could someone help point me in the right direction because all this talk about codes is, well, coded to me. Here’s the thing: I need my wordpress blog “Reply” like this, to have a “browse” button for picture attachments. What can I do??????????
    Thanks

    Reply

  13. By Lorelle VanFossen posted on August 8, 2007 at 2:21 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    This article topic, and blog, is not the place to get the answers you need. And, I don’t understand your question.

    There are no “picture attachments” in a WordPress blog. You can browse the images you have uploaded to your blog from the Write Post Panel section dealing with images and add them to your blog posts.

    But none of this has to do with “Reply” as that has to do with comments. Are you asking about gravatars/avatars, the pictures that are sometimes seen next to comments?

    I recommend you really get the words you need to form the question and ask on the WordPress Support Forums.

    Reply

  14. WordPress Wednesday News: International WordCamps, WordPress 2.3, Theme Viewer Working, WordPress.com Banned, and More News : The Blog HeraldSeptember 6, 2007 at 5:20 am
  15. Trials and tribulations of using WordPress to display code syntax :: miLienzo.comSeptember 6, 2007 at 10:14 pm
  16. By Jovan posted on October 2, 2007 at 2:10 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good job, very useful information it will come in handy some day. THANKS!

    Reply

  17. Blog Challenge: Teach a Blogging Technique « Lorelle on WordPressNovember 1, 2007 at 7:03 pm
  18. By JMorris posted on November 18, 2007 at 4:14 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hmmm… I should have done a search on this topic before I took the time to write a post about it. Oh well, what I wrote about is more complimentary to this post than anything because the procedures I outline are different. Also, I’ve included screenshots to illustrate the process.

    I’ve come up with a process that uses the default WYSIWYG editor (or a free service), 1 plugin and 1 CSS class to post any type of code into your WordPress blog. It’s pretty straight-forward and does not require manually converting HTML characters to their ASCII equivalents. It also makes code stand out more through the use of a styled paragraph class.

    Link: Publishing Code Snippets in WordPress

    While your article goes more into the details of what is going on behind the scenes, my tutorial shows a very fast way of achieving the desired result. Neither is wrong or better. They are just two paths to reach the same result.

    Thanks for sharing this information, Lorelle. Informative and enjoyable as usual. :-)

    Reply

  19. WordPress Wednesday News: Mandatory WordPress Security Release, Sneak Previews of WordPress 2.4, Hoodies, Vote for WordPress, Moving to WordPress, Custom Fields, and More : The Blog HeraldJanuary 3, 2008 at 4:21 am
  20. Phil online ? Blog Archive ? Adsense inline with WordPress blog posts | Greg Meares dot comJanuary 4, 2008 at 7:00 am
  21. הוספת קוד לפוסט » ITbananasFebruary 12, 2008 at 6:41 pm
  22. Battling Ampersands in Your Blog Design and Code : The Blog HeraldFebruary 25, 2008 at 11:52 am
  23. By Jeffro2pt0 posted on March 5, 2008 at 4:25 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for pointing this tip out to me Lorelle. I think I’ll go the route of installing a converting plugin which adds this functionality to the TinyMCE editor. Hopefully, I can find one that will play nice with WordPress 2.5 as I for one do not want to spend an hour, converting code by hand.

    Reply

  24. Blogging Newbies » Blog Archive » Battling Ampersands in Your Blog Design and CodeMarch 8, 2008 at 2:25 am
  25. Websitetology » Blog Archive » Posting Usable Code in Wordpress With No PluginsApril 18, 2008 at 10:43 am
  26. Writing and Publishing Code in WordPress Blog PostsApril 22, 2008 at 9:33 am
  27. By Jake posted on May 4, 2008 at 4:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I had a battle with this also. I discuss how I was able to get around the problem by using “pre” tags.

    Reply

  28. By Lorelle VanFossen posted on May 5, 2008 at 8:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Jake:

    That doesn’t solve the problem on some blog platforms, depending upon the code within. Using CSS, you can set the font to be code-like, and hopefully the quote marks will not be converted into smart quotes. Unfortunately, some blog platforms still convert them within the PRE tag. There is a CSS fix, but it helps to just do it right so there is no chance for a problem in the future as the program and Themes change over time.

    Reply

  29. By seyv posted on May 7, 2008 at 8:58 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’ve come up with a process that uses the default WYSIWYG editor (or a free service), 1 plugin and 1 CSS class to post any type of code into your WordPress blog.

    Reply

  30. By Robert Lindsay posted on May 10, 2008 at 4:21 am
    Want an avatar? Get a gravatar! • You can link to this comment

    How to Make HTML Code Show Up On a Webpage.

    Forget < and >

    Just use this textarea and CSS hack instead. Shows up any code you want to throw in there. Works on Blogger. Not sure about WordPress, but it should work on that too.

    Reply

  31. Please Spare Us Rattling-On Blog Posts : The Blog HeraldJune 5, 2008 at 8:05 pm
  32. Woopra » Blog Archive » How to Help Woopra and Woopra Members on the ForumsAugust 6, 2008 at 10:26 am
  33. By jerso posted on August 10, 2008 at 11:05 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    asdfasfdasdf

    Reply

  34. By WebAction posted on August 24, 2008 at 12:01 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks guys, this was exactly the info I was looking for. Both Lorelle and JMorris

    Reply

  35. WordPress Wednesday News: WordCamp South Africa, World of WordCamps, Blaming WordPress, and Crazyhorse Gallops | The Blog HeraldAugust 27, 2008 at 11:35 am
  36. visitortail.com » Blog Archive » How to Help Woopra and Woopra Members on the ForumsSeptember 1, 2008 at 9:26 pm
  37. How to Add Logo to Wordpress Site, and Show Code In Worpress | Free Adobe Training, Learn, Tricks, Tips, Beginners, How To, Adobe-Masters.comSeptember 2, 2008 at 8:32 am
  38. Helping in the WordPress Forums is an Education | The Blog HeraldSeptember 15, 2008 at 11:26 pm
  39. By Mike posted on October 20, 2008 at 4:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks alot I just started my blog with wordpress and was looking for exactly this type of article. Thanks alot for all of the useful info.

    Reply

  40. Blog Roundup for the 16th of July 2007 :: Christopher RossOctober 26, 2008 at 7:51 pm
  41. WordPress News: Release Week News, WordPress 2.7.1, BuddyPress, WordPress MU, and More Releases | The Blog HeraldFebruary 5, 2009 at 5:05 pm
  42. By jidanni posted on February 11, 2009 at 3:03 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Now turning to the aspect of what characters are allowed in comments.
    I find that often the left angle bracket or even the ampersand l t ; version of it will cause one’s comment to disappear.
    Therefore I note that I have replaced it with “(“.

    Reply

    • By Lorelle VanFossen posted on February 13, 2009 at 1:31 pm
      Want an avatar? Get a gravatar! • You can link to this comment

      Which is not the right step to take. As noted in the article, just replace the angled brackets with the right character code and it won’t cause any problems. I’ve been doing this in all types of blogs around the world for many years without fail. If you mess up the character code, that’s another issue. :D

      When replacing code with parentheses, brackets and other characters, it confuses people as brackets and parentheses are used within the code. There is a huge difference between:

      (? the_title(); ?)
      and
      <? the_title(); ?>

      Put something like that into a big piece of code like JavaScript, dependent upon parentheses to work, and confusion reigns. It if it that important to publish a piece of code, it helps to do it right.

      Reply

  43. Posting Source Code on Your WordPress Blog Posts | @ZemalfJune 12, 2009 at 5:04 am
  44. By Bumper Sticker Printing posted on October 20, 2009 at 9:21 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Wao you are having such a huge collection on info in your blog thanks for sharing it its really helpful for me.

    Reply

  45. By sticker printing posted on January 1, 2010 at 11:39 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    your huge collection is very useful…

    Reply

  46. By Sherry posted on January 31, 2010 at 5:15 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thank you. I only needed to add a small snippet of code to a post and your instructions have made that possible.

    Reply

  47. By Beni posted on July 29, 2010 at 7:30 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I want to put the code of feedburner from google on my home page of the blog: http://knowengineering.wordpress.com/. How do I do it? It is not just in a simple new post, but in the home page, where are shown more posts. Please, help me if you know. Thanks.

    Reply

  48. By custom wedding dresses posted on October 13, 2010 at 9:17 am
    Want an avatar? Get a gravatar! • You can link to this comment

    While there may be limited languages currently for CodeHtmler it is very extensible so you can easily add new language definitions, by just modifying an xml file. Checkout the project at http://www.codeplex.com/CodeHtmler.Also if you want to customize your colors or code elements and have them presisted you can use the CodeHtmler Windows Live Writer plugin.

    Reply

  49. By drochertrtet posted on December 1, 2010 at 4:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Your words are your own, so be nice and helpful if you can. If this is the first time you’re posting a comment, it might go into moderation. Don’t worry, it’s not lost, so there’s no need to repost it! We accept clean XHTML in comments, but don’t overdo it please.

    Reply

  50. By lousie posted on December 4, 2010 at 10:28 am
    Want an avatar? Get a gravatar! • You can link to this comment

    post free quotes and list your business, at http://www.service-quotes.com.au/

    Reply

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.

    Current day month ye@r *