How To Add Code Snippets In WordPress (2 Ways)

I’ll teach you how to add code snippets in WordPress the easy and the hard way.

I recommend you opt for the EASY way.

Code snippets are small pieces of code that you can add to your WordPress site to modify its behavior.

They are like mini-plugins, but instead of installing a full-fledged plugin, you can add just the code you need. (They allow for a bloat-free website or blog.)

Adding code snippets in WordPress can help you customize your website, fix errors, improve security and implement new features.

This post covers:

• Why add code snippets to your WordPress site?
• 2 Best ways to add code snippets in WordPress
  1. Add code snippets in WordPress with a plugin (easy!)
  2. Add code snippets in WordPress via functions.php or other theme files (hard)
• Troubleshooting PHP errors when adding custom code
• Conclusion: I recommend using a plugin to add code snippets
• FAQs about adding code snippets in WordPress

Whether you’re a beginner or an experienced user, this guide will show you the BEST ways to add code snippets in WordPress while maintaining your site’s performance and security.

Why Add Code Snippets To Your WordPress Site?

There are many reasons why you might need to use code snippets. Below are some of my favorites:

1. Customization

Code snippets allow you to customize your site in ways that might NOT be possible with plugins or WordPress themes alone.

For example, you can add custom post types, custom WP taxonomies, or custom fields to your site using code snippets.

2. Performance

Plugins can sometimes slow down your site, especially if you have a lot of them installed.

Code snippets can be more efficient because they only add the code you need WITHOUT any extra bloat.

You may also be interested in my article on how many WordPress plugins are too many. (Yes, there’s the optimal number.)

3. Security

Code snippets can enhance your site’s security by blocking malicious users or bots or adding two-factor authentication to your login system.

4. Bug Fixes

If you’re experiencing a bug on your site, you might be able to FIX IT with a code snippet instead of waiting for a plugin or theme update.

So, to sum up, you can use snippets to:

• Fix common errors.
• Improve site security.
• Add new features or functionality.
• Customize the look and feel of your site.
• Optimize your site for search engines.

By adding code snippets, you can make your WordPress site more efficient, user-friendly, and unique to your brand.

These little edits can make your website and online presence stand out from the MASSES.

Things To Remember Before Adding Code Snippets

Before you start adding code snippets to your WordPress site, keep these essential points in mind:

1. Always back up your site: Before making any changes to your site’s code, ensure you have a recent backup. This will allow you to restore your site if anything goes wrong. One of the best ways is to use a WordPress backup plugin.
2. Use a child theme: If you’re making changes to your theme files, I recommend using a child theme. This ensures that your customizations won’t be lost when you update your theme. (Better be safe than sorry.)
3. Test your code: Always test your code snippets on a local or staging site before adding them to your live website. This will help you identify any issues and prevent potential problems on your live site.

Best Ways To Add Code Snippets In WordPress

There are several methods to add code snippets in WordPress. Here, I’ll discuss the two most popular options. (But I suggest you go with the first one.)

1. Add Code Snippets In WordPress With A Plugin (Easy!)

One of the easiest and safest ways to add code snippets in WordPress is by using a code snippets plugin.

These plugins allow you to QUICKLY add, manage and remove code snippets without editing your theme files.

Some popular code snippets plugins include:

• Code Snippets
• Insert PHP Code Snippet
• WP Code

To use a code snippets plugin, simply install and activate the plugin and follow the plugin’s instructions for adding your code snippet (see the step-by-step process below).

How To Edit And Add Code To WordPress With A Code Snippets Plugin

I will use Code Snippets plugin in the example below, but any other plugin will work just as well.

After you install and activate the plugin, click on the Code Snippets plugin in the left sidebar of your WP admin panel.

Click on the Add Snippet button to open a page with a wide variety of premade snippets you can use.

There is a good chance that the snippet you need is already written and ready to use.

For instance, I would like to disable the comments for all post types in WordPress.

Hover over the Completely Disable Comments snippet and edit it.

Usually, there is no need to alter the snippet’s code, but you can change it in this step if you have any specific requirements.

The beauty of using a plugin is that you can EFFORTLESSLY set where exactly you want to use the snippet.

You can even make it page-specific.

What if you only want to hide the comments on mobile devices?

No problem; the plugin has you covered in this case as well.

Simply select on which device you want the snippet to execute.

If the snippet you need is not in the pre-made library, you can start with a blank snippet and create your own. (It’s actually easier than you think.)

Note: I also have an in-depth tutorial on how to disable comments in WordPress (six different methods!).

2. Add Code Snippets In WordPress Via Functions.php Or Other Theme Files (Hard)

If you prefer to add code snippets directly to your theme files, you can do so by editing the functions.php file or other theme template files.

However, I DON’T recommend this method to beginners, as it can lead to errors and loss of customizations when updating your theme. (See how to update the WordPress theme without losing customization.)

If you choose to edit your theme files, always use a child theme and make a backup of your site before making changes.

To add code snippets to your theme’s functions.php file:

1. Go to your WordPress dashboard and navigate to Appearance > Theme File Editor.
2. On the right-hand side, click on the functions.php file to open it in the editor.
3. Add your code snippet at the bottom of the file, making sure to follow proper PHP syntax (Very. Important.).
4. Click on the Update File button to save your changes.

Bonus #1: Create A Child Theme

While adding code snippets to your site’s functions.php file is a great way to customize your site, but it’s not always the best approach.

If you’re making major changes to your site’s code, creating a child theme is usually better.

A child theme is a separate theme that inherits all the functionality of your main/parent theme BUT allows you to make modifications without affecting the parent theme.

This is important because if you modify your parent theme directly, those changes will be lost when you update it.

Creating a child theme is relatively simple. Here’s how to do it:

1. Create a new folder in your WordPress themes directory.
2. Create a new style.css file in this folder.
3. Add the following code to the top of the style.css file:

/*
Theme Name: My Child Theme
Template: twentytwenty
*/

4. Customize your child theme as desired.
5. Activate your child theme in the WordPress admin panel.

If you need a more thorough tutorial about child themes, give our tutorial on how to create a child theme a read.

Bonus #2: Adding Code Snippets to Specific Areas

Sometimes, you may need to add code snippets to specific areas of your WordPress site, such as the header, footer, or sidebar.

Here’s how I do it:

Header And Footer

To add code snippets to your site’s header or footer, you can use a plugin like Insert Headers and Footers or Header Footer Code Manager.

These plugins allow you to easily add code snippets to your site’s header and footer without editing theme files.

Alternatively, you can manually add code snippets to your theme’s header.php or footer.php files by following the same steps as editing the functions.php file.

Widgets And Sidebars

If you want to add code snippets to your site’s widgets or sidebars, you can use the built-in Custom HTML widget in WordPress.

1. Go to your WordPress dashboard and navigate to Appearance > Widgets.
2. Drag the Custom HTML widget to the desired widget area.
3. Add your code snippet to the widget’s content area and click Save.

Bonus #3: Using Shortcodes For Code Snippets

Shortcodes can easily add code snippets to your WordPress site WITHOUT directly editing theme files.

You can create custom shortcodes using a site-specific or code snippets plugin.

To create a shortcode, add the following code to your site-specific plugin or code snippets plugin:

function my_custom_shortcode() {
    // Your code snippet here
}
add_shortcode('my-shortcode', 'my_custom_shortcode');

Replace my-shortcode with a unique name for your shortcode and add your code snippet where indicated.

Once you’ve created your shortcode, you can use it in your posts, pages, or widgets by adding [my-shortcode] to the content.

Troubleshooting PHP Errors When Adding Custom Code

PHP errors in WordPress can be caused by syntax errors, parse errors, or fatal errors due to unexpected characters.

These errors OFTEN provide information about the line in your code that caused the issue.

Using a proper text editor for code (like Sublime Text) editing can help you identify and fix these errors more easily.

When adding code snippets to your WordPress site, it’s important to avoid these common mistakes:

1. Using incorrect PHP tags: Make sure your code snippets are enclosed within the correct PHP tags (<?php and ?>).
2. Nesting errors: Ensure that your code snippet is placed outside of any existing functions and follows proper PHP syntax.
3. Not testing your code: Always test your code snippets on a local or staging site before adding them to your live site.

Example of a proper syntax for PHP tags:

If you encounter PHP errors when adding code snippets to your WordPress site, try the following:

1. Double-check your code snippet for syntax errors or missing characters (always use a proper text editor that outlines errors).
2. Ensure you’ve used the correct PHP tags and proper nesting.
3. Remove the problematic code snippet and test your site to see if the error is resolved.

Conclusion: I Recommend Using A Plugin To Add Code Snippets

Adding code snippets in WordPress can help you IMPROVE your site’s functionality, fix errors, and enhance its appearance.

You can safely and effectively add code snippets to your WordPress site by following the methods and best practices I outlined in this guide.

Remember always to back up your site, use a child theme and test your code snippets before implementing them on your live site.

With these precautions in place, you’re well on your way to creating a customized and efficient WordPress site. Make it specific to your business needs!

Keep in mind: In most cases, using a plugin to add the snippet is much better. This way, you will reduce the chances of your website crashing after adding it.

Don’t add the snippets manually if you are not ABSOLUTELY sure you know what you’re doing.

FAQs About Adding Code Snippets In WordPress

How can I add custom code snippets to my WordPress site?

You can add custom code snippets to your WordPress site by editing your theme’s “functions.php” file, using a custom plugin designed for code snippets, or employing a child theme to ensure your customizations remain intact after theme updates.

Is adding code snippets directly to my WordPress theme’s “functions.php” file safe?

While adding code to the “functions.php” file is common practice, it’s not without risks. Mistakes can break your site. It’s safer to use a child theme or a dedicated plugin for custom code snippets to avoid losing changes after a theme update or in case of errors.

Can I use a plugin to add custom code snippets to my WordPress site?

Yes, plugins like “Code Snippets” allow you to add custom PHP code snippets to your site without editing theme files directly. This approach is safer and helps organize your snippets better.

How do I add custom JavaScript or CSS code to my WordPress site?

You can use the “Additional CSS” option in the WordPress Customizer for custom CSS. For JavaScript, you can either use a plugin specifically designed for custom scripts or carefully insert the script into the “header.php” or “footer.php” file of your theme (or child theme).

What precautions should I take when adding code snippets to my WordPress site?

Always backup your site before adding or editing code. If possible, test code snippets on a staging site first. Use reliable sources for code snippets to avoid security issues, and consider using a child theme or snippets plugin to safeguard your customizations.