How To Display Code On WordPress Site

Don’t know how to display code on WordPress site? No need to worry, you have come to the right place for the answer.

Do you own a coding blog or WordPress site?

Whenever you try to save a WordPress blog post or page it will run through several cleanup filters.

This happens to make sure that, no one tries to inject a piece of code through post/page editor in order to hack your blog.

In this article, we will teach you a proper way of displaying code on your WordPress blog.

How To Display Code On WordPress Site

How To Display Code On WordPress Site

We will show you two methods for displaying code on your WordPress site. You can choose to use the one you like.

Display Code Using The Default Editor in WordPress

There is a default method used by WordPress to display code. For beginners this is the recommended method.

Simply, edit the blog post or page where you want to display the code. On the post edit screen, add a new code block to your post.

After adding the code block on your WordPress blog post, it will look something like this,

WordPress Code Block
WordPress Code Block With Code

Display Code Using A WordPress Plugin

For this method, we will be using a WordPress plugin to display code in your blog posts.

This method is recommended for bloggers who often write codes in their blog posts & who’s blog’s are about coding tutorials.

This plugin gives you one major advantages over your default WordPress Code Block.

That advantage is, syntax highlighting and line numbers are displayed for the code.

Due to this, the audience who is learning the code has a better understanding of it.

Install and Activate the SyntaxHighlighter Evolved plugin. In case you don’t know how to install & activate a WordPress plugin, then check out our post on how to install and activate a WordPress plugin.

After you have activated the plugin successfully, you can edit the blog post to select & add the SyntaxHighlighter Evolved plugin in your blog post.

Select Code Block With SyntaxHighlighter

After you have added the SyntaxHighlighter Evolved in your blog posts, it will look something like,

Code Block With SyntaxHighlighter Evolved Plugin

Now, you can write whatever code you want in the SyntaxHighlighter Evolved Code Block. Don’t forget to Save or Update your blog post. Preview the changes. Check out the image below,

SyntaxHighlighter Plugin Code Displayed

If you are using the old classic WordPress editor, then you should add a PHP code between [PHP]…[/PHP] blocks in your WordPress blog post.

[php]

<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>

[/php]

Similarly, for a HTML code you can add the code in [HTML]…[/HTML] blocks with the old classic WordPress editor.

[html]

<a href="example.com">A sample link</a>

[/html]

Conclusion

As discussed earlier, if you are a newbie in the field of blogging & doesn’t use code much then you can use the default WordPress Code Block.

If you are a professional coder or you have a coding blog the go for the SyntaxHighlighter Evolved plugin.

Adding a plugin will definitely improve the highlights, functionality & appearance of the said block.

Leave a Reply

Your email address will not be published.

Scroll to Top
Copy link
Powered by Social Snap