Now Reading
Writing and Publishing Code in Your WordPress Blog Posts

Writing and Publishing Code in Your WordPress Blog Posts

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:

See Also
Apple Silicon Processor

&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.

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.

View Comments (34)
  • 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
    .

  • 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?

  • 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.

  • 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.

  • 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.

  • 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.

  • 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

  • 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.

  • 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. :-)

  • 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.

  • @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.

  • 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.

  • 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.

  • 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 “(“.

    • 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.

  • 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.

  • Superb. This is actually what I’m looking for. My blog is a tutorial blog and using code on posts, so I need this tutorial to embed the codes into the post. Thanks for sharing with us.

  • Does any another Way to Add HTML Code in Your Blog Post in WordPress…..
    I Hit many of Searches on Internet but I Can’t find any Type of Plugin for WordPress…..
    Only Found Cryons Syntax High lightner …… I Want Some another Way to Represent a Good Looking HTML Code….. Sit Please Help Me…

  • 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.

  • 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

  • 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

Scroll To Top