How to Embed Code Snippets and Filters on Your Site?

This guide will help you add code to your WordPress site, including frontend snippets and backend filters. Additionally, we’ll discuss how to use a plugin, like “WP Code,” for a safer and easier experience.

1. Important Tips Before You Start

  • Editing functions.php is for Advanced Users
    Editing the functions.php file is recommended only for advanced users, as mistakes can lead to serious problems with your site. If you are new to coding, it’s better to use a plugin to manage code snippets.
  • Backup Your Site
    Always create a backup of your site before making changes to core theme or plugin files. This way, you can restore your site if anything goes wrong. You can use a backup plugin or tools provided by your hosting provider to secure a copy.
  • Using a Plugin for Code Management
    For most users, adding custom code via a plugin is a safer option. Many plugins, such as “WP Code,” provide easy-to-use libraries with pre-built code snippets. This approach reduces the risk of errors and simplifies code management.

2. Adding Frontend Code Snippets

Without a Plugin

  1. Copy the code snippet you want to add.
  2. Log in to your WordPress Site Dashboard.
  3. Go to Appearance > Customize > Additional CSS for CSS code or Appearance > Theme File Editor for advanced PHP or JavaScript code (depending on your theme and the type of code).
  4. Paste the code snippet into the appropriate section.
  5. Click Save or Publish to apply the changes.

Using a Plugin (e.g., WP Code)

  1. Log in to your WordPress Site Dashboard.
  2. In the left-hand menu, go to Snippets.
  3. Click Add New, and select the Code type (e.g., HTML, CSS, or JavaScript).
  4. Paste the code snippet into the editor.
  5. Choose (as per your requirement):
    • Only display when inserted into a post or page.  
    • Display in site <head> section.  
    • Display at the end of the <body> section, in the footer.
  6. Click Save Changes and Activate OR Save Changes, and via the “All Snippets” section, toggle your added code to Activate to apply the code on your site.

3. Adding Backend Filter Code Snippets

Without a Plugin (Directly Editing Theme Files)

  1. If you’re comfortable with PHP, log in to your WordPress Site Dashboard, navigate to Appearance > Theme File Editor, and open functions.php.
  2. Paste the filter code snippet at the bottom of the file and add a comment for reference.
  3. Click Update File to save. (Be sure to back up your functions.php file beforehand.)

Using a Plugin (e.g., WP Code)

  1. Log in to your WordPress Site Dashboard.
  2. In the left-hand menu, go to Snippets.
  3. Click Add New, and select the Code type as Functions (PHP).
  4. Paste your filter code in the editor.
  5. Choose (as per your requirement):
    • Run snippet everywhere
    • Only run in administration area
    • Only run on site front-end
    • Only run once
  6. Click Save Snippet, then Activate to enable the filter on the backend.

4. Using Predefined Snippets from the Plugin’s Library

If your plugin has a code library (like the WP Code Library), you can add snippets without manually handling the code:

You can search for the snippet or filter by name or functionality in the library, add it to the Site, and activate the code.

If you encounter any issues or need further assistance, please feel free to reach out. We are here to help!

Tags: , , , ,

Was this helpful?

Next Article

PHP Notices and Warnings