Best ways to add custom code to WordPress

Hours Last reviewed:

There are times you might want to add a code snippet to your WordPress site. It’s important you do this is a way that is:

  • Safe, that is, not likely to break your site
  • Maintainable, that is, easy to return to and fix
  • Reliable, that is, likely to keep over time and not break on updates

This means, for example, that such tweaks shouldn’t be placed into a (parent) WordPress theme or directly into a plugin, as they’ll be overwritten come update time.

The safest, most beginner-friendly, and maintainable ways to make changes or add custom code to WordPress sites are:

  1. Manage your custom code with the Code Snippets plugin (recommended)
  2. Place your custom code in your child theme’s functions.php file

Let’s take a look at both these approaches.

Have a WordPress email problem right now? Ask us about it.

We’ll attempt to publish a solution ASAP for free. Challenge us!

So we can notify you when we publish a solution

1. Use the Code Snippets Plugin <- This is the recommended way

The Code Snippets plugin is a great way to add custom code to WordPress sites. Once installed, it allows you to add as many separate code snippets as you like.

The Code Snippets listing screen

Some nice features of the plugin include:

  • Snippets are in a very accessible location – right in the dashboard.
  • Snippets can be restricted to apply to the front-end, the back-end, or both.
  • Snippets can be deactivated without deleting them.

We find that the nicest feature of the Code Snippets plugin is that it will save you from your own mistakes. If you write and activate a snippet that breaks your site, Code Snippets will allow you to go back to the last point at which the site was still working without having to do open-heart surgery on your site.

Once you install the plugin, a new “Snippets” menu is added to your site, which lets you name and add new snippets. Each snippet will have room for the code and a description.

You can then enable and disable your code snippets just like plugins (which makes for very easy debugging). Sometimes custom snippets cause conflicts or issues with plugins or themes, so deactivating them is helpful for targeting issues.

Every once in a while you might add code that causes the site to crash, which Code Snippets doesn’t catch in time. You’ll find then yourself in a bind: you won’t be able to access the Code Snippet management screen to fix the problem directly since the site is in a crashed state, effectively locking you out of the WordPress admin dashboard.

If this happens, you’ll need to disable the offending snippet directly from the database. This will allow you to regain access to your WordPress admin dashboard and the Code Snippets UI. Here are the steps to disable the plugin:

  1. Access your hosting control panel (e.g., cPanel, Plesk, etc.).
  2. Locate the “phpMyAdmin” tool or a similar database management tool provided by your hosting provider and open it.
  3. Select the database associated with your WordPress site. If you’re unsure which database is connected to your site, you can find this information in the wp-config.php file located in the root folder of your WordPress installation.
  4. In the database, locate the table named “wp_snippets” (the prefix “wp_” might be different if you have changed it during installation). This table is created by the Code Snippets plugin and stores all the snippets.
  5. Browse through the table entries and look for the “name” or “code” column to identify the offending snippet.
  6. Once you find the offending snippet, look for the “active” column in the same row.
  7. Click on the “Edit” or “Pencil” icon next to the row to edit the content.
  8. Change the value in the “active” field from ‘1’ (active) to ‘0’ (inactive) to disable the snippet.
  9. Save the changes and close phpMyAdmin.
  10. Your site should be back up and running, and you should have access to the WordPress admin dashboard.
  11. Once you have access to your WordPress dashboard, you can either fix the problematic code snippet or delete it altogether via the Code Snippets UI.

Remember to always create a backup of your site and database before making any changes. This way, you can quickly restore your site if something goes wrong.

2. Use your child theme’s functions.php file

This is a step up the difficulty and risk ladder from the previous approach. functions.php is an important and central file in WordPress, given that it’s linked to your theme. If there’s a syntax error in the code, it could disable the theme itself and make your site inaccessible. So you’ll need to be careful, and we’ll discuss how.

Step 1: Locate functions.php for your theme

Log into your WordPress dashboard and go to “Appearance->Editor”.

This will bring you to a page where you can edit your theme files. These files are listed on the right-hand side. Your current theme is selected by default. Locate the file labeled “Theme Functions” and click it.

Accessing functions.php through Appearance > Editor

This will open up functions.php in the textbox on the left-hand side.

Step 2: Verify there’s no closing ?> tag

Scroll all the way down. If you see a ?> symbol at the very end of the file, delete it.

Step 3: Format the code you intend to paste into functions.php

Most importantly, ensure that the code you’re copying is not enclosed in tags, such as <? or <?php. If it is, you’re going to have problems and your site will crash.

Once your code is clean, we’re ready to paste.

Step 4: Paste your code into functions.php

Paste your code at the very bottom.

Save your changes and you’ve successfully added code to functions.php in WordPress.

If you’ve added code to your functions.php file through the Appearance Editor and it caused your WordPress site to crash, you’ll find yourself in a bind: you won’t be able to access the Appearance -> Editor screen to fix the problem directly since the site is in a crashed state, effectively locking you out of the WordPress admin dashboard.

Fortunately, there are alternative methods to regain access to your site and correct the issue, such as using an FTP client or your hosting control panel’s File Manager.

Follow these steps to restore your site:

Option 1: Via FTP client access

  1. Download and install an FTP client if you don’t have one already. Some popular options are FileZilla (https://filezilla-project.org/) or Cyberduck (https://cyberduck.io/).
  2. Obtain your FTP login credentials from your web hosting provider. You should have received these when you signed up for hosting, or you can find them in your hosting control panel.
  3. Connect to your website using the FTP client and your login credentials.
  4. Navigate to the folder containing your WordPress installation. Usually, it’s in the “public_html” or “www” folder.
  5. Locate the “wp-content” folder and then navigate to “themes” > [your active theme’s folder].
  6. Find the “functions.php” file and download it to your local computer.
  7. Open the “functions.php” file in a text editor, and remove or fix the problematic code.
  8. Save the file and upload it back to the same location on your server, overwriting the original file.
  9. Your site should be back up and running. Check to make sure the issue is resolved.

Option 2: Through your hosting control panel’s file manager access:

  1. Log in to your hosting control panel (e.g., cPanel, Plesk, etc.).
  2. Locate the File Manager option and open it.
  3. Navigate to the folder containing your WordPress installation. Usually, it’s in the “public_html” or “www” folder.
  4. Locate the “wp-content” folder and then navigate to “themes” > [your active theme’s folder].
  5. Find the “functions.php” file and click on it to edit the file in the control panel’s text editor.
  6. Remove or fix the problematic code and save the changes.
  7. Your site should be back up and running. Check to make sure the issue is resolved.

Remember to always make a backup of your site before making any changes to the code. This way, you can quickly restore your site if something goes wrong.

Leave a Reply

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