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)