Clipboard Snippet Copier

Clipboard Snippet Copier lets you share ready-to-use shortcodes, demo layouts, or any reusable code snippets with your visitors. Click a button and the snippet is copied straight to their clipboard. No manual selection, no copy/paste errors.

You decide whether the snippet stays hidden (fetched only when copied) or is displayed inline as a styled code block. Either mode is one click away for the visitor.

Why use it?

• Sell or showcase shortcodes — give buyers a “Copy Demo” button without exposing messy markup.

• Document your code — share PHP / JS / CSS examples on tutorial pages with a proper copy button.

• Reduce support tickets — eliminate “the shortcode didn’t work” issues caused by smart quotes, missing brackets, or whitespace mangling.

• Track engagement — built-in per-snippet copy counter shows what your audience actually uses.

Key features

• 📋 One-click copy to clipboard with success/failure tooltip.

• 🔒 Hidden mode — the snippet is stored in the admin and fetched via AJAX only when copied (never rendered in the HTML).

• 👁️ Inline mode — render the snippet visibly as a <pre><code> block with a copy button on top.

• 🧱 Gutenberg block with sidebar controls (snippet ID, label, inline toggle, language hint).

• 🔢 Shortcode for the Classic Editor, WPBakery, Elementor and any other builder.

• 🧮 Copy counter — sortable “Copies” column on the admin list, so you can see what’s popular.

• ⚙️ Settings page — default label, default CSS class, tooltip text, guest-access toggle.

• 📝 CodeMirror editor on the snippet edit screen — keeps your indentation and angle brackets intact.

• ⚡ Tiny footprint — no jQuery dependency on the frontend, no external libraries.

• 🌐 Translation-ready.

How it works

• You add a snippet in Code Snippets → Add New and note its ID.

• You drop the Clipboard Snippet block (or the [clipsnco_code_copy_btn] shortcode) onto any page.

• When a visitor clicks the button, the snippet is fetched over AJAX and written to their clipboard — without ever appearing in the page source (unless you turned on inline mode).

Usage

Quick start (shortcode)

[clipsnco_code_copy_btn id="123" label="Copy Code"]

Where 123 is the ID of your snippet (visible in the Code Snippets admin list).

Shortcode attributes

• id (required, integer) — the snippet ID.

• label (optional, string) — button text. Defaults to the value set on the Settings page.

• class (optional, string) — extra CSS classes added to the button.

• inline (optional, “yes” / “no”) — when yes, the snippet is rendered as a <pre><code> block with a copy button on top. Default no.

• language (optional, string) — e.g. php, js, css. Adds a language-xxx class on the <code> element so syntax-highlighter libraries (Prism.js, highlight.js) can colourise it.

Examples:

• Hidden snippet, custom label: [clipsnco_code_copy_btn id="42" label="Copy shortcode"]

• Inline display with PHP highlighting: [clipsnco_code_copy_btn id="42" inline="yes" language="php"]

• Extra CSS class for theme styling: [clipsnco_code_copy_btn id="42" class="my-cta-btn"]

Gutenberg block

In the block editor, search for “Clipboard Snippet” and insert it. The sidebar lets you set:

• Snippet ID — the post ID of the snippet to copy.

• Button label — overrides the default label.

• Show code inline — toggle hidden vs inline display.

• Language hint — optional syntax-highlighter class.

The block is server-rendered, so you can switch between block and shortcode usage freely.

Alternative button markup

If your page builder won’t let you drop a <button> element, you can put any element on the page with the data attribute or the helper class — the plugin’s frontend script picks it up automatically:

<a href="#" class="wcp-code-copy-btn" data-codecopy-id="123">Copy</a>

…or, when even attributes aren’t allowed, use the class-only form:

<span class="wcp-code-copy-btn data-codecopy-id-123">Copy</span>

Settings

Code Snippets → Settings lets you configure:

• Default button label

• Default CSS class applied to every button

• Tooltip text shown on copy success / failure

• Whether non-logged-in visitors are allowed to copy snippets

Copy counter

Every successful copy by a non-editor user bumps a _clipsnco_copy_count post meta value. The count is shown in the Copies column on the snippets admin list. Click the column header to sort by most-copied.

Styling

The button receives the class wcp-code-copy-btn plus anything you add via the shortcode/block class attribute. The inline-mode wrapper uses these classes (override them from your theme):

clipsnco-inline-wrap — outer container

clipsnco-inline-toolbar — top bar containing the copy button

clipsnco-pre — the <pre> element

clipsnco-code — the <code> element (also gets language-xxx when set)