How to Display Code on Your WordPress WebSite

If you are running a tutorial WordPress site, sometimes you need to use raw codes in the post. Or if you need to share some web development projects with your readers, need to include the codes.

WordPress by default filter out raw codes in any post. So, you can’t add codes in a post directly like texts.

So, site owners have to use different methods to add raw codes to a post. If you have never done this work, it can be difficult for you. In this post, you will learn how to add raw codes to any post on your site.

Why Is It Difficult to Show up Raw Codes in WordPress?

Well, WordPress has different HTML codes for formatting the text. For example, if you want to make a text bold, you need to use the <strong> tag in the post.

Now, you want to show the way to your readers. How will you do that? By typing the code in the post? But WordPress will take it as a text formatting HTML code.

The same thing goes for other codes and tags. So, when you even write simple code, WordPress take it as a command to modify the post.

That is why it is quite challenging to show the exact raw codes without errors in the texts. That is the reason; you need to follow some particular ways for this task.

How to Show the Codes?

Though there are different ways of showing codes, the best way is to use a plugin. This is free of cost. The name of this plugin is Syntax Highlighter Evolved plugin. You need to install this plugin step by step.

Go here. Now install the plugin on your blog. For activating the plugin, you need to go settings. From the settings, go to Syntax Highlighter.

The default settings of this plugin work in most of the sites. Sometimes you may need to change some settings for activation.

You will find a variety of options in the settings. Each one is described for the easiness. Based on the instruction, modify the changes if necessary.

This plugin uses some shortcodes to display the codes in any post. No matter in which language you are writing the codes. You can show it with those shortcodes.

If you want to show the CSS codes in the post, you need to wrap the codes in the short code like this-

[css]

.entry-title {

font-family:”Open Sans”, arial, sans-serif;

font-size:16px;

color:#272727;

}

[/css]

It will appear on your website like this:

1. .entry-title {
2. font-family:”Open Sans”, arial, sans-serif;
3. font-size:16px;
4. color:#272727;
5. }

 

 

Again, if you want to show the PHP codes in one of your posts, the shortcode will look like-

[php]

<?php

echo “Hello World”;

?>

[/php]

And the post will appear like this-

1

2

3    <?php

echo “Hello World”;

?>

 

The plugin Syntax highlighter automatically highlights codes based on the language you are using. It also appears the line number and the handle tab indent correctly. As you see in the example.

Code Source: WPbegginer.

How to Display Codes Without Plugin?

If you think using a plugin is a hassle or you just don’t want to use it, there is another way. The alternative method doesn’t require any plugin.

For this procedure, you need to convert your codes into HTML entities. However, doing this manually is difficult. You can use some online tools that will make your works easier.

The encoded HTML entities look like &gt;?php echo “Hello World”; ?&lt;. After converting the code, you can directly paste it into your web post.

This way is beneficial for bloggers who don’t have development projects. Both ways become easy after first few attempts.

So, what you learned in this post are-

1. You can add raw codes on your WordPress site with the Syntax Highlighter Evolved.
2. Then install the plugin and then modify the settings if necessary.
3. You can add HTML codes by converting them into HTML entities.
4. You can use online tools instead of converting the codes manually.

I hope you liked this article, Feel free to share your thoughts and questions in the comment box below.