One-click copy-to-clipboard for shortcodes & code snippets. Hide the raw code or show it inline. Works with a shortcode or Gutenberg block.

webcodingplace

<p><strong>Clipboard Snippet Copier</strong> 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.</p>
<p>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.</p>
<h4>Why use it?</h4>
<ul>
<li><strong>Sell or showcase shortcodes</strong> — give buyers a “Copy Demo” button without exposing messy markup.</li>
<li><strong>Document your code</strong> — share PHP / JS / CSS examples on tutorial pages with a proper copy button.</li>
<li><strong>Reduce support tickets</strong> — eliminate “the shortcode didn’t work” issues caused by smart quotes, missing brackets, or whitespace mangling.</li>
<li><strong>Track engagement</strong> — built-in per-snippet copy counter shows what your audience actually uses.</li>
</ul>
<h4>Key features</h4>
<ul>
<li>📋 One-click copy to clipboard with success/failure tooltip.</li>
<li>🔒 <strong>Hidden mode</strong> — the snippet is stored in the admin and fetched via AJAX only when copied (never rendered in the HTML).</li>
<li>👁️ <strong>Inline mode</strong> — render the snippet visibly as a <code><pre><code></code> block with a copy button on top.</li>
<li>🧱 <strong>Gutenberg block</strong> with sidebar controls (snippet ID, label, inline toggle, language hint).</li>
<li>🔢 <strong>Shortcode</strong> for the Classic Editor, WPBakery, Elementor and any other builder.</li>
<li>🧮 <strong>Copy counter</strong> — sortable “Copies” column on the admin list, so you can see what’s popular.</li>
<li>⚙️ <strong>Settings page</strong> — default label, default CSS class, tooltip text, guest-access toggle.</li>
<li>📝 <strong>CodeMirror editor</strong> on the snippet edit screen — keeps your indentation and angle brackets intact.</li>
<li>⚡ Tiny footprint — no jQuery dependency on the frontend, no external libraries.</li>
<li>🌐 Translation-ready.</li>
</ul>
<h4>How it works</h4>
<ol>
<li>You add a snippet in <strong>Code Snippets <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New</strong> and note its ID.</li>
<li>You drop the <strong>Clipboard Snippet</strong> block (or the <code>[clipsnco_code_copy_btn]</code> shortcode) onto any page.</li>
<li>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).</li>
</ol>
<h3>Usage</h3>
<h4>Quick start (shortcode)</h4>
<pre><code>[clipsnco_code_copy_btn id="123" label="Copy Code"]
</code></pre>
<p>Where <code>123</code> is the ID of your snippet (visible in the <strong>Code Snippets</strong> admin list).</p>
<h4>Shortcode attributes</h4>
<ul>
<li><code>id</code> <em>(required, integer)</em> — the snippet ID.</li>
<li><code>label</code> <em>(optional, string)</em> — button text. Defaults to the value set on the Settings page.</li>
<li><code>class</code> <em>(optional, string)</em> — extra CSS classes added to the button.</li>
<li><code>inline</code> <em>(optional, “yes” / “no”)</em> — when <code>yes</code>, the snippet is rendered as a <code><pre><code></code> block with a copy button on top. Default <code>no</code>.</li>
<li><code>language</code> <em>(optional, string)</em> — e.g. <code>php</code>, <code>js</code>, <code>css</code>. Adds a <code>language-xxx</code> class on the <code><code></code> element so syntax-highlighter libraries (Prism.js, highlight.js) can colourise it.</li>
</ul>
<p>Examples:</p>
<ul>
<li>Hidden snippet, custom label: <code>[clipsnco_code_copy_btn id="42" label="Copy shortcode"]</code></li>
<li>Inline display with PHP highlighting: <code>[clipsnco_code_copy_btn id="42" inline="yes" language="php"]</code></li>
<li>Extra CSS class for theme styling: <code>[clipsnco_code_copy_btn id="42" class="my-cta-btn"]</code></li>
</ul>
<h4>Gutenberg block</h4>
<p>In the block editor, search for <strong>“Clipboard Snippet”</strong> and insert it. The sidebar lets you set:</p>
<ul>
<li><strong>Snippet ID</strong> — the post ID of the snippet to copy.</li>
<li><strong>Button label</strong> — overrides the default label.</li>
<li><strong>Show code inline</strong> — toggle hidden vs inline display.</li>
<li><strong>Language hint</strong> — optional syntax-highlighter class.</li>
</ul>
<p>The block is server-rendered, so you can switch between block and shortcode usage freely.</p>
<h4>Alternative button markup</h4>
<p>If your page builder won’t let you drop a <code><button></code> 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:</p>
<pre><code><a href="#" class="wcp-code-copy-btn" data-codecopy-id="123">Copy</a>
</code></pre>
<p>…or, when even attributes aren’t allowed, use the class-only form:</p>
<pre><code><span class="wcp-code-copy-btn data-codecopy-id-123">Copy</span>
</code></pre>
<h4>Settings</h4>
<p><strong>Code Snippets <span aria-hidden="true" class="wp-exclude-emoji">→</span> Settings</strong> lets you configure:</p>
<ul>
<li>Default button label</li>
<li>Default CSS class applied to every button</li>
<li>Tooltip text shown on copy success / failure</li>
<li>Whether non-logged-in visitors are allowed to copy snippets</li>
</ul>
<h4>Copy counter</h4>
<p>Every successful copy by a non-editor user bumps a <code>_clipsnco_copy_count</code> post meta value. The count is shown in the <strong>Copies</strong> column on the snippets admin list. Click the column header to sort by most-copied.</p>
<h4>Styling</h4>
<p>The button receives the class <code>wcp-code-copy-btn</code> plus anything you add via the shortcode/block <code>class</code> attribute. The inline-mode wrapper uses these classes (override them from your theme):</p>
<ul>
<li><code>.clipsnco-inline-wrap</code> — outer container</li>
<li><code>.clipsnco-inline-toolbar</code> — top bar containing the copy button</li>
<li><code>.clipsnco-pre</code> — the <code><pre></code> element</li>
<li><code>.clipsnco-code</code> — the <code><code></code> element (also gets <code>language-xxx</code> when set)</li>
</ul>


Alternatives to Clipboard Snippet Copier

Top alternatives