Get the Official WPSaviour App Now!

BlogTutorials

How to Easily Display Code on Your WordPress Site

Do you need to show code in your WordPress weblog posts? For those who tried so as to add code like common textual content, then WordPress won’t show it accurately.

WordPress runs your content material by means of a number of cleanup filters every time you save a put up. These filters are there to verify somebody doesn’t inject code through put up editor to hack your web site.

On this article, we are going to present you the correct methods to simply show code in your WordPress web site. We’ll present you totally different strategies, and you’ll select the one that most closely fits your wants.

How to easily display code in WordPress posts

Technique 1. Show Code Utilizing The Default Editor in WordPress

This technique is really useful for saviours and customers who don’t have to show code fairly often.

Merely edit the weblog put up or web page the place you need to show the code. On the put up edit display, add a brand new code block to your put up.

Add code block to your WordPress posts

Now you can enter the code snippet within the textual content space of the block.

Add code to your blog post

After that, it can save you your weblog put up and preview it to see the code block in motion.

PHP code displayed in WordPress

Relying in your WordPress theme, the code block might look totally different in your web site.

Technique 2. Show Code in WordPress Utilizing a Plugin

For this technique, we will likely be utilizing a WordPress plugin to show code in your weblog posts. This technique is really useful for customers who typically show code of their articles.

It provides you the next benefits over the default code block:

  • It permits you to simply show any code in any programming language
  • It shows the code with syntax highlighting and line numbers
  • Your customers can simply research the code and replica it

First, it’s worthwhile to set up and activate the SyntaxHighlighter Evolved plugin. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.

Upon activation, you may go forward and edit the weblog put up the place you need to show the code. On the put up edit display, add the ‘SyntaxHighlighter Code’ block to your put up.

SyntaxHighlighter code block

You’ll now see a brand new code block within the put up editor the place you may enter your code. After including the code, it’s worthwhile to choose the block settings from the appropriate column.

SyntaxHighlighter code block settings

First, it’s worthwhile to choose the language to your code. After that, you may flip off line numbers, present first line quantity, spotlight any line you need, and switch off the characteristic to make hyperlinks clickable.

As soon as you might be accomplished, save your put up and click on on the preview button to see it in motion.

Code displayed with syntax highlighting

The plugin comes with various colour schemes and themes. To vary the colour theme, it’s worthwhile to go to Settings » SyntaxHighlighter web page.

SyntaxHighlighter settings

From the settings web page, you may choose a colour theme and alter SyntaxHighlighter settings. It can save you your settings to see a preview of the code block on the backside of the web page.

Code block preview

Utilizing SyntaxHighlighter with Basic Editor

In case you are nonetheless utilizing the old classic WordPress editor, then right here is how you’ll use SyntaxHighlighter plugin so as to add code to your WordPress weblog posts.

Merely wrap your code round sq. brackets with the language identify. For instance, if you’re going to add PHP code, then you’ll add it like this:

[php]
<?php
personal perform get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

Equally, for those who needed so as to add an HTML code, then you’ll wrap it across the HTML shortcode like this:

[html]
<a href="instance.com">A pattern hyperlink</a>
[/html]

Technique 3. Show Code in WordPress Manually (No Plugin or Block)

This technique is for superior customers as a result of it requires extra work and doesn’t at all times work as supposed.

It’s appropriate for customers who’re nonetheless utilizing the outdated basic editor and need to show code with out utilizing a plugin.

First, it’s worthwhile to move your code by means of a web based HTML entities encoder instrument. It is going to change your code markup to HTML entities, which can assist you to add the code and bypass the WordPress cleanup filters.

Now copy and paste your code within the textual content editor and wrap it round <pre> and <code> tags.

Adding code manually in classic editor

Your code would appear like this:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/dwelling.html&quot;&gt;This can be a pattern hyperlink&lt;/a&gt;&lt;/p&gt;
</pre></code>

Now you can save your put up and preview the code in motion. Your browser will convert the HTML entities and customers will be capable to see and replica the right code.

Manually displaying code in WordPress

We hope this text helped you learn to simply show code in your WordPress web site. You may additionally need to see our final listing of the most wanted WordPress tips, tricks, and hacks.

Download The WPSaviour App Now

Related posts
Beginner’s GuideBlogShowcase

7 Best Shopify Alternatives in 2020 (Cheaper and More Powerful)

Beginner’s GuideBest WordPress PluginsBlog

14 Best AI Chatbots Software for Your Website (Comparison)

Beginner’s GuideBlogTips

Magento vs WooCommerce – Which one is Better? (Comparison)

Beginner’s GuideBlogTips

12 Best Calculator Plugins for Your WordPress Site

Sign up for our Newsletter and
stay informed

Leave a Reply

Your email address will not be published.

Fear Of Missing Out?

Sign up with your email address to receive WordPress tips and updates
SUBSCRIBE NOW
Terms and Conditions apply
close-link
Click Me