Adding your code to WordPress the right way

It might be terrifying, but it can be done safely
May 9, 2019
Filed in
Task: Add custom code/scripts to your website without destroying your website.
Difficulty: Journeyman
You need:
  • A self-hosted WordPress website
  • A child theme
  • Access to edit the files in the child theme

Questions answered

  1. How do you add scripts to WordPress?
  2. How do you add scripts to a WordPress child theme?


Adding custom code to your WordPress site can be scary, but it can be done safely.

There are 2 things I want you to keep in mind.

First, if you take the proper precautions, it is nearly impossible to do permanent damage to your website. You would have to do something incredibly insane to ruin your website.

Second, slow is smooth and smooth is fast. If you don't have the time to take your time, stop. A single erroneous punctuation mark can crash your site. Even though it can be an easy fix, that crash and troubleshooting takes time and disrupts your workflow. It's always better to give yourself time to work.

Thou shalt

1. Work on a test site

If you're making major changes, you should be doing them far away from your live site. You don't need a separate hosting account. Set up an extra WordPress site in a subdomain of your main domain and use that for testing your changes.

2. Make lots of backups

Think of backups as save points in a game. Your last backup is where you'll have to start from if you make a major mistake. Every time you reach a major milestone or before you make a major change, back that site up.

If you don't know how to create backups or restore your site from backup, you need to learn how to do that before you mess with the code.

3. Copy scripts and files before you edit them

This is the little brother of point 2. If you're only editing a file, you can make a copy of that file instead of backing up the whole site. Or you can copy the original script to a new text document in case you need it.

2 caveats:

  1. You should still do regular backups of the full site.
  2. Copying a script doesn't protect you from accidentally messing up another section of the file. Copying the original snippet of code you're working on should be done in addition to copying the file.

4. Use a child theme

The child theme system was developed to let you customize themes easier. If you make changes to the parent theme, those changes might be overwritten the next time the theme is updated.

5. Use your own plugin

This is the same idea as #4. Don't edit a plugin. Your edits can be lost as soon as the plugin is updated.

6. Use an actual, external editor

If you're using the built-in WordPress editor and WordPress crashes, what happens to the editor? It crashes, too. The chances of making a quick fix to your code just dropped to zero.

If you were using an external editor, you could fix the site by pasting in the original file data (because you made a copy, right?) and saving it. How does this work?

There are 2 ways to do this and they're really 2 sides of the same coin. In both cases, you need to set up an FTP account on your server.

Method 1: Use an FTP client to move files back and forth between your computer and your server. (You could do this via the cPanel file manager, but FTP is faster and easier once you learn how to do it.) You can edit the files using whichever text editor you prefer.

Method 2: Use a slightly fancier text editor that has FTP built-it (like Komodo Edit). Editors like this have a little bit of a learning curve because they have more power and more options.

Figuring it out is worth it. I can literally open and edit files on my server from my laptop. It will work as long as the server is still running - even if WordPress is not. 

7. Put the code in the right place

Different code can and should be put in different places. Obviously, JavaScript generally goes in the JavaScript file and CSS goes in the CSS file. But it's more than that.

Are you adding a custom function for your theme? Then you should put it in the child theme's functions file or in a custom plugin built for additional theme functions. This makes it easy to find in the future. And there's a good chance that your custom code won't work with a different theme and a slim chance that could cause your site to crash. You want these custom theme functions to deactivate with the theme or be simple to deactivate.

If you're adding a function that is completely independent of your theme, you should put it in a custom plugin. You don't want it to be deactivated when/if the theme is.

Do I break these rules?

I break them all the damn time. But I try not to. And I never break them all.

These rules are a layered defense - multiple nets to catch you if you fall. Sometimes you only need 1 net. Sometimes 1 isn't enough.


Submit a Comment

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

Pin It on Pinterest

Learn something?

Share it so others can use it too!