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.

Image via Wikimedia Commons

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 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 these out of your functions.php. 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 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.

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.

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

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

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

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.

2. 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).

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.

3. Use Your Child Theme Functions.php

This is probably best for code that applies directly to your theme, 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.

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.

The post How to Safely Add Custom Code to WordPress Sites appeared first on SkyVerge.