How To Use Code Blocks in WordPress

WordPress is a robust Content Management System that powers over half of all the websites on the internet. The built-in CRM makes it easy for one to create a website even if you’ve never written a computer program before. While it is so easy to display a block of normal text on a WordPress website, the same cannot be said for computer code. A piece of code must be adequately displayed for viewers to analyze and understand it. And that’s where WordPress code blocks come in. 

If you want to know how to use code blocks in WordPress, you’ve come to the right place. In this article, we’ll walk you through the entire process so you can start sharing code snippets with your readers. Continue reading to find out more.

How to Use Code Blocks in WordPress

Displaying a computer program as a normal webpage text can be disastrous. Many users will find it hard to visualize and understand. Fortunately, many WordPress editors have a code blocks feature that allows you to display a computer program in a code format.

Fortunately, using code blocks to display computer code is relatively easy. To get started, you’ll need to switch to the native WordPress editor since some text plugins might not have the feature. Once you have done that, follow these steps to add a block of code on a website page:

1. Open the webpage you want to add a code block to by clicking the “New” button.
   
2. Type in “/code” and hit “Enter.”
   
3. Type or paste in the code you want to be displayed and press the “Enter” key.
   
4. You can further use the code block toolbar to customize the appearance of the code you’ve just written. For instance, you can use the “B” button to make a line bold or the “i” button to italicize it.
   
5. Once you’re done authoring your webpage, click the “Preview” button to see what the code block will look like on a live version.
   
6. If satisfied with the final results, hit the “Update” button for others to see the code block as well. 
   

How to Change the Typography of Your Code Block

Typography speaks volumes and can make or break the aesthetics of not only your code block but also the entire web page. To change the typography of your code block, follow these steps:

1. Highlight the code block whose typography you want to alter.
   
2. Click the “Settings” icon in the top right corner of the screen.
   
3. Under the “Typography” section, specify your preferred typography.
   
4. Click the “Update” button to save the changes.
   

You can further customize the aesthetics of the block by changing the color, background, letter spacing the line spacing.

For example, if you have a dark-themed website, you might also want your code block to have a different background.

How to Delete a Code Block in WordPress

Code blocks aren’t permanent and just like any other elements of a WordPress webpage, you can delete them. Here’s how to go about the process:

1. Open the webpage or the post that has the code block you want to delete.
   
2. Click on the code block you want to delete to highlight it.
   
3. On the widget that pops up right at the top of the code block, click on the three dots.
   
4. From the options, select “Remove Code.”
   

The above action should delete the entire code block from the web page. Alternatively, you can simply select the block and press the “Delete” key. You can also press the “Ctrl” + “Shift” + “Z” keys at the same time and that should achieve the same results.

How to Edit an Already Published Code Block

Once in a while, you’re bound to make errors. You might also stumble upon a better way to execute the idea through code. WordPress allows you to edit already existing code blocks by following the instructions below:

1. Open the page that has the code block you want to edit.
   
2. Click on “Edit.”
   
3. Click the code block to enable code editing.
   
4. Once you’re done making the changes, click the “Update” button.
   

How to Add a Code Block to Your WordPress Website Using a Plugin

If you often add code snippets to your website, then it might be best to get a more robust plugin to help you. One popular powerful and excellent code block is the SyntaxHighlighter Evolved plugin. 

This plugin has an advantage over the native WordPress Editor because:

• It highlights the number of lines in a code snippet
• It supports multiple programming languages
• It allows your viewers to copy and paste the displayed code

Here’s how to use the plugin to manage code snippets on your website better:

1. Install and activate the SyntaxHighlighter Evolved plugin.
   
2. Open the page or post if you want to add a code block.
   
3. Enable editing and click the plus button.
   
4. Search for “SyntaxHighLighter Evolved” and open the first result that comes up.
   
5. Paste or write the code in the available code block.
   
6. Click the settings icon in the top-right corner of the screen and navigate to the “Block” tab.
   
7. Specify how you want your numbering to appear and which lines of code you want to be highlighted.
   
8. You can also turn on the “Make URLs clickable” if you want to make your code clickable.
   

To change the color and formatting scheme of your code block, follow these steps:

1. Go to “Settings” and navigate to the “SyntaxHighlighter” section.
   
2. Change the theme of your block.
   
3. Hit “Save” the “Preview” to preview how the changes will look in live mode. 
   

Additional FAQs

How do you make a code block a clickable link?

To make a code block a link using the WordPress editor, follow these steps:

1. Select the line of code you want to act as a link.

2. From the pop-up widget, select the link icon. Alternatively, you can press the “Ctrl” + “K” keys on your keyboard.

3. Enter the URL you want the code to link to and hit the “Enter” key.

Can I highlight code using the code block editor that the WordPress editor provides?

No, the code block provided by the native WordPress editor doesn’t allow users to copy and paste the code. To do so, you’ll need the help of an advanced code block editing plugin like the “SyntaxHighligher Evolved” plugin.

Does Elementor have a code blocks feature?

Elementor is a popular drag-and-drop plugin that’s used for building WordPress websites. Unfortunately, if you’re using the plugin to create websites, you won’t find a block that lets you format computer programs on your website. Therefore, you have to switch to the conventional WordPress editor to finish the task.

Get Your Website Up and Running

Whether you run a programming blog or simply like to share code snippets on your website, knowing how to use code blocks in WordPress is super important. Code blocks will give your readers an easy time and overall increase your website’s user experience. And as you can see, inserting code blocks is a relatively easy process, especially with the native WordPress editor. 

Have you tried using the code blocks that WordPress provides? What about the SyntaxHighlighter Evolved plugin? Please share with us your experience in the comments section below.