Pin Me

How to Display Code in your WordPress Posts

written by: •edited by: Michele McDonough•updated: 7/16/2010

In this tutorial, I will explain how you can insert and display code in your WordPress posts. You can do this either manually or with the help of a WordPress plugin.

  • slide 1 of 3

    Displaying Code in WordPress

    WordPress is the most popular blogging platform in use worldwide. If you are a programmer, developer or web designer and also blog on your WordPress blog, your posts must often include some code which you want to share with your readers. Now the problem with posting code directly into WordPress is that it either tries to execute that code or rewrites it as something else.

    The text editor in WordPress was meant to post only simple text directly, not code with complex characters like <, >, " etc.

    There are two ways to insert code into your WordPress posts.

  • slide 2 of 3

    Convert and Insert Code Manually

    The first way is to convert your code manually using HTML entities so that the formatting is done properly in WordPress. You can either do it manually by replacing < by &lt, > by &gt, etc. Alternatively, you can use an online code converter to convert the code into simple text which can be displayed properly in WordPress.

    For example, to display HTML code in your WordPress posts, you could use an HTML entities converter.

    Go to and enter the HTML code you want and click on convert.

    For example,

    Original Code:

    <head><title>Bright Hub is the leading tutorial site online.</title></head>

    Converted Code:

    &lt;head&gt;&lt;title&gt;Bright Hub is the leading tutorial site online.&lt;/title&gt;&lt;/head&gt;

    Copy the converted code and paste it into the WordPress Post Editor.

  • slide 3 of 3

    Install a Plugin to Display Code in WordPress Posts

    The other alternative is to use a WordPress Plugin. To know more about plugins, check out How to Install, Remove and Configure Plugins in WordPress.

    There are many plugins which allow you to insert and display code correctly on WordPress posts. Some of them are Syntax Highlighter, Syntax Highlighter Plus, WP Advanced Code Editor and Google Syntax Highlighter.

    Of these, the simplest and the best plugin is the Syntax Highlighter plugin. It is easy to use and configure, and it allows you to display many languages in a visually pleasing way.

    Download the Syntax Highlighter Plugin from WordPress Plugins.

    Upload it on your wordpress/wp-content/plugins directory. Go to your WordPress Dashboard > Plugins and activate the Syntax Highlighter Plugin.

    Once your plugin is activated, you can configure the plugin settings from Settings > Syntax Highlighter.

    Now to insert code into your WordPress posts, just type whatever code you want in the Visual View of the WordPress Post Editor.

    After you have inserted your code, just use these tags to enclose that code.


    Your code


    For example, if you insert PHP code, just enclose your code in these tags: [php][/php]


    echo "Hi, this is PHP code";

    [/php]syntaxhighlighter.jpg  The Syntax Highlighter plugin supports many other languages:

    • PHP — php
    • Python — python
    • XML — xml
    • HTML - html
    • C++ — cpp
    • C# — csharp
    • CSS — css
    • Java — java
    • JavaScript — js
    • Ruby — ruby
    • SQL — sql
    • Visual Basic — vb
    • Delphi — delphi

    Just insert your code, use the appropriate enclosing tag and your code will be displayed visually.