How to add custom code to WordPress websites

Featured image *How to safely add custom code to WordPress"

Users are often looking for ways to tweak their websites, plugins and themes, or to add some modifications to an existing functionality. In most of these cases, you can do so by adding custom code to your WordPress website.

There is nothing wrong with adding custom code to your website. However, there are a few things that you need to look out for when making these changes to your WordPress website.

This article highlights what to look out for, and the best practices to adding custom code to your WordPress website.

What to look for before adding Custom Code Snippets in WordPress

The easiest way to add code snippets authors suggest in their tutorials, is to add the code snippet to the theme’s functions.php file. However, there are a number of restrictions and disadvantages when you add code snippets to the theme’s functions.php file.

Each time you upgrade your theme the custom code snippets you added to your functions.php file will be overwritten, unless you manually upgrade the theme, or manually copy the code snippets from one functions.php file to the other. Having in mind that most developers release upgrades quite frequently, especially when using premium themes, adding code snippets to the theme’s functions.php file becomes very difficult to maintain.

Also, if you want to change the theme you have to migrate the code as well, which is definitely not good for the long run.

Another disadvantage is that the theme files are executed on every page and by adding the code snippets to the theme’s functions.php file, the risks of breaking your entire website are much higher.

Let’s check out the best practices on how to add custom code snippets to your WordPress site so you don’t need to worry again about missing some code snippet, forgetting to migrate it, or breaking a functionality when upgrading your theme.

Adding custom code snippets to WordPress sites

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

  • Using a plugin (refer to our WordPress plugins introduction to learn more about what WordPress plugins are)
  • Creating a custom plugin
  • Creating a child theme

Now, let’s discuss each of the methods in detail.

1. Using the Code Snippets Plugin

The Code Snippets plugin is a great way to add custom code to WordPress site, and if you are not a fan of writing some code yourself, this way is easier than creating your own plugin.

After installing the plugin a new Snippets section is added to your WordPress menu, which lets you add new snippets. Each snippet will have space for the code and a description for additional information on what the code does.

Tip: If you are using a useful code snippet from a site, add the URL in the description so you remember where the code came from.

Just like plugins you can enable and disable your custom code snippets as well as export them into PHP files. In some cases custom snippets cause conflicts with other plugins or themes, so deactivating all custom code is useful for targeting issues.

2. Creating your own site-specific plugin

Creating your own custom site-specific plugin is the best way to add custom code to WordPress sites, because you have total control of the code. No plugin or theme update will affect your custom code. Furthermore, it gives the flexibility of activating or deactivating the custom plugin as per your needs.

You do not need to be a PHP guru to create a site-specific plugin. Just follow the below three easy steps.

1. Create the plugin directory

First, you will need to create a directory for the plugin and name it. It can be any name, such as the site’s website. The plugin’s directory should be created in the /wp-content/plugins/ directory on your website. For this example, we are calling the plugin wpwhitesecurity-shortcodes. Note: always use dashes and not spaces in directory names.

2. Create the plugin file

Next, you will need a main file for your plugin. Although there are no rules in regards to what the file name should be, the best practice is for the filename to be the same as the plugin name. So in our example the plugin’s filename is wpwhitesecurity-shortcodes.php.

This file should at least include a title and a description.

Create this file using a text editor, such as NotePad ++ or TextEdit. Don’t use Microsoft Word or similar editors, because it adds formatting data to text and it might mess up your file. All the editors listed above are free.

Here’s all you need to add to the file:


<?php
/*
* Plugin Name: WP White Security Shortcodes
* Plugin URL: https://www.wpwhitesecurity.com
* Description: Site-specific plugin for custom code snippets in wpwhitesecurity.com
*/

That’s all about it. Now it is time to add the custom code.

3. Add the custom code snippets

Now you can copy and paste the code snippets from tutorials etc. into this file. If you have created the plugin file offline, compress the plugin’s folder as a .zip file and upload to your website from the WordPress dashboard.

From now on you don’t need to worry about missing some code snippet, forgetting to migrate it, or breaking some functionality when upgrading your theme or your WordPress. Next time you encounter a WordPress code snippet and would like to add it to your website, add it to the site-specific plugin file.

4. Add an index.php file (optional)

This is an optional step. To avoid directory listing you should add an index file in the plugin directory. All you need to do is:

Create a file called index.php
Add the following content to it:


<?php
/**
* Nothing to see here.

3. Use child theme functions.php

Earlier we said not to use your theme’s functions.php file. However, this is a good alternative for certain changes, for example, for theme specific changes. In this way, the theme specific custom code is out when your theme is, as it won’t be needed anymore.

Nevertheless, theme changes should always be added to the child theme, and not the parent one, so it’s upgrade-safe.

If you add code to your functions.php, always make sure to look for closing PHP tags. This is how they look like: ?>. If your theme file ends in one of these, you should put the custom code above that.

Directory of child themes functions.php

Conclusion

As we have just seen, there are a few different ways to add custom code to your WordPress website, but not all of them are good in the long run. However, some of them are better than others at specific things. For example, for theme specific changes (looks & feel of the website), add custom code to the functions.php file. For any other changes, ideally you should have your custom site-specific plugin

Just make sure that you add custom code to WordPress in a way that’s safe, and makes it easy to debug if something goes wrong.
We hope this article helped you learn how to easily add custom code snippets in your WordPress sites.


Source link

X
X