Clipboard Snippet Copier

Description

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

1. You add a snippet in Code Snippets → Add New and note its ID.
2. You drop the Clipboard Snippet block (or the [clipsnco_code_copy_btn] shortcode) onto any page.
3. 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)