How To Display Raw Code On WordPress Blog Posts

Would you like to display raw code on your WordPress blog? Are you having trouble getting your code to appear on the front-end of your site when you check the preview?

This happens because WordPress automatically filters all the raw code it finds on your site. That's the default setting – which makes sense, since most of the time, you want your code to be translated.

But sometimes, you might want to make code visible on your site, especially if you're a developer or someone who writes web design guides and tutorials.

Don't worry, displaying raw code on your blog is easy. In this tutorial, we'll show you how to do it.

Displaying Raw Code On Your WP Blog

There are two ways to display raw code on your WordPress blog. You can do so manually, or you can use a plugin.

We will discuss both of these processes in detail, so you'll know how to do it yourself with or without the help of a plugin. First, let's go over how to display raw code manually.

Displaying Raw Code Manually

If you only want to display raw code on your WordPress blog occasionally, then there's no need to go through the hassle of downloading and installing a plugin. After all, adding another plugin to your site will make it bigger and slow it down a bit.

So, as a more lightweight solution, we recommend you use a code to make your raw code visible.

You can do this by encoding the code in your HTML entities. For example, you could write:

>?php echo “Hello World”; ?<

The only problem is that you can't manually convert the code into HTML entities that easily. You need specific tools to do it for you. Web2.0Generators is one such tool you can use for this purpose. It allows you to convert any sort of code to its HTML entities without much effort on your part.

When you're done converting your PHP, Javascript, or HTML code into HTML entities, you can use them on your WordPress blog by pasting them into your post in between the <pre> and </pre> tags.

If you think your code looks too plain, you can add some style by writing your code between the <code> and </code> tags. That's it. Just save your work and check the preview. Your code will be right there on the front-end of your site.

Displaying Raw Code With A Plugin

Now we'll show you how to display raw code on your WordPress site by using a plugin. We'll use a plugin called Syntax Highlighter Evolved.

The activation part of this plugin is very simple. You can activate it directly from your admin panel, just like any other plugin.

Go to Plugins>Add New. In the search box, enter “Syntax Highlighter Evolved”. You'll see it in the search listings.

adding raw codesto wp site

Click on Install Now, then activate the plugin. Once it's activated, go to Settings>Syntax Highlighter Evolved. This is where we'll configure the settings for the plugin. Generally, you won't need to change the default settings, but you should always review the settings of a plugin before you start using it.

syntax highlighter settings

Adjust the settings as you see fit. After you're done, select Save Changes.

Remember that this plugin uses certain shortcodes to display your code. For each programming language, your code must be written between these shortcodes.

Here's how you do it for CSS:

.entry-title {
font-family:”Open Sans”, arial, sans-serif;

The result will look like this:

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

And here's how you do it for PHP:

echo “Displaying Raw Text On WordPress Site”;

The result will look like this:

  1. <?php
  2. echoDisplaying Raw Text On WordPress Site“;
  3. ?>

Syntax Highlighter is free, and it's a brilliant way to display raw code on your site. It identifies the language you're using and automatically highlights the code for it. It's also smart enough to handle the tab indent.

syntax Highlighter, display raw codes on your site

Again, as useful as Syntax Highlighter is, it's only really necessary if you display raw code on your WordPress blog regularly. If you only want to display raw code sometimes, you'll be better off displaying it manually like we showed you.

We hope you found our post helpful. Do you have any questions about displaying raw code on your blog? Feel free to let us know in the comment section below.

How To Display Raw Code On WordPress Blog Posts
3.9 (77.14%) 7 votes