How to Display Code on Your WordPress Blog or Website

Share on facebook
Share on twitter
Share on email

Learn how to display code on your WordPress site or blog with these two simple workarounds.

  1. Add code using the Gutenberg code block
  2. Add code to WordPress posts with a plugin

The best option depends on how much code you have and how often you add it to posts.

Why Your Code Snippets Don’t Display Properly

WordPress web developers who blog about programming languages need to share code snippets. If you’re new to this, you probably can’t get your code to display how you want it. That’s because of the WordPress clean-up filters and attempts to autoformat web code. WP does this to stop hackers and bad actors from injecting raw code into the post editor.

Autoformatting and filtering can render published code useless if the reader wants to copy it. Thus, it makes sense to display untampered code samples or giveaways in your posts. Also, you want the code to stand apart from the body text, not merge with it, which can look messy.

How to Display Code in WordPress Clearly

Let’s say you want to display the code snippet below to your readers. You can add it manually as regular text, use <pre> tags, code blocks, or plugins. Here it is as regular text.

<?php echo my_excerpts(); ?>

It blends in with the body text, making the reading experience awkward. A better approach is to have the code snippet stand apart from the written content that surrounds it.

That’s better. Your raw code sample is now obvious and—more importantly—unfiltered. If the reader wants to use it, they can copy and paste the sample snippet with confidence.

Point to note: The highlighted background can differ between WordPress themes.

Add Code to Posts Using Blocks

The example code above was added directly from the WordPress post editor using a block. This approach is ideal for shorter code snippets with few characters. It’s also a common approach for those who only occasionally add code extracts to their posts.

Log into your WP Admin Area.

Go to Posts => Add New from the Dashboard side menu, or open an existing post to edit.

Place the cursor into the post or page where you want to insert the code.

Click the Add Block (+) icon and type the word code into the Add Block search box.

Note: Don’t confuse the Code block <> with the Guttenberg custom HTML code block.

Click the Code block to open it.

Type or paste the code snippet into the block’s text box.

Now click the Preview link and select Preview in new tab to see your code on the live site.

Here’s how our sample looks, though your theme may display the code a little differently.

Click Publish (new post) or Update (existing post) once you’re happy with the results.

Display Code Using a WordPress Plugin

The plugin method is ideal if you often write about code and show examples. It’s also preferable for larger snippets. That’s because it’s easier to read and study, thanks to syntax highlighting.

Plugins offer other benefits over the ‘code block’ method above.

  • Displays line numbers as well as syntax highlighting
  • Displays code clearly in any of the programming languages
  • The above formats make the code easier to study

There are several plugins available. The one used for this tutorial is the popular Enlighter plugin by Andi Dittrich. It has Gutenberg integration, which adds a new sourcecode block to the editor.

Enlighter Customisable Syntax Highlighter

Please read out plugin guide for beginners first if you’re new to WordPress.

Log in to you WP Dashboard as Administrator.

Install then Activate the Enlighter plugin.

Meet the Enlighter

The syntaxhighlighter plugin opens in the Welcome to Enlighter About screen.

There are three tabs here.

  1. What’s New highlights any new features added since the last update
  2. The Change Log tab highlights bug fixes and any changes or tweaks to the new version.
  3. The Debug tab is for bug reporting.

You can open the About screen and review these tabs at any time.

New Enlighter Dashboard menu

The plugin has lots of other options and customisations. You will see a new Enlighter menu in your Dashboard sidebar with the following items.

  • Appearance (more on this below)
  • Theme customizer (only changes the active theme)
  • Editing; Leave ‘enabled’ as this is the Guttenberg Editor extension
  • Compatibility
  • Extensions
  • Options

Some of the above menus are for advanced users, so we won’t go into those in any detail here. This basic tutorial is only for displaying code correctly on your WordPress site.

Using the Enlighter plugin to display code

Let’s now insert some code snippets into a WordPress post using the Enlighter plugin.

Create a new post—or open an existing one—to add the code.

Place the cursor into the post where you want to insert the code.

Click the Add Block (+) icon. You should now see a new block for Enlighter Sourcecode. If not, type enlighter into the Add Block search box.

Click the Enlighter Sourcecode block to open it.

Click the Select Language button to choose your programming language from the 52 options. If you’re unsure of the language—or it’s not listed—then use the Generic Highlighting default.

Type or paste the code snippet into the Insert Sourcecode.. field.

For this example, we’ll add a CSS code snippet.

Click the Preview link and select Preview in new tab to see your code on the WordPress site.

Here’s how our sample looks, though it may appear a little different between themes. It displays proper code with line numbers and syntax highlighting.

A toolbar (top right) appears when the user moves the cursor over the code.

The 4 tool buttons offer the following options.

Perfect!

And here’s how the same code would look if we added it to the post as regular text.

Enlighter appearance options

You can change the appearance of your code to match your WP theme.

Go to Enlighter => Appearance from the Dashboard side menu.

The Appearance screen is self-explanatory, with 14 code themes to choose from.

Remember to save the changes before you preview the new display.

WordPress classic editor

This plugin also works with the WordPress Classic Editor. You can leave its default settings or choose the content you want to highlight when using the old editor.

Go to Enlighter => Editing from the Dashboard side menu.

Click the Classic Editor tab.

Your options include:

  • Back-end and front-end integration
  • Add editor formats
  • Tab indentation
  • Keyboard shortcuts
  • Tweaks
  • Fonts and background colours

That’s it. You can now add and display code correctly on your WordPress blog or website.

Share on facebook
Share on twitter
Share on email

Subscribe to my newsletter

Subscribers to my newsletter get all the latest news, reviews, advice and gossip in the world of search engines, internet marketing, self-publishing, and North Wales (where I live). You can sign up for my free newsletter by clicking this link.

My Books

I have a range of webmaster related books for sale on Amazon in both Kindle and Paperback formats. WordPress, SEO & Self-Publishing.
On Amazon

My Online Courses

My courses cover a range of webmaster related skills, from learning WordPress itself, to installing an SSL certificate on your site.
On Udemy

Comments

Leave a Comment

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

Hello, I'm
Andy Williams!

You can get up to 90% off my Online Courses for webmasters, marketers & affiliates (plus a free course on Gutenberg).

Get my newsletter
delivered to your inbox

18748

We respect your privacy

18749