The best ways to integrate code snippets into WordPress

If you run a WordPress website, there will certainly come a time when you have to deal with code snippets. Since the maintenance of code snippets can cause unnecessary work if they are integrated incorrectly, there are code snippet plugins. However, there are also other ways to integrate code snippets into your website. In this article, we compare the best ways to add code snippets to your WordPress website.

Firstly, the question should be answered: What actually is a code snippet? A code snippet is a small piece of code that extends the functionality of your website. Hence the name – which translates as “snippet of code”. This is to indicate that it is only a few lines of code. Useful examples of this are the option to integrate responsive videos and to allow additional file formats for the media centre. The interesting thing is that these code snippets can replace an entire plugin. This can enormously improve the amount of code (and therefore also the file sizes), performance and also the error-proneness of your website.

There are other cases where you need to add code snippets to your WordPress website. If you want to track who visits your website, you can add a tracking code to the header or footer. If you want to use a ready-to-use solution for cookie consent on your website, you usually add a JavaScript code to the header or footer.

Why code snippet plugins at all?

On many WordPress websites, the code has been customised, but sometimes in a way that is not sustainable. Code snippets should not be integrated directly into the “parent” or main WordPress theme. This is because they are overwritten and deleted as soon as you update the theme.

The same applies to plugins. If you change the code of a plugin directly, your changes will probably be deleted during an update. The only way to preserve your changes is if you have saved them or made a backup elsewhere. Some plugin updates only add new features, but others also include security improvements. These need to be applied correctly to make your website less vulnerable to attack. Therefore, applying code snippets incorrectly may even become a security risk, as you may be tempted to leave the update because of the code snippet.

I will now introduce you to three ways in which you can insert code to be used in a functions.php file. One of them is code snippet plugins. This does not cover every situation where you want to customise a plugin or theme, as it depends on the existence of suitable hooks for the necessary changes. Hooks are places in the code for interacting with the WordPress core, i.e. a kind of “hook” where plugins and themes can “hook in”. So if there is no hook for a certain desired function, code snippets (in functions.php) are the most sensible way.

Create a WordPress plugin

This method requires some work on the file and on the website itself, so you should be careful and make a backup before making any changes. A plugin needs at least one folder for the PHP file. Try to come up with a unique name for your folder and files (you can add a prefix based on your name or the name of your company, or something similar (for example “Raidboxes.io Disk Usage Sunburst”).

In this file you need one more thing – a header with the plugin information. Here you also need a declaration of your plugin name, similar to the following:

<?php

/**
* Plugin Name: your plugin name
*/

Well done! You have now created your first custom plugin. After the header, simply add your code snippets (the ones you want to insert into functions.php) and upload the folder to your /wp-content/plugins/ folder on the server. Your plugin should then appear under Plugins in the admin area.

I prefer the approach of creating a custom plugin because it’s great for inserting code into the functions.php. It’s also easy to set up.

Use a WordPress plugin

For those of you who aren’t confident with custom plugins, one of the Code Snippet plugins is a great way to manage your code snippets, or generally add custom code to WordPress sites. You’re probably already used to installing third-party plugins, so this might be easier than the first option.

Simply install the desired plugin and navigate to the new menu item that appears in the administration area. Please note that the various plugins can be structured differently. But most of them are simple and easy to understand. You should rename each code snippet you add. This is very useful to make it easier to find a specific code snippet. This approach is highly recommended and can save you some trouble with many code snippets.

Decisive factors for choosing a good plugin with which you can execute code snippets on your website include the influence on the performance of your website and the user-friendliness. I will now introduce you to some WordPress code snippet plugins.

The best code snippet plugins for WordPress

Code Snippets

This extension was developed by Code Snippets Pro and is my personal favourite. The idea of the extension is that you can add small PHP code snippets. It provides an easy solution to add your own HTML, JavaScript or PHP code snippets. Using the plugin is similar to the other admin menus of WordPress and is very easy to use. The plugin allows you to add code snippets to your theme using a graphical interface. Note that this extension is not suitable for adding tracking codes or similar. This extension is best suited for adding more functions to the “functions.php” file of your theme.

Features:

• You can use PHP code in widgets, pages and posts.
• Add PHP to create contact forms and process any kind of input or upload.
• Add PHP to create user-optimised content.
• With PHP, you can customise every aspect of your WordPress installation.

Insert PHP Code Snippets

This plugin was developed by xyzscripts.com and is a popular extension that is updated regularly. With this plugin, you can use PHP code that can be easily pasted into the normal WordPress editor, as it creates snippet shortcodes for each code you add. The insertion also works with a shortcode in the sidebar of the text widget of the page.

Features:

• In the TinyMCE Editor you have an intelligent dropdown menu
• Convert PHP snippets into shortcodes for easy implementation
• Simple and flexible functionality

Custom CSS Pro

With the Custom CSS Pro WordPress plugin, you can easily add custom CSS code to your WordPress website. This free WordPress plugin offers some handy features, including a real-time preview and line numbering to make editing the code a little easier.

Features:

• Visually like the environment in Visual Studio Code or Sublime Text
• It’s easy to add custom CSS code to WordPress
• Live preview in real time

Insert Headers and Footers

This type of plugin makes it easy to insert code into the header or footer. The extension was developed by WPbeginner, who also developed the famous form plugin WPforms. With the plugin, you can easily insert code snippets for the integration of services such as Google Analytics and Facebook Pixel.

Features:

• Quick set-up
• Simply insert headers, scripts and other code
• It allows you to add any code or script along with HTML and JavaScript
• Is the easiest option for inserting tracking codes

Tools integrated in Elementor (Pro version)

If you use the Pro version of the Elementor page builder, you don’t need to install another plugin. Elementor has a built-in tool for inserting tracking codes and the like. Elementor also supports the renaming of all scripts that you add to your WordPress website. To find the Elementor Custom Code, follow these steps. Go to Dashboard > Elementor Custom Code. There you insert the script you want to place on your site. Note that you must have an active Elementor Pro licence to be able to use the custom code tools integrated in Elementor.

Features:

• Simple and logical structure
• Integrated into your page builder

Use a child theme

This method is the least recommended for adding code snippets, but it still works well. It is slightly more complicated than creating a plugin. A child theme should contain code and styling that applies to the layout and look of your website. But a snippet is usually used to change the functionality and therefore does not actually fall under the “responsibility” of a child theme.

To create a child theme, create a folder with the same name as your parent theme and with the suffix “-child” (if the folder of the parent theme is called “raidboxes.io-theme”, the folder of the child theme would be “raidboxes.io-theme-child”).

You need at least two files in this folder: The stylesheet file called style.css and the PHP file called child.php.

The style.css file must contain a header with the following minimum specifications:

/*
Theme Name: Raidboxes.io Theme Child
Template: Raidboxes Theme
Version: 1.0.0
*/

Then add your code snippet to the end of the functions.php file and upload the child theme folder to the server under /wp-content/themes/.

If everything is OK, you can open the Design → Themes menu in your admin area and activate the new child theme. If you would like to find out more, we explain how to create a child theme in the magazine.

Conclusion

This article has provided you with some basic information about your options for integrating code snippets into WordPress. The decision between creating your own WordPress plugin or child theme or using a code snippet plugin is up to you – and depends solely on your preferences, as the three methods fulfil the same functional purpose. It’s best to use what suits you best