How To Add Code Inside of a WordPress Article

1Sometimes, you may want to add a piece of software code (like C++, Java or even HTML) into your WordPress post. If you write your code directly in WordPress visual editor, it will look like an ordinary paragraph (just like the C code snippet written below).

But if you want your code to look like “code” (not like an ordinary paragraph) but not to behave like a real code, then writing your code directly on WordPress visual editor may not be the best solution for you.  So, what should you do ?

This is how a code looks like if it is written directly on viual editor.

for(int i=0;i<size-1;i++)
        {
            if(arr[i]>arr[i+1])
            {
                swap=arr[i];
                arr[i]=arr[i+1];
                arr[i+1]=swap;
            }
        }

Now, let’s see the tips to add code into your wordpress post.

Tip 1 : Using <code> tag

You can use <code> </code> tags.

<code> tag presents the code snippet in “monospaced font”.

Click “Text” mode.

Write your code snippet on the text mode and place <code> tags around it (There is a code button just above your text area between li and more buttons)

1
First of all, specify the beginning of your code and click code button to mark it (After your first click, code button will change into /code), then go to the end of your code and click the code button once more to mark the end of your code. Here is an example of how to mark the beginning and end of a code snippet.
2And this is how it looks;

for(int i=0;i<size-1;i++) { if(arr[i]>arr[i+1])
{
swap=arr[i];
arr[i]=arr[i+1];
arr[i+1]=swap;
}
}

Tip 2 : Using Character Entities (Extended Characters)

If you place HTML tags between <code> tags, they will not look good. Because your browser will assume that, the HTML tags inside code tags are for formatting purposes. Some special characters like “<“ or “>” are reserved for HTML. So if you write;

<code><font color=”red”> This is a test ! </font></code>

It will appear as;

This is a test !

Your browser simply interpreted <font color=”red”> as a formatting tag.

But if you want it to appear exactly as <b>this is a test !</b> with the tags, then you should replace reserved characters with HTML character entities (“entity name” or “entity number” of character entities should be used).

For < , “entity name” is : &lt;  and “entity number” is : &#60

For > , “entity name” is : &gt;  and “entity number” is : &#62

Now, let’s try again by using HTML character entities (paste it to Text editor. In this example we used entity names, but you can also use entity numbers)

<code>&lt;font color=”red”&gt; This is a test ! &lt;/font&gt; </code>

And the outcome will be ; 

<font color="red"> This is a test ! </font>

Tip 3 : Using <pre> tag

As you may have noticed, when we used the <code> tag, indentation of the code disappeared.

By using <pre> </pre> tags, you can keep the style of your code snippet.

Your code will appear inside of a box. Now let’s add the below code in wordpress text editor

<pre>

for(int i=0;i<size-1;i++)
        {
            if(arr[i]>arr[i+1])
            {
                swap=arr[i];
                arr[i]=arr[i+1];
                arr[i+1]=swap;
            }
        }

</pre>

The outcome will be;

for(int i=0;i<size-1;i++) { if(arr[i]>arr[i+1])
            {
                swap=arr[i];
                arr[i]=arr[i+1];
                arr[i+1]=swap;
            }
        }

There is one thing important to keep in mind; <div> tag shows the code “as it is”.

This means that; if there are long lines of code, they will go out of the page. So, it would be wise to put line breaks to the appropriate places of code.

 

Tip 4 :

You can get a snapshot of your code by using either Ctrl+PrtSc or a programme specially designed for this purpose like TechSmith Snagit which users can capture or record their screen and then tailor it to fit their needs.

After you get the snapshot, open it in a graphic viewer like irfanview, crop and save it in .jpeg format.

Now you can click Add Media and add the image into your post.

Here is an example;

3

Tip 5 :

If you want, you can customize the outcome of <div> and <code> tags.

Just insert the CSS code below into your wordpress theme’s style.css file.

pre, code{
/* direction ltr identifies the direction of writing. Here from left to right. */
	direction: ltr;
	text-align: left;
}

/* this section identifies the properties of pre tag's box */
pre {   border: solid 1px red;
	font-size: 10px; 
 	color: black; 
	margin:  3px; 
	padding: 3px; 
	background: #e5e4e4}

/* this section identifies the properties of code tag */
code {font-size:10px; color: #060606}

You can change it according to your needs.

Tip 6 :

As the last tip, you can change the appearance of <code> tag by using the code snippet below.

<div id=”highlighted” style=”width: 70%; background-color: #d0cdcd; padding: 5px; border: 1px solid #898787; font-size: 13px; color: black;”><p> I am a paragraph. The tags that enclose me describe what I am. Not how I look.</p>

It will look like this (you can change it in whatever way you want. Just change the values. For example: If you want a bolder border, change border : 1 px to border : 3 px) ;

<p> I am a paragraph. The tags that enclose me describe what I am. Not how I look.</p>

Feel free to use it in your website (I consent you to use it without my copyright restrictions)

Was this post useful ? Please share your comment.

Tolga Ayan

Writes articles about WordPress, CSS & Related Web Technologies. Resident of Alpharetta, GA.

We'll be glad to hear your comments !