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.
Table of Contents
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,
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.
After you have added the SyntaxHighlighter Evolved in your blog posts, it will look something like,
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,
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.