How to Add a “Copy to Clipboard” Button in WordPress

Adding a “Copy to Clipboard” button to your WordPress site makes it easy for visitors to copy code snippets, coupon codes, links, or any text with a single click. This improves user experience and increases engagement.

In this guide, you’ll learn three simple methods to add a copy button in WordPress—without coding (using plugins) and with custom code for more control.

Why Add a Copy to Clipboard Button?

✔ Improves usability – Visitors can quickly copy text without manual selection.
✔ Great for code snippets – Developers and bloggers can share code easily.
✔ Boosts conversions – Helps users copy discount codes, referral links, or contact info faster.
✔ Reduces errors – Prevents mistakes when copying long texts manually. Our YouTube channel; https://www.youtube.com/@easythemestore

Method 1: Using a Plugin (Easiest Way)

If you don’t want to code, these plugins add a copy button effortlessly:

1. Copy the Code Block (for Gutenberg)

🔹 Best for: Adding copy buttons to code blocks in the WordPress Block Editor.
🔹 Steps:

1. Install Copy the Code.
2. Edit a post/page, add a Code block, and the copy button will appear automatically.

2. Clipboard Plus

🔹 Best for: Adding copy buttons to any text, links, or shortcodes.
🔹 Steps:

1. Install Clipboard Plus.
2. Use the shortcode [clipboard]Text to Copy[/clipboard] in your content.

3. WP Copy Protect (Prevent Content Theft + Copy Button)

🔹 Best for: Adding copy buttons while protecting content from theft.
🔹 Steps:

1. Install WP Copy Protect.
2. Enable “Allow Copy Button” in settings.

Method 2: Manually Add with HTML & JavaScript (More Control)

If you prefer a custom solution, add this code to your WordPress site:

Step 1: Add HTML

Place this where you want the copy button (e.g., in a Custom HTML block or theme file):

<div class="copy-text-box">
  <textarea id="copyTarget" readonly>Text to be copied goes here</textarea>
  <button id="copyButton">Copy</button>
</div>

Step 2: Add JavaScript (via WP Admin or Theme Footer)

Go to Appearance > Theme File Editor and add this to footer.php (or use a plugin like “Header & Footer Scripts”):

<script>
  document.getElementById("copyButton").addEventListener("click", function() {
    const copyText = document.getElementById("copyTarget");
    copyText.select();
    document.execCommand("copy");
    alert("Copied: " + copyText.value);
  });
</script>

Step 3: Style with CSS (Optional)

Add this to Additional CSS (in Customizer):

.copy-text-box {
  margin: 10px 0;
}
#copyTarget {
  width: 100%;
  padding: 8px;
  margin-bottom: 5px;
}
#copyButton {
  background: #2271b1;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
}
#copyButton:hover {
  background: #135e96;
}

Method 3: Using a Shortcode (For Advanced Users)

If you want a reusable shortcode, add this to your theme’s functions.php:

function copy_button_shortcode($atts, $content = null) {
  $text = esc_attr($atts['text']);
  return '
    <div class="copy-text-box">
      <input type="text" id="copyInput-' . uniqid() . '" value="' . $text . '" readonly>
      <button onclick="copyToClipboard(\'copyInput-' . uniqid() . '\')">Copy</button>
    </div>
    <script>
      function copyToClipboard(elementId) {
        const copyText = document.getElementById(elementId);
        copyText.select();
        document.execCommand("copy");
        alert("Copied: " + copyText.value);
      }
    </script>
  ';
}
add_shortcode('copy_button', 'copy_button_shortcode');

Usage:

[copy_button text="Your text here"]

Which Method Should You Use?

• For beginners → Use Copy the Code or Clipboard Plus plugins.
• For developers → Use the custom JavaScript method for full control.
• For reusable buttons → Use the shortcode method.

Final Thoughts

Adding a “Copy to Clipboard” button in WordPress improves user experience and engagement. Whether you use a plugin or custom code, it’s a simple yet powerful feature to implement.

🚀 Try it today and make content sharing effortless!

These methods will help you enhance usability and keep visitors engaged!