How to safely add custom code snippets in WordPress

You may often find that the only way to customize a WordPress plugin or theme is with a custom code snippet. Most guides on how to implement the code snippets recommend adding them to the functions.php file of your theme. There are 3 main downsides to using this solution:

  1. The changes you make to the functions.php file get removed when updating your theme (unless you are using a child theme).
  2. If you make any mistakes or copy incorrect code snippets, it can break your website.
  3. It becomes harder to manage the code snippets if you are using many of them. You will likely forget what is the purpose of each one of them.

That being said, while there are multiple solutions to this problem, I like to focus on the easiest and safest one of them.

Time needed: 5 minutes.

In my experience, the safest and easiest way to add custom code snippets to your WordPress website is by using a plugin.

  1. Install and activate the Code Snippets plugin by “Code Snippets Pro” from the WordPress plugin repository

    This plugin can be used to add HTML, CSS, Javascript and PHP snippets, both in the back-end or the front-end of your website.

  2. Go to Snippets → All Snippets and edit an existing snippet

    Depending on what type of snippet you are going to add, HTML, Javascript, CSS or PHP, I recommend you first edit one of the examples. This will give you a good starting point on how to format your snippet.
    I’ve opened the Example HTML Shortcode, which shows us how to register a new shortcode on our website.

  3. Go to All Snippets → Add New to create your own snippets from scratch

    In my example below, I have added a code snippet that changes the number of entries in the sitemaps built by Yoast SEO from 1000 to 500.
    When you are done with creating your own snippet, click Save changes and activate.

  4. Go to Snippets → All Snippets to manage the code snippets you have created

    If you ever need to temporarily turn off a snippet you have created, you can just switch the toggle as in the image below. It may not seem like much, but if your website uses dozens of snippets, this can be a life saver.

Benefits of using Code Snippets instead of writing them in the functions.php

  • It does not require any technical skills, such as editing theme files through FTP or creating a child theme.
  • The code editor will warn you whenever there are syntax errors in your snippet.
  • Code snippets will not be lost if you change your theme. Many code snippets are used to change the behavior of plugins, in which case you’d want to keep the code snippets even if you decide to change your website’s theme.
  • We can easily manage multiple snippets. The tags and search are fantastic time-savers if you have dozens of snippets.
  • We can selectively run the snippets only on the administration area (if you want to customize your dashboard), on the front-end (to change what the website visitors see), or run a script only once (for example, to unregister a custom post type).