display raw codes in blog posts
How To Display Raw Codes In WordPress Blog Posts

In WordPress, if you’ve ever tried your hand in sharing code snippets, I’m sure you’ll know how difficult it is to easily get them to be visible in your published spots. You’ll be extremely relieved to know that it is never due to a mistake on your part. There are exactly two reasons as to why your code snippet isn’t being shown.

Let’s look at a common example to explain the first reason: bolding text. To bold the word “puppy” in a WordPress post, for example, put strong>puppy/strong> into your WordPress editor. Isn’t it simple?

The issue is that WordPress is unable to determine whether you really want to disclose that code snippet with your audience or highlight the text. WordPress will read the piece as HTML code, emphasizing the term “puppy,” and removing the code snippet from the published article.

You can watch the video tutorial below for this article:

“Can’t I just remove the HTML tags and put the raw code?” you may wonder. Still no luck. As a security measure, WordPress filters away any raw code it discovers. This cleaning filter is designed to keep your site — and WordPress in general — secure by blocking code from being inserted into the post editor and compromising your site.

However, there are situations when you must legally display code in your postings. One could be a marketer who produces design guidelines and guides for websites, or a developer who makes WordPress hacks. Whatever the cause, there are a bunch of ways to show code on your WordPress site, but for your ease we’ll teach you the easiest way in this lesson.

Now, the main answer to your query.

How does one display raw codes in WordPress blog posts?

If you wish to present code on your site in a simpler way and have WordPress 5.0 or later installed, you can use the Gutenberg editor to effortlessly and simply insert code blocks with just a few clicks of the mouse. The steps are outlined below.

When you hover onto all posts, and then click on Edit of any of the existing posts. Then, you’ll click on Preview, it’ll be visible that only the content specified is visible. Now, what if you wish to display raw code in WordPress blog posts? To achieve that, follow the given steps.

  • Go back to the WordPress editor. 
  • You’ll see a lot of blocks. 
  • Search for Code Block.
How To Display Raw Codes In WordPress Blog Posts
  • Now go ahead and click on Code.
  • Now input the code that you wish to be shown as code here.
How To Display Raw Codes In WordPress Blog Posts
  • After you’ve entered the code, tap the Update button in the top right corner of the screen.
How To Display Raw Codes In WordPress Blog Posts
  • Now, when you preview it, on your blog post the code should be displayed instead of actually being executed. 

Hence, this is how easy it is to display raw codes in WordPress Blog Posts. 

Also Read: How To Disable Post Revisions In WordPress And Reduce Database Size


Submit a Comment

Your email address will not be published. Required fields are marked *

Need Professional Help?

We can help you with website fixes and ongoing maintenance.