WordPress Snippets

The {CODICTS} Snippets plugin is a full-featured code snippet manager for WordPress. It allows you to add, organize, enable/disable, and conditionally load custom PHP, JavaScript, CSS, and HTML code snippets — all without editing functions.php or theme files.

Installation & Activation

Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.

After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.

Once activated, you will see a new “Snippets” menu item in the WordPress admin sidebar. Click it to open the Snippets manager.

Tip: A quick-access “Snippets” link is also added to the WordPress admin bar at the top of your site for easy navigation.

The Admin Interface

The Snippets interface is a single-page application split into three main areas:

Area	Description
Action Panel (top bar)	Toolbar with buttons for creating snippets/folders, import/export, snippet settings (name, type, section, placement), the enable/disable toggle, and save/delete buttons.
Side Panel (left sidebar)	Collapsible sidebar containing the snippet folder tree, search bar, and advanced search filters.
Code Editor (main area)	A syntax-highlighted code editor (powered by CodeMirror) that loads the selected snippet content. Shows the CoDicts logo when no snippet is selected.

Creating Snippets

Step 1: Click one of the “New” buttons — New JS Snippet, New CSS Snippet, New PHP Snippet, or New HTML Snippet — depending on the type of code you want to add.

Step 2: The new snippet will appear in the sidebar tree and the code editor will open. Give your snippet a name using the text input at the top of the Action Panel.

Step 3: Write your code in the editor. The editor provides syntax highlighting, line numbers, auto-indentation, and bracket matching based on the snippet type.

Step 4: Configure the snippet settings (Section, Placement, Priority) as needed — see the sections below for details on each option.

Step 5: Click “Save” to save your snippet. The snippet is created in a disabled state by default — you will need to toggle it on when you are ready to activate it.

Tip: If you have a folder selected in the tree when you create a new snippet, the snippet will be placed inside that folder automatically.

Duplicating a Snippet

To duplicate an existing snippet, right-click it in the sidebar tree and select “Duplicate” from the context menu. A copy will be created with “(Copy)” appended to the name, starting in a disabled state.

Snippet Types

JavaScript (JS)

JavaScript snippets are enqueued via WordPress’s standard script loading system with jQuery as a dependency. They are stored as physical .js files and support header or footer placement.

CSS

CSS snippets are enqueued via WordPress’s standard stylesheet system. They are stored as physical .css files.

PHP

PHP snippets execute server-side code. They go through a three-stage validation process (syntax check, dangerous function scan, sandbox execution) before activation to keep your site safe. Write your PHP code without opening <?php tags — the plugin handles this automatically.

Warning: PHP snippets run on every page load when enabled. Badly written PHP code can affect your entire site. Always test thoroughly and use the sandbox system.

HTML (Raw)

HTML snippets output content directly into your page’s head, body, or footer. They support <script> and <style> tags and are ideal for analytics tags, tracking pixels, custom meta tags, and other embed codes.

Organizing with Folders

Keep your snippets organized using the folder system. Folders support unlimited nesting (folders within folders) and drag-and-drop reordering.

To create a folder: Click the “New Folder” button in the sidebar.

To move snippets into a folder: Simply drag and drop any snippet onto a folder in the tree view. You can also drag folders into other folders.

To reorder: Drag snippets or folders up and down within the tree to change their sort order.

Tip: Right-click any snippet or folder in the tree to access additional options from the context menu, including duplicate, delete, and export.

Enabling & Disabling Snippets

Every snippet has a toggle switch in the Action Panel that lets you instantly enable or disable it.

Enabled: The snippet’s code is active and running on your site (based on its targeting settings).

Disabled: The snippet’s code is completely inactive. The physical snippet file is removed and the code is not loaded on any page.

New snippets are always created in a disabled state, giving you time to write and configure them before going live.

Tip: For PHP snippets, enabling triggers the sandbox validation to check for errors before your code runs on the live site. If errors are detected, you’ll see an error indicator on the snippet in the tree view.

Targeting Specific Pages & Post Types

The “Section” dropdown in the Action Panel controls where your snippet loads:

Option	Behavior
Frontend Only	Loads on the public-facing site only (not in the WordPress admin).
Admin Only	Loads in the WordPress admin area only.
Entire Site	Loads on both the frontend and admin.
Specific Pages	Loads only on pages you select (see below).
Specific Post Types	Loads only on posts of selected post types (see below).

Using Specific Pages

When you select “Specific Pages” as the section, a searchable multiselect dropdown appears. You can search for and select individual pages and posts where the snippet should load. This also supports post type archives (e.g., the WooCommerce shop page).

Using Specific Post Types

When you select “Specific Post Types”, a multiselect dropdown appears listing all registered public post types on your site. Select the post types where the snippet should load. Note that this targets individual posts of those types, not archive pages.

Tip: To target a post type’s archive page, use “Specific Pages” instead and select the archive entry from the list.

Placement & Priority

Placement

The “Placement” dropdown controls where in the page your snippet’s code is inserted:

For JS and CSS snippets: Choose between Header (loaded in <head>) or Footer (loaded before the closing </body> tag).

For HTML snippets: Choose between Header (wp_head), Body (wp_body_open), or Footer (wp_footer).

Priority

The “Priority” field accepts a number (default: 10) that controls the order snippets are executed. Lower numbers run first. This uses WordPress’s standard hook priority system.

For example, a snippet with priority 5 will load before one with priority 10.

PHP Sandbox (Safety System)

The PHP Sandbox is the plugin’s most important safety feature. It prevents badly-written PHP snippets from crashing your live site by testing them in an isolated environment before they run.

How It Works

When you save or enable a PHP snippet, the plugin runs a three-stage validation:

Stage 1 — Syntax Check: The code is parsed for PHP syntax errors. If any are found, the error is displayed and the process stops.

Stage 2 — Dangerous Function Scan: The code is scanned for potentially risky functions such as eval, exec, system, shell_exec, and others. If found, a warning is displayed.

Stage 3 — Sandbox Execution: The plugin makes an isolated HTTP request to your site, including all currently-enabled PHP snippets plus the new one. If the execution completes without fatal errors, the snippet is marked as safe.

Important: If the sandbox detects errors, the error message will appear on the snippet as a visual indicator in the tree view. However, the snippet’s enabled/disabled state is not changed automatically — you will need to review and fix the error yourself.

Cloudflare Compatibility

The sandbox automatically handles Cloudflare and WAF (Web Application Firewall) challenges by rotating through multiple browser user agents during the test request.

Elementor Integration

The plugin provides deep integration with Elementor page builder, allowing you to add per-element CSS snippets with live preview and bidirectional sync.

Step 1: Open the Element’s Advanced Tab

In the Elementor editor, select any widget, section, column, or container. Go to the “Advanced” tab and look for the “{C} CSS Snippet” section.

Step 2: Enable Sync and CSS

Toggle on “Sync with {C} Snippets Plugin” to enable bidirectional sync between the Elementor editor and the Snippets plugin. Then toggle on “Enable CSS” to activate the CSS code.

Step 3: Write Your CSS

Enter your CSS code in the code editor. Use the keyword selector in your CSS to target the current element. The plugin will automatically replace selector with the element’s unique CSS selector.

selector {
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 20px;
}

selector:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Step 4: Save the Page

When you save the page in Elementor, the CSS snippet is automatically synced to the Snippets plugin as an “Elementor CSS” type snippet. Changes made in either the Elementor editor or the Snippets admin will stay in sync.

Tip: CSS changes are previewed live in the Elementor editor — no page save required to see your styling updates.

Multi-User Editing

When multiple administrators are working on your site, the plugin includes a real-time editing protection system to prevent conflicts.

How it works: When a user opens a snippet for editing, other users will see that user’s avatar next to the snippet in the tree view, indicating it’s currently being edited.

If you try to open a snippet that someone else is editing, a conflict dialog will appear with the option to “Takeover” editing. Taking over will lock out the other user from editing that snippet.

Sessions expire automatically after 60 seconds of inactivity, so you don’t need to worry about stale locks from users who have navigated away.

Import & Export

Exporting Snippets

Step 1: In the sidebar, click the “Import / Export” dropdown and select “Export”.

Step 2: Choose to export all snippets or select specific snippets to export via the context menu (right-click a snippet and select “Export”).

Step 3: A JSON file will be downloaded to your computer containing all snippet data, folder structure, and settings. The export includes integrity checksums to verify data hasn’t been corrupted.

Importing Snippets

Step 1: Click the “Import / Export” dropdown and select “Import”.

Step 2: Upload a previously exported JSON file.

Step 3: The plugin validates the file’s integrity (checksums and structure) and imports all snippets. Imported snippets are placed at the end of the tree and start disabled by default. Folder structure and parent-child relationships are fully preserved.

Tip: Import/export is a great way to migrate your snippets between sites or share snippet collections with your team.

Search & Filtering

Basic Search

Use the search bar in the sidebar to search snippet titles in real-time as you type. You can also search by snippet ID by entering a number.

Advanced Search

Click the gear icon next to the search bar to reveal advanced filters:

Filter	Description
Type Filters	Toggle buttons to filter by JS, CSS, PHP, or HTML type.
Show only my snippets	Filters to snippets authored by you.
Search by content	Searches within snippet code content, not just titles.
Hide unmatched	Hides non-matching snippets entirely instead of dimming them.

Troubleshooting

A PHP Snippet Crashed My Site

Don’t worry — the Snippets admin page is designed to still work even when a snippet causes errors. Navigate directly to:

https://yoursite.com/wp-admin/admin.php?page=codicts_snippets

Snippets are not loaded on the admin snippets page, so you can safely disable or delete the problematic snippet from there.

Sandbox Timeout Errors

If you see “Sandbox validation timeout — server too slow”, this means your server took too long to run the sandbox test. Check with your hosting provider about PHP execution time limits. If you use Cloudflare or a WAF, the sandbox tries multiple user agents automatically, but you may need to temporarily whitelist the request. You can also try temporarily disabling any security plugins during testing.

Snippet Files Not Loading

If snippets aren’t appearing on your site, regenerate the snippet files by deactivating and reactivating the plugin. On activation, all enabled snippet files are automatically regenerated.

Multi-User Session Stuck

If a snippet shows someone is editing it but they’ve already left, simply wait 60 seconds for the session to expire automatically, or click the “Takeover” button to force-claim the snippet.

---

For further support, visit codicts.com or contact us at support@codicts.com.