How to Add Custom Code Snippets to WordPress Safely

Updated: June 23, 2022

Even though WordPress already has so many customization options, there might be a time when you want to add code snippets to your WordPress to add a certain functionality.

For instance, you may want to add a custom code with a specific function that you can’t find on any available plugin, or you don’t want to use the plugin since you are taking precautions for your site security. Aside from getting the code from some tutorials, if you don’t have good knowledge of the coding language, fortunately, there are some online platforms where users can share and copy custom code snippets like GitHub and WordPress.org developer.

There are 3 ways to add code snippets safely to your WordPress

  1. Creating a child theme
  2. Using a plugin
  3. By creating a custom plugin.

Before getting started, it’s always recommended to backup your WordPress site periodically using your hosting provider backup feature or a backup plugin to have assurance in case you’re experiencing issues from miss-configuration or unsuccessful updates down the road.

Method 1: Create a Child Theme

A WordPress child theme is a child of an existing parent theme that provides a chance to safely make changes to your parent theme without editing the parent theme itself.

You may often read about child themes when you start looking to make changes to your WordPress site theme. If you want to create one, we already covered it in our previous article on how to create a child theme for your WordPress site.

Adding the custom code snippet to your WordPress child theme is similar to any regular theme which is by opening the “function.php” file on the Appearance Theme File Editor page and then putting the custom code there.

However, if you just want to make a few minor modifications it might be overkill to create a child theme, you may want to use the other two methods that we’ll show you in this post.

Method 2: Using a Plugin

Now we’ll show you how to add code snippets to your website using a plugin called Code Snippets. Before we get to the action, we’ll explain why we choose this plugin first.

Code Snippets is a free (pro version is coming soon) plugin and the most popular option for running code snippets on your site which is active on over 600.000 at the time of writing. You can get the plugin from wordpress.org.

Beyond being an easy and simple plugin to run and manage code snippets on your site, Code Snippets removes the need to add a custom code to your theme’s function.php file which makes your modification likely to persist after a theme update. And if you’re not using a child theme function.php your main theme file can get rather long and messy after a while and you’ll lose your work if you update your theme.

Once you are ready, let’s install and activate the Code Snippets, then it will add the “Snippet” menu in your WordPress admin dashboard, let’s try to click it.

As you can see in the above image, there are already some pre-made code snippets ready to use if you need them.

All snippets in Code Snippets plugin can be activated and deactivated with just a click like a light switch.

We will use custom code to disable the Gutenberg editor for this tutorial. You can copy the code from our previous article on how to disable the Gutenberg editor.

Now, to add the custom code, click on the Add New button, and you will be taken to the Add New Snippet page. On this page, you’ll add the title and paste the code into the available editor just below.

Once the code is in place, click on the Save Changes button to save the snippet then proceed to activate it by clicking the Activate button.

Now, when you try to add a new post, the Gutenberg editor will be disabled and you will get the Classic Editor back in action.

Go back to the Code Snippet home and you’ll find your new snippet there at the bottom of the snippets list.

You can deactivate the snippet anytime just by clicking on the item switch.

Method 3: Create a Custom Plugin

It might sound overwhelming to create your own plugin if you have never done it before but, don’t worry, creating a plugin for our code snippet is actually easy.

You can create the plugin from your PC. Let’s start creating a folder for the plugin, get inside the folder then create a text file with a name of your choice and add a PHP extension at the end of it, something like this “myplugin.php” will do.

Now open the file and paste the following snippet into the file

<?php
/*
Plugin Name: My plugin
Plugin URI: https://www.wppagebuilders.com
Description: Custom Plugin for adding custom code
Version: 1.0.0
Author: WPPagebuilders
Author URI: https://www.wppagebuilders.com/
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Then, continue by creating a ZIP file from the folder with any file archiver you have.

Once the file is ready, go to your WordPress admin page then upload the file by going to Plugin Add New → Upload Plugin → Choose File and select the ZIP file you just created, then click the Install Now button to install the plugin.

Now, you’ll find the file you just uploaded in the plugin list, We recommend activating it later after adding the code snippet you want to add to the plugin.

To add the snippet to the plugin go to Plugins Plugin File Editor. From there select your plugin in the “Select plugin to edit “ dropdown list, then click Select to open the file editor of your plugin.

We will use the Disable Guttenberg Editor custom code from before for this time too.

Once the custom code is in place click the Update File button to save your plugin changes. Then, continue by activating the plugin in the installed plugin list.

Now, similar to the previous method your Gutenberg editor is gone and you get a classic editor instead.

To Sum it Up

WordPress already has plenty of customization ready for you to use. Moreover, there are more than 50.000 plugins that can help you to expand your site functionality. However, if you can’t find what you need, code snippets fill the gaps in your specific requirement.

With the three methods we just covered, you can safely add the code to your WordPress theme without the need to worry about breaking things and losing your work.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.