Add Custom Code to WordPress

There are many times that you want to tweak plugins, add a code snippet, or change some styling for your WordPress site. However, many users make these changes in a way that’s not viable for the long-term. For example, these changes shouldn’t be put into your parent WordPress theme, as they’ll be overridden when you update your theme (the same goes for plugins).

Some users use this as a reason not to update themes or plugins, but this isn’t a good strategy either. Updates may contain security or bug fixes, as well as new features that you’ll want to use.

Instead of making these changes in a way that doesn’t stand the test of time and limits what you can do with your site, here are some upgrade-proof ways to make changes or add custom code to WordPress sites (in order of preference).

What Not to Do

Before we give you some suggested methods, let’s talk about what not to do.

If you’re using a plugin or theme, you don’t want to modify it directly. Let’s say that I want to change some text that’s output by a plugin. I could simply change the function that outputs this text within the plugin, but this will be overridden as soon as I update. If you make several changes like this, they’re going to be very difficult to maintain.

You’ll also get the recommendation to add things to your theme’s functions.php frequently. If you can avoid doing this, you should. You can use our tips below to create or use a plugin, but it’s best to leave many changes out of your functions.php (there are a few that should go here, but not often). In addition, you should never use your parent theme’s functions.php – create a child theme.

Finally, you should prefix any functions you add to your custom code. For example, let’s say I want to add some code to SkyVerge.com. I usually add a skyverge_ prefix to function names to make sure that they don’t conflict with any other functions that may exist in my theme or plugins.

Now let’s talk about ways to add this code to your site in an upgrade-safe way.

Add Custom Code to WordPress Sites

These are listed in order of preference for how to add custom code to WordPress.

1. Use the Code Snippets Plugin

The Code Snippets plugin is a great way to add custom code to WordPress sites, and is easier than creating your own plugin. It basically serves the same purpose as your own plugin, as custom code can be added without using your theme and in an upgrade-safe way.

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 for more information on what the code does (if I find a useful snippet from a site, I use the description to also add the URL so I remember where it came from).

Code Snippets Plugin

You can then enable and disable your code snippets just like plugins (which makes for super-easy debugging), as well as export them into PHP files. Sometimes custom snippets cause conflicts or issues with plugins or themes, so deactivating all custom code is helpful for targeting issues.

2. Use a Custom Plugin

Using a custom plugin is a great way to add code snippets, as you can keep these snippets around if you change themes, and can activate or deactivate them as needed. If you feel comfortable adding your own plugin, I prefer this route to the Code Snippets plugin, but it’s a bit more difficult to do.

The WordPress Codex has a good resource on writing a plugin, and we have a tutorial on creating a custom WooCommerce plugin that you can start with, but they go a bit beyond basic plugin setup.

Very simple plugins will need a couple of components for use on your site. This is an easy way to add code in an organized fashion that you can update as needed. I use a custom plugin to add any custom shortcodes to my sites rather than using my functions.php.

First, you’ll need to create a folder and name it – this will be your plugin name. Something like skyverge-shortcodes could be used for my shortcode plugin. Create a name that uses dashes instead of spaces.

Next, you’ll need a main file for your plugin. This will include the title of the plugin, a description, and some basic information. We’ll also add a line of code to deny external access to this plugin, and name it skyverge-shortcodes.php (or whatever your name is). PHP is the language WordPress is written in, so we want to add this file extension to tell WordPress what language the plugin uses.

Create this file using a text editor, such as NotePad, NotePad ++, Text Wrangler, or TextEdit. Do not use something like Microsoft Word, which adds formatting data to text. All of the editors I just listed are free – if you have a Windows computer, you already have NotePad (though NotePad++ is better). Macs come with TextEdit, though I prefer Text Wrangler / bbEdit.

Here’s what we’ll put in the file:

<?php
/**
 * Plugin Name: SkyVerge Shortcodes
 * Plugin URI: https://www.skyverge.com/shortcodes/
 * Description: Adds custom shortcodes to SkyVerge websites.
 * Author: SkyVerge
 * Author URI: https://www.skyverge.com/
 * Version: 1.0
 * Text Domain: skyverge-shortcodes
 *
 * Copyright: (c) 2014 SkyVerge, Inc. (spam@skyverge.com)
 *
 * License: GNU General Public License v3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 *
 * @author    SkyVerge
 * @copyright Copyright (c) 2014, SkyVerge, Inc.
 * @license   http://www.gnu.org/licenses/gpl-3.0.html GNU General Public License v3.0
 *
 */

defined( 'ABSPATH' ) or exit;

You’ll then add your custom code below this – you don’t need to add any closing PHP tags to the end of this document. The plugin name, URI, description, and author are all displayed in the “Plugins” list in your WordPress admin. You can replace any SkyVerge information with your own information.

Once you’ve added all custom code to your shiny new plugin file, you can put it in your plugin folder and compress this into a .zip file. It’s ready to be uploaded to your website! You can then use this for all custom code and update it as needed by deleting it and re-adding it, or overriding it via FTP.

Want to download a sample that you can work from? Download this .zip, uncompress it, and edit the plugin file, name, and folder name. You can then re-zip it and upload it to your website.

3. Use Your Child Theme Functions.php

I know, I said not to use your theme’s functions.php file. However, this is a good option for certain changes.

This is probably best for code that applies directly to your theme (or the way something is displayed on the site), and not to a plugin like WooCommerce. This way, the custom code is gone when your theme is gone as it won’t be needed any longer. However, it should still be added to a child theme, and not the parent, so it’s upgrade-safe.

If there’s absolutely no way for you to use the first two solutions for plugin or WordPress-specific custom code (which I really don’t believe!), you can use the child theme functions.php rather than your parent theme’s functions.php file. We have instructions on creating a child theme and child functions.php in our article on WooCommerce How To’s.

If you do add code to your functions.php, be sure to look for closing PHP tags (they look like: `?>`). If your theme file ends in one of these, you need to make sure you put custom code above it.

To get you started, here’s a child theme template that includes a functions.php file. Download and unzip this template, then change the style.css file as per the instructions in your text editor (you’ll probably have to right-click and select “Open with” to use the right program). You’ll need to change the template name and import URL to reflect your parent theme’s information.

Conclusions

Make sure that future-you appreciates the past-you – don’t make site updates complicated, and don’t tempt future-you to avoid doing them. Add custom code to WordPress in a way that’s safe, moves from theme-to-theme, and makes it easy to debug if something ever goes wrong.

Published by Beka Rice

Beka manages WooCommerce product direction for SkyVerge, such as plugin roadmaps, documentation, and sales copy. She typically gets stuck with boring administrative tasks, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

6 Comments

  1. […] code to your functions.php? That may not be the best course of action. Check out this tutorial on how to add custom code to WordPress from […]

  2. […] plugin or using the Code Snippets plugin. I wrote tutorials on how to add custom code to your site in this post and in this […]

  3. Hello Beka,

    I use Aptana for WordPress editing and have it configured with a remote FTP connection to the WordPress files. It’s trivial for me, therefore, to view the remote directory just like a local directory, double-click a remote file to download it into the editor, make my changes and then hit Ctrl-S to save it back to the remote location. I figure the remote location is the safest place to keep the files since the WordPress installation gets backup so often, so the remote file is the absolute source. There’s never a local copy. I freely make changes to child themes, functions.php, and css files on the remote location without ever making and storing local copies. If I wanted to add a new plugin, as you suggest above for holding new code, I would create it directly in the remote plugins folder with Aptana and make any changes directly to this remote version without ever making a local copy.

    I’m just wondering if you see a problem with this work flow method.

    Thanks,
    Steve

  4. […] you choose the hard way, be sure you know how to add custom code to your site before doing […]

  5. Hi
    I have lots of products which are out of stock and showing in my site. I want to hide only some of them. Currently I have hidden all of them through woocommerce settings.

    How can I achieve hiding some of the out of stock products through functions.php code in child theme. I am using flatsome premium. My site is http://www.leostylez.com

    Regards

  6. Nice article, the code snippet just saved me from using ‘appearance tab’.

Comments are closed.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match