How to Add Custom Code Snippets to WordPress using the Code Snippets Plugin

How to Add Custom Code Snippets to WordPress using the Code Snippets Plugin

We offer comprehensive and detailed WordPress tutorials mainly using custom code snippets which enable you to extend the functionality of a standard WordPress installation. These custom code snippets are small chunks of PHP, that extend your website, like a mini-plugin but with less load on your website and server. You can of course extend WordPress’s functionality by installing plugins from the WordPress repository to achieve your desired outcome. However, we have found that when you have a high number of plugins installed in WordPress it can slow down your website and admin area quite significantly, impacting upon yours and your visitors user experience.

In our WordPress tutorials, our focus is on adding additional functionality through custom code snippets using the WordPress functions.php file rather than using multiple plugins due to the issues caused by having multiple plugins installed. However, we’ve received some excellent feedback – which is fantastic, please keep it coming so we can continue improving – asking how to add custom code snippets to WordPress without editing the functions.php file and after adding the custom code snippets from our great tutorials the functions.php file it has grown in size, become large and is becoming harder to manage.

In this guide, we will show you how to install the Code Snippets plugin from the WordPress repository, how to add custom code snippets into the plugin, how to activate them, how to export your existing custom code snippets in a JSON or PHP format and how to import your existing custom code snippets from a JSON file into Code Snippets. We will also be covering how to fix any errors that arise from rogue code while using any custom code snippet.

Code Snippets Plugin

We have chosen the Code Snippets plugin due to it simplicity to configure, is maintained with regular updates and offers a simple way for you to run PHP code snippets on your website without the need to add custom code snippets to your theme’s functions.php file. In addition, to PHP code snippets the plugin is also capable of working with HTML, CSS or Javascript code and offers you complete control over where the custom code snippets will run within WordPress. The plugin is also great for people who like to regularly change their WordPress themes as the functions.php file is individual to each theme, meaning when you change a theme you’ll need to copy the contents of the functions.php file to the new theme each time. With Code Snippets you don’t have to as the custom code functions are not stored directly in the functions.php file.

Installing the Code Snippets Plugin

To get started, you’ll need to install the Code Snippets plugin from the WordPress repository and activate the plugin using the Activate button.

Code Snippets Plugin Install

Once activated, the plugin will add a new menu option in the WordPress admin sidebar menu called Snippets. In the Snippets menu you can quickly see existing snippets (All Snippets), add a new snippet (Add New), import your existing custom code snippets (Import) and adjust the settings of the Code Snippets plugin (Settings).

Code Snippets Plugin Menu

Guide to Using Code Snippets Plugin

Overview

In this section we will give you a quick overview of how to add a new code snippet. For a more in-depth guide see the section below Add New Code Snippet Example. Select the new Snippets menu option from the sidebar and the Snippets dashboard will open showing all current snippets. Here you will see some example pre-installed snippets, these have been created by the plugin developers which highlight how to add custom PHP, HTML, CSS or Javascript snippets.

From the dashboard, you can add a new custom code snippet and activate the snippet for use in WordPress. To get started, you would simply click the Add New button.

Code Snippets Plugin Dashboard

This will open the Add New Snippet panel. In the add new snippet panel you can enter a name for your new custom code snippet, the code for the new custom code snippet, the description of the new custom code snippet and tags so you can easily identify the new custom code snippet.

Code Snippets Plugin Add New

Options

The Code Snippets plugin provides an easy to use GUI for you to manage your custom code snippets. In the All Snippets dashboard you can turn custom code snippets on or off, edit, clone, export or delete. In the bulk options menu you can activate, deactivate, clone, download, export or delete. When you use the export function you can save your existing custom code snippets in either a JSON file which you can use to import into another Code Snippets installation or as a PHP file so you can create your own plugin or or directly add into a WordPress theme functions.php file.

Code Snippets Plugin Bulk Options

Settings

Code Snippets enables you to add custom code to your WordPress website first time, the plugin just works. You can change various settings in Code Snippets such as enabling or disabling tags and descriptions, change the theme or activating code snippets by default. The Settings page is accessible from the Snippets menu in the WordPress admin sidebar.

Code Snippets Plugin Settings

Add New Custom Code Snippet Example

Now we will show you how to add a new code snippet using our Remove Lost Password Link function. You can of course use any function you wish. Select the Add New option from the Code Snippets admin sidebar menu. Once the Add New Snippet panel opens, you will need to add a name for your new snippet, we have used Remove Lost Password Link. Now we will need to add our custom code snippet into the Code section. In our example we have used the following code:

function vpsb_remove_lostpassword_text ( $text ) {
         if ($text == 'Lost your password?'){$text = '';}
                return $text;
         }
add_filter( 'gettext', 'vpsb_remove_lostpassword_text' );

The next option is to decide where the function should be run. You can run the custom code snippet everywhere on your website, on the back-end (administration area only), front-end (website only) or just run the code once. As this function will only be used on the login page we can safely choose Only run on site front end.

TIP If you are ever unsure where to run the code, either whole website, back-end, front-end or just run the code once, use the default option of Run snippet everywhere.

Below this, you will see the description text area, where you can add a description of your custom code snippet. In our example, we have added, This Code will remove the Lost Password Link for the WP Login page. You could any descripton you want to help you understand what the code does, where you found it or maybe why you are using it. You can also assign tags to your code snippet help sort your code snippets by topic such as Lost Password, Login, etc.

Code Snippets Plugin Example New

Once you have added the title, code, selected where the custom code snippet should run and a short description, you’ll need to save your code by selecting the Save Changes and Activate button. This will save your new custom code snippet and immediately activate it. If you only want to save the new snippet and not activate it immediately, you can select the Save Changes button.

Once your changes have been saved successful you’ll receive a confirmation message that the snippet has been added and activated or just been added to the Snippets dashboard.

Code Snippets Plugin Example Success

In the Snippets dashboard you’ll now see that the custom code snippet called Remove Lost Password Link has been added to the Snippets section and has been activated or not activated depending on your choice.

Code Snippets Plugin Example Added

Import Existing Code Snippets File

The Code Snippets plugin provides an easy way for you to upload and import one or more previously exported Code Snippets files using the Import option. The Import option enables you to import a previously saved Code Snippets JSON file and is particularly ideal if you are moving your existing snippets between WordPress websites, moving servers or sharing some custom code snippets with others.

Now we will show you how to Import a previously saved Code Snippets JSON file into your existing custom code snippets. Select the Import option from the Snippets menu option in the sidebar menu or you can select the Import button from the top of the Snippets dashboard.

Code Snippets Import

This will open the Import Snippets options dashboard. Firstly, before uploading your JSON file you will need to decide what should happen should you have an existing custom code snippet with the same name in the Duplicate Snippets section. You can ignore any duplicates, replace any existing snippets with new or do not import duplicate snippets. Now, you will need to choose one or more Code Snippets files (JSON or XML format) and upload them using the Choose Files button. Once you are happy to import the selected file, simply click the Upload files and import button.

TIP The Duplicate Snippets option will only check for existing snippet names, it does NOT check the existing snippet code for duplicates.

Code Snippets Import Options

Once your custom code snippets have been imported you will received a Successfully imported message.

Code Snippets Import Message

Now you have successfully imported your previously custom code snippets to the Code Snippets plugin. Now select the All Snippets link below the success message and you will be taken to the All Snippets dashboard, where you will see the imported custom code snippets. As you can see in the image below all the imported snippets are deactivated upon import and you will need to manually activate them. You can activate them individually or activate using the bulk option menu.

Code Snippets Import Success

Code Snippets Plugin Example Import Options

Handling Code Snippets Errors

If you were editing the functions.php file directly and made a mistake in the custom code, it would make your WordPress website inaccessible and display a 500 internal server error. In order to fix this you would need to manually change the functions.php file to deactivate the offending custom code snippet via FTP or alternatively using your DirectAdmin or cPanel File Manager. However, the Code Snippets plugin has different levels of protection built-in to prevent these types of errors occurring.

In the code we entered above called Remove Lost Password Link we removed the character r from line 3 in code. As you can see in the image below there is a warning next to the line to show us that there is an error in the custom code snippet.

Code Snippets Plugin Code Error

Now, for example lets assume you didn’t see the error and saved the custom code snippet by mistake, you’ll be met with an error page. The Code Snippets plugin has detect that a syntax error has occurred and deactivated the custom code snippet automatically to ensure our website keeps functioning as normal.

If you do get this error message, firstly don’t panic, it’s easily fixed. As you can see in the image below the plugin has highlighted the error in the code syntax error, unexpected '$text' (T_VARIABLE) so we can debug it. All you need to do is press the back button on your browser, amend the error in the custom code snippet and then save the amended snippet.

Code Snippets Plugin Code Error Message

There maybe occasions when the Code Snippets plugin doesn’t detected the error in your custom code snippet and you will see the following WordPress error message. Again, don’t panic, it’s easily fixed.

Code Snippets Plugin Code Error Message WordPress

The Code Snippets plugin has a built-in Safe Mode. So with the Safe Mode option activated, all custom code snippets in the Code Snippets plugin will be deactivated and not executed. This will allow you access to your WordPress dashboard so you can disable the custom code snippet causing the error.

To activate Safe Mode you’ll need to add the following code into your wp-config.php file. The wp-config.php file, is located in your root directory called public_html. You can edit this file using your favourite FTP client or use the File Manager built into either your DirectAdmin or cPanel dashboard to edit and update the file.

// Code Snippets Safe Mode 
define('CODE_SNIPPETS_SAFE_MODE', true);
/* That's all, stop editing! Happy blogging. */
IMPORTANT You need to make sure that you enter the code above before the line that reads /* That’s all, stop editing! Happy blogging. */ in your wp-config.php file.

Code Snippets Plugin CodeSafe Mode WP-Congfig.php

Now when you access the Snippets dashboard where you’ll see the following warning at the top of the page. This is just to advise you that safe mode is activated and that any custom code snippets will not execute.

Code Snippets Plugin CodeSafe Mode Dashboard

Once you have deactivated the custom code snippet causing the error you’ll need to deactivate safe mode. Again, in your wp-config.php file, simply comment out the code snippet safe mode command by adding # to the beginning of the code.

// Code Snippets Safe Mode
#define(‘CODE_SNIPPETS_SAFE_MODE’, true);
/* That's all, stop editing! Happy blogging. */

That’s it. You have now successfully installed the Code Snippets plugin to your WordPress installation, added a new custom code snippet called Remove Lost Password Link and activated it. Also, we have shown you how to handle any custom code snippets error and import a previously created custom code snippet file.

VPSBasics

VPSBasics

This guide was written by the VPS Basics editorial team, led by Gilberto Van Roosen. They are a unique blend of people who are dedicated to providing highly detailed, comprehensive and easy to follow tutorials, written in plain English. They specialise in tutorials for managing Linux servers, its software and WordPress.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.