WDD
Custom Code Manager
v1.0.0 docs
Reference
WDD Custom Code Manager

Inject any code,
anywhere on your site.

Add custom CSS, JavaScript, HTML, and PHP snippets — site-wide or per page — with a professional syntax-highlighted editor, device targeting, and full export/import support. No theme file edits. No FTP. Just code that works.

v1.0.0 WordPress 5.2+ GPL-2.0+ WP Rocket Compatible
CSS
/* 🎨 Global brand snippet — loads on every page */

:root {
  --brand-primary: #6366f1;
  --brand-font: 'Inter', sans-serif;
}

body {
  font-family: var(--brand-font);
}

01 · Overview

What is WDD Custom Code Manager?

WDD Custom Code Manager is a WordPress plugin that gives you a centralised, secure place to manage all custom code on your site. Instead of editing functions.php or scattering snippets across theme files, every piece of code lives in a searchable database with its own toggle, scope, priority, and device rules.

6 Code Types

CSS, JavaScript, HTML for <head>, <body>, </body>, plus optional PHP execution.

Precise Targeting

Load any snippet globally or restrict it to specific posts and pages with a live search picker.

Device Visibility

Control whether a snippet runs on Desktop, Tablet, Mobile, or any combination — natively.

Syntax Editor

WordPress's built-in CodeMirror editor with line numbers, bracket matching, and language modes.

Export / Import

Back up every snippet and setting to JSON. Migrate between sites in seconds.

Secure by Design

Nonce verification, capability checks, and sanitisation on every input. PHP requires explicit opt-in.

ℹ️
WP Rocket Compatible
All output hooks respect WordPress's native enqueueing. The plugin does not bypass or break caching, minification, or page rendering pipelines.

02 · Requirements

System Requirements

RequirementMinimumRecommended
WordPress5.2 (wp_body_open support)6.0+
PHP7.48.1+
MySQL5.68.0+
Browser (admin)Chrome 80, Firefox 75, Safari 13Latest stable
User capabilitymanage_options — administrators only

03 · Installation

Installing the Plugin

1

Upload the plugin

Go to WordPress Admin → Plugins → Add New → Upload Plugin. Select the wdd-custom-code-manager.zip file and click Install Now.

You can also extract the zip and upload the folder to your server's /wp-content/plugins/ directory via FTP.
2

Activate

Find WDD Custom Code Manager in your plugins list and click Activate. The plugin will automatically create its database table (wp_wdd_ccm_snippets) on first activation.

3

Open the admin panel

A new Code Manager menu item appears in your WordPress sidebar. Click it to open the dashboard.

4

Add your first snippet

Click Add New Snippet, choose a code type, paste or write your code in the editor, and hit Save Snippet. It goes live immediately.

04 · Admin Interface

Admin Interface Guide

The plugin adds a Code Manager top-level menu with four sections. Here is a preview of what the snippets list looks like:

All Snippets
Add New
Settings
Export / Import
5
Total
3
Active
2
Inactive
Global Brand CSS
CSS Global
Product Page Analytics
JS Specific
Cookie Consent Banner
HTML Global

05 · Code Types

Code Types

Every snippet has a type that determines what the code is and where it gets injected in the page lifecycle.

CSS
Custom Stylesheet
Injected as an inline <style> block in <head>. Device visibility is applied via @media queries — zero JavaScript required.
wp_head (99)
JavaScript
Custom Script
Injected as an inline <script> block before </body>. Device visibility wraps code in a window.innerWidth IIFE guard.
wp_footer (99)
HTML Head
Head Tags
Raw HTML printed inside <head>. Use for meta tags, preload links, third-party verification tags, or structured data scripts.
wp_head (100)
HTML Body
After <body> Tag
Printed immediately after the opening <body> tag. Ideal for Google Tag Manager noscript, Facebook Pixel, or chat widget scripts. Falls back to output buffer for older themes.
wp_body_open
HTML Footer
Before </body> Tag
Printed just before the closing </body>. Useful for lazy-loaded widgets, chatbots, or deferred tracking pixels that must live in the footer.
wp_footer (100)
PHP
PHP Snippet
Executed server-side via eval(). Must be enabled in Settings first. Any output is captured and printed in the footer. PHP open/close tags are stripped automatically.
wp_footer (101)

Code Examples

CSS — Hide an element on mobile
/* Hide the sidebar on phones */
.sidebar-widget {
  display: block;
}
/* WDD device visibility handles the @media wrap automatically */
JavaScript — Scroll-to-top button
// Inject a back-to-top button after DOM load
document.addEventListener('DOMContentLoaded', function () {
  var btn = document.createElement('button');
  btn.textContent = '↑';
  btn.id = 'wdd-scroll-top';
});
HTML Head — Preload a font
<link rel="preload"
      href="https://fonts.googleapis.com/css2?family=Inter"
      as="style" />

06 · Snippet Scope

Snippet Scope

Every snippet can be either Global (loads on every front-end page) or Specific Pages (loads only on selected posts or pages).

Global

The snippet runs on every page of your site — including archives, search results, and custom post types. This is the default and the right choice for things like brand CSS, analytics scripts, or chat widgets.

Specific Pages

In the editor’s right sidebar, switch the Load On card to Specific Pages. A live search field appears — type any page or post title and select it. You can add multiple pages. The snippet will only fire when one of those page IDs matches the current get_queried_object_id().

ℹ️
Under the hood
Selected post IDs are stored as a comma-separated list in the database. The frontend engine compares them against get_queried_object_id() on every page load — no additional queries are run.

07 · Device Visibility

Device Visibility

Control which screen sizes a snippet renders on. Check any combination of Desktop, Tablet, and Mobile. Leaving all three checked (or all unchecked) means the snippet loads on all devices.

How it works per code type

Code TypeMechanismExample output
CSSWrapped in a @media query.@media screen and (min-width: 1025px) { … }
JavaScriptWrapped in an IIFE with a window.innerWidth guard.(function(){ if(window.innerWidth < 768){ … } })();
HTML (all)Server-side check using wp_is_mobile().Snippet is skipped entirely if device doesn't match.
PHPSame server-side wp_is_mobile() check.eval() is skipped; no output is produced.

Breakpoint Values

The exact pixel values used for media queries and JS guards come from Settings → Device Breakpoints. Defaults:

DeviceDefault rangeSetting key
Desktop≥ 1025pxdesktop_breakpoint
Tablet768px – 1024pxtablet_breakpoint
Mobile< 768px (auto-calculated)— (derived)
⚠️
Tablet detection server-side
wp_is_mobile() classifies tablets as mobile. For HTML and PHP snippets, selecting only Tablet may behave unexpectedly. For precise tablet targeting, use a CSS or JS snippet where device detection is viewport-based.

08 · Code Editor

Code Editor

The plugin uses WordPress’s built-in CodeMirror editor, the same one used in the Customizer and Theme Editor. It loads with a custom configuration tuned for each language mode.

Editor Features

  • Syntax highlighting — correct language mode loads automatically when you switch the code type.
  • Line numbers — always visible in the gutter.
  • Bracket & tag matching — paired characters are highlighted as you type.
  • Auto-close brackets & tags — {, [, (, <tag> close automatically.
  • Comment toggling — Ctrl+/ (Windows) or Cmd+/ (Mac).
  • Soft tabs — 4-space indentation by default, no hard tabs.
  • Line wrapping — long lines wrap within the editor viewport.
  • Fullscreen mode — click the expand icon in the editor toolbar; press Esc to exit.

Language Modes

Code TypeCodeMirror Mode
CSStext/css
JavaScripttext/javascript
HTML Head / Body / Footertext/html
PHPapplication/x-httpd-php
ℹ️
Editor disabled?
If you have turned off the syntax editor in your WordPress User Profile → Disable syntax highlighting when editing code, the plugin gracefully falls back to a plain <textarea>. Your code is never lost.

09 · PHP Snippets

PHP Snippets

🔐
Security Notice
PHP snippets execute arbitrary code server-side via eval(). Only enable this feature if you fully trust the code you are running. Never paste PHP from untrusted sources. This feature requires the manage_options capability and is disabled by default.

Enabling PHP Snippets

1

Open Settings

Go to Code Manager → Settings.

2

Toggle on

Toggle Enable PHP Snippets to on.

3

Save

Click Save Settings. The PHP type button now appears in the snippet editor.

Writing PHP Snippets

You can write PHP with or without opening and closing tags — the plugin strips them automatically before eval().

PHP — Add custom body class
// Add a custom class to <body> on product pages
add_filter('body_class', function( $classes ) {
  if (is_singular('product')) {
    $classes[] = 'wdd-product-page';
  }
  return $classes;
});

Error Handling

If a PHP snippet contains a syntax error, it is caught with a try/catch block. A debug comment is printed in the page HTML only for logged-in administrators — visitors never see an error.

HTML Source — Admin-only error comment
<!-- WDD CCM: PHP error in snippet "My Snippet": syntax error, unexpected token -->

10 · Settings

Settings Reference

SettingDefaultDescription
Enable PHP SnippetsOffUnlocks the PHP code type. Executes code with eval(). Requires deliberate opt-in.
Auto-strip PHP tagsOffAutomatically removes <?php and ?> wrappers before executing.
Disable on Login PageOffPrevents all snippets from loading on wp-login.php. Useful to avoid JS conflicts.
Desktop Breakpoint1025Minimum pixel width for the Desktop device target. Used in CSS @media queries and JS guards.
Tablet Breakpoint768Minimum pixel width for the Tablet device target. Mobile is automatically everything below this value.

11 · Export / Import

Export & Import

Navigate to Code Manager → Export / Import to back up or restore your snippets.

Exporting

Click Download Export File. Your browser downloads a timestamped JSON file (e.g. wdd-ccm-export-2024-01-15.json) containing every snippet and your current plugin settings.

JSON — Export file structure
{
  "plugin":   "WDD Custom Code Manager",
  "version":  "1.0.0",
  "exported": "2024-01-15 14:30:22",
  "settings": { /* plugin settings object */ },
  "snippets": [
    {
      "id":                 1,
      "title":              "Global Brand CSS",
      "code_type":          "css",
      "scope":              "global",
      "device_visibility": "all",
      "status":             1,
      "priority":           10
    }
  ]
}

Importing

Drag and drop a .json export file onto the upload zone, or click Browse File to select it. Then choose an import mode:

  • Merge — adds imported snippets alongside existing ones. Safe default; nothing is deleted.
  • Replace — deletes all existing snippets first, then imports. Use when migrating to a fresh site.

You can optionally check Also import plugin settings to restore breakpoint and PHP preferences from the file.

⚠️
Replace mode is destructive
Once you click Import in Replace mode, all existing snippets are permanently deleted before the imported ones are added. Export first if you need a backup.

12 · FAQ

Frequently Asked Questions

No. Active snippets are fetched in a single database query per page load, cached in a PHP variable for the request lifetime, and output inline at their respective hooks. There are no extra HTTP requests, no JavaScript framework, and no frontend assets loaded unless you have active snippets of that type.

Yes. The plugin outputs code through WordPress’s standard hook system (wp_head, wp_footer, etc.), which is fully respected by WP Rocket, LiteSpeed Cache, W3 Total Cache, and other major caching plugins. CSS and JS are injected inline — they do not create separate files.

Deactivating the plugin simply stops it from running — your snippets remain in the database and will be available when you reactivate. The database table and settings are only removed when you delete the plugin (which runs uninstall.php). Always export your snippets before uninstalling.

Yes. When the active theme does not call wp_body_open(), the plugin starts a PHP output buffer on template_redirect and uses a regex replace to inject the body code immediately after the opening <body> tag. This fallback technique works with virtually all themes.

The importer expects the WDD CCM JSON format. Exports from other plugins (e.g. Code Snippets, WPCode) use different structures and cannot be imported directly. You would need to manually re-add those snippets or write a migration script.

Yes — but be aware of timing. PHP snippets are executed on wp_footer (priority 101), which is after wp_enqueue_scripts, wp_head, and the main page content. Hooks that need to fire earlier in the request lifecycle cannot be registered from a PHP snippet.

Priority controls the order snippets of the same type are output. Lower numbers run first (like WordPress’s add_action priority). The default is 10. If you have two CSS snippets and one needs to override the other, give the overriding snippet a higher number (e.g. 20).

Go to Code Manager → All Snippets, find the snippet in the table, and click Edit. Alternatively, click the snippet title. This loads the editor in edit mode with the existing code pre-filled.

13 · Changelog

Changelog

v1.0.0 — Initial Release Latest
  • NEWCustom database table (wp_wdd_ccm_snippets) created on activation via dbDelta().
  • NEWFull CRUD for snippets with title, description, code, type, scope, device visibility, status, and priority fields.
  • NEWSix code types: CSS, JavaScript, HTML Head, HTML Body, HTML Footer, PHP.
  • NEWGlobal scope and Specific Pages scope with live AJAX post/page search picker.
  • NEWDevice visibility targeting (Desktop / Tablet / Mobile) per snippet; CSS uses @media queries, JS uses window.innerWidth IIFEs, HTML/PHP use wp_is_mobile().
  • NEWCodeMirror editor with syntax highlighting, line numbers, bracket matching, auto-close, and fullscreen mode.
  • NEWPHP snippet execution behind an opt-in setting with try/catch error handling.
  • NEWOutput buffer fallback for themes without wp_body_open() support.
  • NEWConfigurable breakpoints (Desktop, Tablet) in Settings.
  • NEWJSON Export and Import with Merge / Replace modes; optional settings import.
  • NEWDrag-and-drop file upload on the Import page.
  • NEWBulk actions: Activate, Deactivate, Delete — with select-all checkbox.
  • NEWAJAX status toggle and single-row delete on the snippets list.
  • SECNonce verification on all AJAX requests and form submissions; manage_options capability check on every action.
  • SECAll inputs sanitised; code stored raw (capability-checked at write time) and output verbatim by design.
  • OPTClean uninstall: uninstall.php drops the table and removes all plugin options.
WDD
WDD Custom Code Manager
v1.0.0 · GPL-2.0+

Nasibul Alam

Nasibul Alam is a Certified WordPress Developer and Google SEO Expert

Nasibul Alam is a Certified WordPress Developer and Google SEO Expert. He is the Founder and CEO of WebDevDoer and a top-rated freelancer on Fiverr.