How to Add a Code Snippet to a WordPress Page

Adding a code snippet to WordPress isn’t as difficult as it seems, but it should be done correctly, so it doesn’t negatively impact your site. 

In today’s article, I’ll share the step-by-step process to add a code snippet to your WordPress. So even if you do not have any coding experience, you’ll not find it hard to add a code snippet to WordPress. 

Before jumping into the tutorial, let’s first see a few reasons to add a code snippet to WordPress. 

Reason to Add a Code Snippet to WordPress Page

There can be several reasons to add a code snippet to a WordPress page. For example: 

• Fixing an Error
• Changing the Default Feature of WordPress or a Plugin
• Improving the Site and User’s Experience
• And more. 

Instead of updating to a new theme or plugin, using a code snippet may be more practical. Your site's performance may suffer if you use too many plugins. 

Further, you might favor dabbling with the code rather than shelling out money for a premium theme or plugin.

Now that we know that let's look at the most secure methods for incorporating code into WordPress.

How to Add a Code Snippet to WordPress Page?

There are three methods to add a code snippet to a WordPress page or post. I’ll explain all three of them. 

So let’s jump into it. 

1. Add a Code Snippet to WordPress Using the Plugin

The first method to add a code snippet to WordPress is by using a plugin. Fortunately, plugins available in the market can help you with this. 

Some are free, while a few are paid with some extra features. 

You can use any plugin you want, but I mostly like to use the Code Snippets plugin. It is a free one but also has a premium version. 

Its free version does the job pretty well, and you’ll rarely need to go to the pro version in case you are an agency or a software company. 

So let’s see how you can install and activate it and add code snippets to WordPress using this plugin. 

1.1. Install the Code Snippet Plugin

You need to download the Code Snippets plugin and install it on your site. To install the plugin, navigate to the Plugins » Add New from your WordPress admin dashboard and search for the ‘code snippet’ in the search bar. 

I have already installed it and need to activate the plugin. 

1.2. Navigate to the Snippets

Once you have installed and activated the plugin, a new option will add in the WordPress sidebar. It will have a few built-in code snippets you can review and activate if you find them useful. 

To add a new snippet, navigate to the Snippets » Add New from your WordPress admin dashboard. 

1.3. Paste the Code

After that, give a name to the snippet. You can name it whatever you want. It’s only for admin purposes to identify the snippet. 

Once you have named it, paste the code into the Code Editor by pressing Ctrl+V. 

Note: The free version of this plugin only allows you to add PHP code snippets to WordPress. However, if you want to add custom CSS or JS to WordPress using this plugin, you’ll need to buy its pro version. 

I do not recommend buying the pro version, as you can add the CSS using the WordPress theme customizer. But in the end, it entirely depends on your needs. 

1.4. Save the Snippet

Now scroll to the bottom of the page and click the ‘Save Changes and Activate’ button to save the snippet. 

2. Add a Code Snippet in the functions.php file of Your Active Theme

In the 2nd method, I’ll paste the code into the active theme’s functions.php file. Please follow the following steps to paste the code and add a quantity label. 

2.1. Navigate to the Themes File Editor

Navigate to Appearance » Theme File Editor from your WordPress admin dashboard. 

2.2. Select the functions.php File

By default, your activated theme will be selected. You just need to click the functions.php file, and the file’s code will be displayed in the code editor. 

2.3. Paste the Code 

Now scroll to the end of the file’s code and paste the code. 

Note: If you update the theme, this code will be removed, so I recommend pasting the code using the plugin. 

2.4. Update the File

Once you have pasted the code, click the blue ‘Update File’ button to save the settings and the code you added. 

3. Add a Code Snippet By Creating Your Own Plugin

Another method to add a code snippet to WordPress is by creating a custom plugin. I know it seems that you need very well coding knowledge and experience to create your own WordPress plugin. 

But it is not like that. 

This plugin will be different from the other WordPress plugins as it will not have the technical coding side, i.e., the dashboard to manage the code snippets and other features that a typical plugin will have. 

By creating your plugin, you’ll have a single place to add different code snippets to WordPress. If a snippet harms your site and you can’t log in, you can deactivate the plugin or remove it from your WordPress site using the FTP or Cpanel. 

Note: Only code that needs to be inserted into the functions.php file should be handled in this manner.

Let’s dive in and see how you can add a code snippet by creating your custom plugin. 

3.1. Create a New Folder on Your Computer

First, you need to create a new folder with the plugin name you want on your computer. 

3.2. Create a New PHP File Into Your Computer

After creating a new folder, open it to any code editor like Visual Studio or Notepad++ and create a new PHP file. You can name it whatever you want; just ensure to give it the .php extension. For example, mycustomplugin.php is the file name.

After naming the file, paste the following code and save it. 

<?php
/*
Plugin Name: Custom Plugin to Add Code Snippets
Plugin URI: https://mysite.com
Description: Custom Plugin for adding custom code snippets to WordPress
Version: 1.0.0
Author: Woosuite
Author URI: https://aovup.com
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Note: You can change the information you want. For example, you can add your site URL in front of the plugin URI and change the other information too. You can also remove the license if you want. 

3.3. Create a Zip File

After saving the file, you need to create a zip file of the main folder of the plugin. You can use software like Winrar if you want, but if you are using windows 11, you’ll have a built-in function to compress a folder to a zip file. 

3.4. Upload the Zip File to Your WordPress Site

Now that you have created a basic plugin, you need to upload the zip file to your WordPress site. 

To upload the file, navigate to Plugins » Add New from your WordPress admin dashboard and click the Upload button to upload the file. 

Once you click it, you’ll see a pop-up where you can select the file from your computer. 

3.5. Install the Plugin

Once the file is uploaded, click the Install Now button in front of the plugin’s name to install it. 

Once the plugin is installed, you’ll be redirected to the page, from where you can click the Activate button to activate the plugin.

3.6. Navigate to the Plugin Editor

Once the plugin is activated, navigate to the Plugins » Plugin Editor from your WordPress admin dashboard, select the plugin you created from the dropdown, and click the Select button to edit it. 

3.7. Paste the Code Snippet

Now paste the code snippet you want in the file. You can also add multiple snippets if you wish. 

3.8. Update the File

Once you have pasted the code snippet, click the blue Update File button to save the code. 

Final Thoughts

I hope this article was helpful to you and you were able to add code snippets to WordPress without any trouble. You might want to read the following guides to get some useful code snippets to add to your WordPress site. 

• How To Add Custom Product Tabs In Woocommerce?
• How to Add a WooCommerce Quantity Label Before Quantity Field?
• How to Change the WooCommerce Out-of-Stock Text?