How to Add a Copy-to-Clipboard Button in WordPress

Before you start

Automatic clipboard writes depend on browser permissions and a secure context. A local file, an embedded preview, or a restrictive browser setting can behave differently from a normal HTTPS page. The site’s sandboxed preview intentionally limits privileges, so failure feedback there is part of the example’s design. Start by opening the standalone download and examining both the success and failure paths.

How copying works

The .iljs-copy root contains a textarea, a button, and a status paragraph. A label describes the text field; readonly prevents editing while still allowing selection. The script reads text.value, not an unrelated HTML string or the button’s label. That keeps the copied result easy to inspect before activation.

Inside the click handler, navigator.clipboard.writeText returns a promise. The script awaits that promise before showing “Text copied.” If the API is unavailable or the promise rejects, the catch branch focuses and selects the textarea. It gives a manual instruction rather than pretending a legacy clipboard command succeeded.

The status paragraph uses role="status", allowing an assistive technology to announce feedback without moving focus away from the action on success. Each root queries its own elements, and data-iljs-ready prevents duplicate initialization. You can repeat this structure for several independent text blocks without giving them all the same ID.

Add it to WordPress

1. Add a Custom HTML block to a draft page and paste the HTML fragment. Replace the textarea’s example sentence with the exact text visitors should copy.
2. Keep the textarea and its label visible. Do not replace it with a hidden field if visitors need to inspect or manually copy the content.
3. Install the CSS through your theme’s available Additional CSS interface or an approved stylesheet. The classes are scoped to this component.
4. Install the JavaScript through a permitted path. The WordPress JavaScript guide explains how to enqueue a file and how script stripping can affect a Custom HTML block.
5. Save the draft, load the HTTPS front end, and click Copy text. Paste into a plain-text editor to verify the actual copied value.
6. Test manual selection as well. A useful component still offers a way to obtain the text when clipboard permission is denied.

WordPress 7.0 offers dedicated CSS and JavaScript panels to users with unfiltered_html; restricted roles do not receive those panels. Older editors may require a separate script installation method. Elementor users can use an HTML widget where permitted, with styles and scripts supplied through available interfaces. Restricted WordPress.com plans may need administrator or hosting support. See the general installation guide before using a combined block.

Choose the right content

Keep the text short enough to understand before copying. If it contains a shell command, explain what the command does and which values must change. If it is a coupon, ensure the offer is real and current. If it contains an address, make sure it belongs to the intended recipient. This component does not validate or sanitize the information you publish.

HTML characters inside the textarea need ordinary HTML escaping. For example, show a literal less-than sign as < in the markup. The browser converts that entity into the textarea value, so copying retrieves the intended plain text. Never insert an untrusted closing textarea tag through raw HTML generation.

For longer source examples, code tabs with a copy control are more readable than a tiny textarea. If readers need several short sections, interactive tabs can organize content, but avoid hiding the selected text after a copy failure.

Customize the presentation

The .iljs-copy maximum width is 460 pixels. It shrinks to its available container width. Change --iljs-accent for the button and --iljs-radius for the outer panel. The textarea uses its own border radius and padding; edit those separately if you want the shapes to match exactly.

Change the button label from Copy text to a precise action such as Copy command or Copy address. Keep the success message specific. Do not replace the status with a disappearing icon that screen-reader users cannot interpret. The status area reserves some height so feedback is less likely to push surrounding content unexpectedly.

If you want a decorative action link elsewhere, the gradient button provides that styling. A copy action still belongs on a button, because it changes browser state rather than navigating to another page.

Troubleshoot failures honestly

The clipboard API is missing. Confirm that the page is served through HTTPS or a browser-supported local development context. The fallback should select the text and explain manual copying. Do not label this case successful.

Copying works in one browser but not another. Permissions, privacy settings, and embedded-frame policies can differ. Keep the manual route and test the browsers your visitors actually use.

The button has no response. Inspect whether WordPress removed the script or whether the installed file loaded. The visible textarea remains useful, but the inactive button is not a completed interaction. Fix installation or remove that button until behavior is available.

The wrong text is copied. Check that your edited value is inside the textarea and that you did not accidentally duplicate the component while querying a global selector. The supplied script scopes its lookup to each root.

The message is invisible. Your theme may override the status paragraph’s color or layout. Inspect the .iljs-copy-status rule and avoid relying on color alone to indicate success.

Accessibility and privacy

The textarea can receive focus and be selected. The action is a native button, so Enter and Space work normally. Success does not redirect the visitor or replace the page. On failure, moving focus to the selected text is intentional and accompanied by a clear instruction.

The component writes only the displayed value after activation. It does not read the visitor’s existing clipboard, transmit the text to a service, or store it. Avoid surprising clipboard replacement: a label should explain what is being copied. In an FAQ accordion, make sure the copy control’s label still makes sense when the question is expanded.

Frequently asked questions

Can I guarantee copying everywhere?

No. The browser controls clipboard permission. A reliable component reports confirmed success and gives a useful manual fallback.

Can I copy text that visitors edit?

Remove readonly if editing is part of the experience. Then explain that the current field value, including their changes, will be copied. The script already reads that value at click time.

Does it copy formatting?

This example copies plain text. Rich HTML clipboard content requires a different API and additional consideration. Plain text is usually the right choice for commands and reusable code.

Check your installation

Copy and paste the result, compare it character by character, and test the fallback with clipboard permission unavailable. The component is ready only when its feedback matches what actually happened.