WordPress simplifies website creation, but sometimes you need custom modifications beyond the built-in options of WordPress, your theme, or installed plugins.
Code snippets offer a solution for tasks like altering WooCommerce notice text, using SVGs for logos, or incorporating custom fields.
Note: While this guide highlights the best free code snippet plugins for WordPress, consider using a child theme for custom code additions.
What Are Code Snippets?
A code snippet is a short piece of code designed to extend or modify your WordPress site’s functionality. They can alter how elements are displayed (e.g., highlighting search terms) or how features operate (e.g., displaying related posts by date). Code snippets can also add or modify theme or plugin features.
How Do You Add Code Snippets To WordPress?
You can add code snippets to WordPress either manually or using a plugin. Let’s explore the best method first.
Using a Code Snippet Plugin
Step 1: Install a code snippet plugin of your choice.
Step 2: Activate the plugin through the WordPress admin dashboard.
Step 3: Navigate to the plugin’s settings page, usually found in the WordPress dashboard menu.
Step 4: Add a new snippet, providing a descriptive name.
Step 5: Paste your code snippet into the designated code editor.
Step 6: Configure the snippet’s settings, such as where and when it should run.
Step 7: Save and activate the snippet.
To add code with a code snippets plugin you simply need to install a plugin. The process may vary depending on the plugin, but most provide an interface to add and manage snippets from the WordPress dashboard. This avoids editing theme files and allows easy addition, modification, disabling, or removal of snippets.
Why Use a Code Snippet Plugin?
Code snippet plugins simplify the process of adding code to WordPress, reducing the risk of errors and making updates easier. They also minimize the risk of breaking your site by keeping core files untouched. This makes it a safer option, especially for users unfamiliar with coding.
Best Free WordPress Code Snippet Plugins
If you decide to use a plugin for code snippets, which one should you choose? Here are five top WordPress code snippet plugins, all offering free versions.
1. WPCode
WPCode allows you to add code snippets, select a code type, choose an insertion method, add the run location, restrict loading by device type, enable logic, and add general snippet info (name, tags, priority, notes). There are also options to add scripts to your header and footer, plus tools to export or import snippets from other plugins you may have tried.
One of the coolest features of WPCode is the included snippet library, which is an immense help for those who are not comfortable with snippets, as the library is full of ready-to-use snippets. There is also a Generator you can use to create your own custom snippets for common site features related to WordPress core, your design, content, the admin area, and queries.
And if you upgrade to WPCode Pro there are also features for scheduled snippets, code revisions log, a file editor, conversion pixels, user access control, auto insert snippets, dynamic content elements, page specific scripts, safe error handling and more.
2. Code Snippets
With the Code Snippets plugin you can add all of your snippets via the editor. This includes options to add a name, description, and tags along with the actual code snippet and its “run” setting (everywhere, only in admin, only on the front-end, or only once).
Once you’ve added snippets, they’re displayed in a list with toggles to quickly enable or disable them. The plugin also allows you to export/import your snippets (as JSON or PHP) and easily reuse them on other sites or in a theme/plugin.
For additional features such as Gutenberg block support, Elementor integration, multiple site activations, CSS and JS snippets, plus premium support you can upgrade to a pro plan.
3. Post Snippets
Another option is Post Snippets which allows you to create your own collection of snippets for HTML, PHP and text. The plugin includes a visual editor complete with a code editor, add variables, checkbox to enable a shortcode, and a status box to set a snippet to active. Once you’ve created your snippets you can insert them directly, as a shortcode or with the included Post Snippets Gutenberg block.
Premium plans start for snippets ordering, easy duplication feature, tags, snippet type display, save to cloud, Gutenberg block support, auto updates and premium support.
4. WebberZone Snippetz
Previously named Add to All, the rebranded WebberZone Snippetz plugin is a simple way to add and manage snippets within your WordPress site. The plugin supports HTML, CSS and JS. There are also options to choose snippet location (insert in your header, footer, content or feed) and restrict to specific pages (by ID, post type, taxonomy, etc). The plugin also generates a shortcode for each snippet if you’d rather insert them that way.
WebberZone Snippetz is a fully free plugin, though the developer does offer extended premium support of you contact them (note – this is in addition to the free support they provide in the forum and typically for custom work).
5. Shortcoder
Add snippets as easy to insert shortcodes with Shortcoder. Create custom shortcodes for your HTML, CSS or JS snippets so you can add them in the WordPress classic editor, code editor or Gutenberg. There are also options to disable shortcodes globally, disable based on device type.
Shortcoder also offers a PRO license starting. This includes integration with custom editors (Elementor, WPBakery, etc), shortcode revisions, locate feature to find where a shortcode has been used, support for extra code in the footer, 1 year of updates and lifetime basic support.
Manually Adding Code Snippets
Step 1: Create a child theme.
This prevents losing your modifications when updating the main theme.
Step 2: Locate the theme file to edit.
Usually
functions.phpfor PHP code, orheader.phporfooter.phpfor HTML or JavaScript.
Step 3: Open the file using a code editor or the WordPress theme editor (Appearance > Theme Editor).
Step 4: Carefully add your code snippet.
Place PHP code within
<?php ?>tags if not already present.
Step 5: Comment your code.
Add comments (
// your comment) to explain the purpose of the snippet.
Step 6: Save the changes.
Step 7: Test the changes on your site.
When manually adding a code snippet you’ll need to edit one of your site’s theme files such as functions.php, header.php, etc. If you want to go this route, we recommend using a child theme. This way you can always update your theme (which is important for site security) without losing any of the edits or customizations you’ve made. As you add snippets to your child theme’s files we suggest commenting your code (just add two backslashes at the beginning of a line then a description) so you don’t forget what each snippet is for.
Using a plugin to add code snippets to WordPress is an easier, more convenient and significantly safer option. Really any of the options listed above are a great choice.