Where And How To Add Code Snippets To WordPress – Both PHP And CSS

Are you struggling with how to add code snippets to WordPress?

Code snippets unlock a whole heap of helpful functionality…but sometimes it seems like developers just magically expect you to know where to put each code snippet, right?

And because digging into source code is a serious thing, you definitely don’t want to trip up and accidentally make a mistake…

To help you avoid that unfortunate circumstance, I’m going to cover two things in this post:

• Where to add those code snippets you see flying around the WordPress community
• How to safely add those code snippets so that they don’t mess up your site and you won’t accidentally lose them if you update your theme (or switch themes)

The Two Types Of Code Snippets You’re Likely To Encounter

In most situations, you’re probably only going to deal with two types of code snippets:

• PHP – these code snippets often change the functionality of your WordPress site, either on the frontend or on the backend
• CSS – these code snippets affect how your site looks.

How can you tell them apart? Well, if the source of the code snippet hasn’t already told you, here are some examples of how they look.

PHP code snippets will look something like this:

Whereas CSS code snippets will look more like this:

Both of these snippets are taken from our post on how to fix a broken WooCommerce photo gallery, in case you’re interested in more context.

Below, I’ll show you how to safely add both types of code snippets to your WordPress site.

How To Add PHP Code Snippets To WordPress

There are two general approaches you can take to adding a PHP code snippet to WordPress:

• Directly to your theme – you can place the code snippet directly in a file called functions.php in a child theme
• In a plugin – you can place the code snippet in a plugin

While both approaches end with the snippet being added to your WordPress site, there are some functional differences, namely this:

If you add the code snippet directly to your theme, that snippet will stop working if you ever change WordPress themes.

On the other hand, if you add your code snippet to a plugin, it will remain there no matter which WordPress theme you’re using.

So here’s a quick rule of thumb for where to put PHP code snippets:

• If the functionality you’re adding ONLY applies to your current theme, add it directly to your child theme’s functions.php file.
• If the functionality you’re adding needs to continue to work even if you switch WordPress themes, add it via the plugin method.

Sound good? Let’s jump into the specific methods…

How To Add Code Snippets To Child Theme’s functions.php File

Adding code snippets to your functions.php file is fairly simple. It’s basically a two-step process:

• Create a child theme (if you don’t already have one) – this ensures that the code snippets you add aren’t overwritten the next time you update your WordPress theme.
• Paste in the code snippet – this part is pretty easy!

If you already have a child theme, skip ahead to Step 2. Otherwise, let’s start at the beginning…

Step 1: Create A New Child Theme

A child theme won’t affect any of the current functionality on your site. But it will allow you to safely make new changes without the danger of those changes getting overwritten the next time you update your theme.

While it’s possible to manually create a child theme, to simplify the process you can use a free plugin called Childify Me. Here’s how to do it:

• Install and activate the Childify Me plugin
• Go to Appearance → Customize in your WordPress dashboard
• Scroll down the left sidebar of the WordPress Customizer
• Click the Childify Me button at the bottom

• Give your child theme a name
• Click Create

• Click Preview and Activate

Make sure everything looks ok. Then, click the Activate & Publish button to activate your child theme:

Step 2: Add Code Snippets To functions.php File

Now, all that’s left to do is add the code snippet(s) to the new functions.php file in your child theme.

If you’re familiar with FTP, I recommend doing this via FTP for the safest approach (sometimes you might accidentally mistype the code, which can cause problems on your site. FTP lets you quickly fix things).

But if that’s confusing, you can also do it right from your WordPress dashboard:

• Go to Appearance → Editor
• Choose the functions.php file under the Theme Files column
• Paste in your code snippet and save your changes

And that’s it!

How To Add PHP Code Snippets With Code Snippets Plugin

For code snippets that aren’t theme specific, you can use the aptly named Code Snippets plugin.

The snippets that you add here will function identically to the snippets you added with the previous method. The only difference is that your snippets will now remain active even if you switch WordPress themes.

Here’s how to use the plugin:

• Install and activate the free Code Snippets plugin
• Go to Snippets → Add New
• Name your snippet (this name is purely internal and helps you remember it)
• Paste in the code snippet in the Code box

• Scroll down to the bottom of the screen
• Choose the Scope for your snippet (when in doubt, stick with the default Run snippet everywhere option)
• Click Save Changes and Activate

And that’s it! Your snippet is now active.

If you ever need to deactivate or edit the snippet at a later date, you can do that by going to the Snippets → All Snippets area:

How To Add Custom CSS Snippets To WordPress

In general, you have two easy ways to add CSS snippets to your WordPress site. In most situations, there’s no difference between the two methods – you should just use whichever you find most convenient.

Option 1: Add CSS To WordPress Customizer

Since WordPress 4.7, the WordPress Customizer has contained a spot to add custom CSS snippets.

Here’s how to use it…

• Go to Appearance → Customize in your WordPress dashboard
• Click the Additional CSS option in the left sidebar

• Add your custom CSS to the box
• Click Publish to push your custom CSS snippet live

That’s all there is to it! And the neat thing about this method is that you can see the changes made by your custom CSS snippet in the live preview of your site on the right side of the screen.

Option 2: Add CSS To WordPress Child Theme

If you’d prefer not to use the WordPress Customizer, you can also add CSS snippets directly to your child theme’s stylesheet.

If you’re not already using a child theme, you can follow the same instructions from the PHP snippets section to create one (click here to jump straight to those instructions).

Once you have your child theme set up, here’s how to add your custom CSS snippets:

• Go to Appearance → Editor in your WordPress dashboard
• Select the style.css file for your child theme
• Add your CSS snippet to the file and save your changes

And that’s it! Your custom CSS should be live.

Wrapping Things Up

You should now have all the knowledge you need to start adding code snippets to your WordPress site!

Remember, for PHP code snippets:

• Use your child theme’s functions.php file for snippets with functionality specific to your theme
• Use the free Code Snippets plugin for snippets with functionality that’s independent of your theme

And for CSS snippets, you can either use:

• The WordPress Customizer’s Additional CSS option
• Your child theme’s style.css file

If you have any further questions, leave a comment and we’ll try to get them answered!