If you have a blog running on WordPress, especially one that is technical or related to coding, then it is quite likely that you would want to add a code snippet in a WordPress post. So how do you display a code snippet in a WordPress post, without the code being read as actual code and being rendered by WordPress at run time? There are two simple ways to display a code snippet in a WordPress post as content within your post.
- Using the code block in the block editor
- Using a plugin
Let us run through both options below, and you can choose the one that works for you best.
For a code snippet to use in our example, I have taken a PHP function from an article on useful code snippets. The code snippet used is a function that can be added to your WordPress installation, to allow users with the contributor role to also upload images. By default, contributors cannot upload images to a WordPress site.
Display a Code Snippet in a WordPress Post using the Block Editor
1. Go to the Posts tab, and click on Add New. If you want to add a code snippet to an existing post, then hover over the existing Post and then click on Edit.
2. In the post body, go to the point in the post where you want to insert a code snippet
3. Click on the + icon on the right to add a block from the block editor. Type Code in the search box, and select the <> Code block.
4. Paste your code snippet into the Code block. You can adjust the text colour and font, and the border colour.
The code example is displayed as shown below. This option is straightforward, simple to use, and ideal if you are only adding a code snippet occasionally.
//Code Snippet using Code Block from Block Editor
// Allow Users with the contributor role to upload images
if ( current_user_can('contributor') && !current_user_can('upload_files') )
add_action('admin_init', 'allow_contributor_uploads');
function allow_contributor_uploads() {
$contributor = get_role('contributor');
$contributor->add_cap('upload_files');
}Now let us look at the alternative option of using a plugin.
Display a Code Snippet in a WordPress Post using a Plugin
A plugin provides more than just a standard code snippet display. A plugin can help highlight the syntax of your code just like popular code editors, making it more readable. It can also display line numbers, and make it easier to select and copy the code if your readers want to try it out in their programs.
The plugin in use, is the Syntax Highlighter Evolved plugin.
1. Go to the Plugin tab on your WordPress dashboard, and click on Add New.
2. In the keyword search box, enter “Syntaxhighlighter”. When the plugin is displayed, click on Install to install the plugin to your WordPress installation.
3. Activate the plugin, and then go to Settings for the plugin. You can leave the plugin on its default settings or modify the same as per your needs.
4. Back to the post tab, and add a new post or edit an existing post. Go to the point in the post where the code snippet is to be added. Again, select the + icon, but this time search for the Syntax Highlighter block as shown in the image below.
5. Select the Syntax Highlighter Code block, and then paste your code snippet into the block. In the block settings, you can set the code language, choose whether to display line numbers or not, and so on. In a published post, the code snippet will be displayed as shown below.
//Code Snippet using Syntax Highlighter Evolved Plugin
// Allow Users with the contributor role to upload images
if ( current_user_can('contributor') && !current_user_can('upload_files') )
add_action('admin_init', 'allow_contributor_uploads');
function allow_contributor_uploads() {
$contributor = get_role('contributor');
$contributor->add_cap('upload_files');
}
The plugin option is recommended if you are adding code snippets frequently in your posts. Whether your reader is a novice or an expert, the plugin makes the code snippet that much more readable and easier to understand and use.
There is also an option to add code manually to a WordPress post, but it is only for the more advanced users. I believe the majority of authors and bloggers will be able to use either of the options outlined above.
