Print this Post

How to display code in WordPress post

When you try to display HTML, php or any other code in wordpress blog posts, it executes the code instead of displaying it. So you’ll see the implementation of your code in the post. Even <code> or <tt> tags will not help you to display the exact code in the post. Then how can you display these codes in your posts?

Well, there are so many plug-ins which can help you to display codes in wordpress posts. But I personally use and recommend this plug-in.

WP-Syntax: This plug-in displays the code instead of executing in wordpress posts. And it also highlights the code with various colors as you see in your code editor. It is very easy to install and use this plug-in.

Installation steps:

  1. Download plug-in here.
  2. Upload wp-syntax.zip to your WordPress plugins directory, usually wp-content/plugins/ and unzip the file. It will create a wp-content/plugins/wp-syntax/ directory.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. Create a post/page that contains a code snippet following the proper usage syntax.
How to use this plug-in:

Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre> where
LANGUAGE is your coding language. The line attribute is optional.

Example1: to display php code with line numbers,

<pre lang="php" line="1"> your php code </pre>

Example2: to display HTML code without line numbers,

<pre lang="HTML"> Your HTML code </pre>

Don’t worry if you find it is difficult to use the above <pre lang="LANGUAGE" line="1"> and </pre> method while posting. There is another plug-in called WP-Syntax Editor Integration Plugin. This plug-in adds a new button to both Visual and HTML editors in wordpress. After installing the above plug-in, go to New post area and select the code that you want to be highlighted. Then press the pre (Wp-Syntax) button in the editor and enter the coding language. Thats all! This plug-in will do the rest things for you!

wp-syntax button on visual editor

usnig wp-syntax in text editor

PS: WP-Syntax Editor Integration Plugin requires WP-Syntax plug-in to work. It is just an extension for WP-Syntax plug-in to add a pre (Wp-Syntax) button in visual and HTML editor.

Cheers! 🙂

Follow me on twitter @prasannasp

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

Permanent link to this article: http://www.prasannasp.net/how-to-display-code-in-wordpress-post/


Skip to comment form

  1. roksa

    Great write-up, I am regular visitor of one’s site, maintain up the nice operate, and It’s going to be a regular visitor for a lengthy time.

  2. kong chandara

    I need comment code 🙁

  3. anand

    Was looking into this type of code thx. Nice post

  4. Shrinivas

    This is an interesting post, please write a step-by-step guide to play with database using PHP..

  5. Justin

    Great roundup post with fast and easy to implement examples! I think a lot of WP users will find this super helpful for testing new ways to grow their lists. Looking forward to more great tips.

  6. umashankar

    This is what I need. Thanks a lot.

  7. irfan

    just what i was looking for, thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.