5 Ways to Safely Add Custom Code to WordPress sites

Currently as of writing this post, 29.1% of the total websites run on WordPress. With this increasing popularity, WordPress site owners and administrators are constantly on the lookout for adding some modifications to the existing functionality which WordPress provides in the form of plugins and themes. But sometimes, we as site managers need additional functionalities which are not available in these existing plugins and themes.

In this post we shall go through the best and safe ways to Add Custom code to WordPress website.

Don’ts when adding custom code

Don’t directly edit code in WordPress Core, Plugin or Theme files

This method might be easiest one and users might be tempted to use this approach of directly editing the core files of WordPress, Plugins or Themes. The changes will be lost if the component edited is directly updated. This is one of the biggest disadvantage of directly editing a WordPress core file.

Add Custom Code to WordPress sites

Custom code can be added using any of the following methods:

1. Using a Plugin
2. Creating a Custom Plugin
3. Creating a Child Theme

Let us discuss each of them in detail.

1. Using a Plugin

We generally recommend the Code Snippets plugin to our clients for adding custom code to WordPress sites.

Let us go through this plugin and see how we can add custom code using this plugin.

Code Snippets

After installing the plugin a new option will be created in the menu called “Snippets”. Click on the “Add New” submenu to add custom code.

Here we shall take an example of adding custom code to “Change the Number of Products on Shop Page“. Enter Title, the Code Snippet that we have and Description of our use. There is also an option on where this particular code snippet shall run on the site.

Here is a screenshot of the snippet we just added.

Once the snippet is saved, it will be listed in the All Snippets view. Click on Activate to actually apply the snippet. Now your snippet is added to WordPress site.

2. Creating a Custom Plugin

Creating a custom plugin is the best way to add custom code to WordPress sites. Even if you switch between themes or update any plugins or themes the custom codes added will be unaffected. Moreover it gives flexibility of activating or deactivating this custom plugin as per the needs.

There are multiple ways to create a custom plugin. We shall go through the most widely used concepts:

a. Plugin to create a custom plugin

Confused? yes, you read that right –

A plugin to create a custom plugin

Pluginception is a plugin that allows to create custom plugins. This plugin helps you to create a plugin in minutes and then you can go ahead and your custom code to it. Let us go through how we can create plugin and add custom code using Pluginception.

After Installing and Activating the plugin, a new submenu shall appear in the Plugins menu option – Create a New Plugin

Once you click on Create a New Plugin, you will be presented with a form for adding header information related to plugin.

Once you click on Create a blank plugin and activate it! you will be redirected to the Editor page of that plugin. With the code editing features implemented in version 4.9 editing a plugin via WordPress dashboard becomes easier. But like WordPress we also recommend editing the plugin files via FTP and a code editor.

Copy the same snippet of code which we had used earlier for Code Snippets plugin. This way we can add custom code via a custom plugin.

b. Creating a custom plugin the traditional way

WordPress has a lot of helpful tutorials on Writing a Plugin. We will discuss on How to Create a Custom Plugin very quickly and get going. This is the best practice one should follow to create custom plugin. Let us create a custom plugin.

First step is to create a folder in <your-site-path>/wp-content/plugins/. In our case let us consider we want to create a custom plugin like the one we mentioned above – Tyche New Plugin, so the folder name will be tyche-new-plugin. The file name shall be tyche-new-plugin.php.

Once that is done header information for the plugin needs to be added.

Then you can go ahead and add your custom code over here and see the desired results.

Developer site for WordPress has some of the best practices listed which Plugin Authors shall adhere for creating a plugin. There are also different architecture patterns while developing a plugin which will help in expanding the WordPress core ecosystem with ease.

3. Creating a Child Theme

Child themes are used specifically for overriding some of the basic functionalities provided by a Theme. Most basic and widely requirement of using a child theme is overriding or adding JavaScript or Styling using CSS. WordPress developer documentation recommends using a child theme when any changes are required specific to a theme.

Similar to creating a custom plugin, child themes too can be created using two methods.

a. Creating a child theme using a custom plugin

Child Theme Configurator is a plugin which allows to create a custom child theme from any of the themes installed on your site. Let us look at adding some custom code using Child Theme Configurator plugin.

After installing the plugin, a new submenu – Child Themes will be added in the Tools menu. When you click on Child Themes submenu, an option will appear asking to select the Parent Theme and Analyze. Select theme and click on Analyze, the following options shall appear:

Since we want a simple child theme with some basic functionality use the default options and click on Create New Child Theme. A new Child Theme will now be created in wp-contents folder of your site.

To configure some custom CSS click on Query/Selector tab and either add selector or directly add the custom CSS. For example if we want to change the margin and background color of body tag then we shall add raw CSS as shown

Once you click on Save, the following confirmation screen might appear so that you are sure on what you are doing and what styles from the Parent Theme will be overridden.

Click on Save Child Values to confirm the changes. The newly added CSS will appear in the Child Styles Tab

Similarly other template files can be copied and altered using the Files tab. Detailed documentation about the usage can be found on their website here.

b. Creating a Child Theme the traditional way

WordPress codex has detailed tutorial on creating a child theme. We shall list some basic steps for quickly creating a child theme.

Best way to create a child theme is to create a new folder with appended with ‘-child‘ in the same folder as the Parent Theme folder i.e. <your-site>/wp-content/themes.

The next step is to create a style.css file with the following headers

The template above corresponds to the directory name of the Parent Theme.

The final step is to enqueue the Parent Theme and Child Theme stylesheets. For this the following snippet needs to be added in a new file functions.php in the child themes folder.

Similarly you can copy additional template files and modify as per your requirements.

Conclusion

In this post we have seen 5 different ways of adding custom code to your WordPress site. Do get back to us with any queries and we shall be glad to help you out.