Add a Copy Button to Code Blocks in WordPress Without Any Plugin.

If you watch popular freelancer or developer tutorial videos, you have probably noticed a small “Copy” button appearing when hovering over code snippets. It is a simple feature, but it makes the user experience much better because visitors can copy code instantly with a single click.

The good news is that you can add the same functionality to your WordPress website without using any extra plugin.

In this tutorial, you will learn how to add a stylish copy button to all code blocks on your WordPress website using a simple PHP snippet.

Why Add a Copy Button to Code Blocks?

Adding a copy button to your code snippets provides several benefits:

• Improves user experience
• Makes tutorials more professional
• Helps visitors copy code easily
• Increases engagement on developer blogs
• Gives your website a modern look

This feature is especially useful for:

• Web developers
• WordPress tutorial websites
• Programming blogs
• Tech agencies
• Freelancers sharing code snippets

Step 1: Add the PHP Code

Open your WordPress theme’s functions.php file and add the following code:

function add_copy_button_script() {
    add_action('wp_footer', function() {
        ?>
        <style>
        .code-copy-wrapper { position: relative; }

        .copy-code-btn {
            position: sticky;
            top: 120px;
            float: right;
            margin: 4px 4px 0 0;
            padding: 2px 8px !important;
            font-size: 11px;
            background: #534AB7;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            opacity: 0;
            transition: opacity .2s;
            z-index: 10;
        }

        .code-copy-wrapper:hover .copy-code-btn {
            opacity: 1;
        }

        .copy-code-btn.copied {
            background: #0F6E56;
        }
        </style>

        <script>
        document.addEventListener("DOMContentLoaded", function () {

            document.querySelectorAll("pre").forEach(function (pre) {

                var wrapper = document.createElement("div");
                wrapper.className = "code-copy-wrapper";

                pre.parentNode.insertBefore(wrapper, pre);
                wrapper.appendChild(pre);

                var btn = document.createElement("button");
                btn.className = "copy-code-btn";
                btn.setAttribute("aria-label", "Copy code");
                btn.textContent = "Copy";

                wrapper.insertBefore(btn, pre);

                btn.addEventListener("click", function () {

                    var code = pre.querySelector("code")
                        ? pre.querySelector("code").textContent
                        : pre.textContent;

                    if (navigator.clipboard && window.isSecureContext) {

                        navigator.clipboard.writeText(code).then(function () {
                            showCopied(btn);
                        });

                    } else {

                        var ta = document.createElement("textarea");
                        ta.value = code;
                        ta.style.position = "fixed";
                        ta.style.opacity = "0";

                        document.body.appendChild(ta);

                        ta.focus();
                        ta.select();

                        try {
                            document.execCommand("copy");
                            showCopied(btn);
                        } catch(e) {}

                        document.body.removeChild(ta);
                    }
                });
            });

            function showCopied(btn) {

                btn.textContent = "Copied!";
                btn.classList.add("copied");

                setTimeout(function () {
                    btn.textContent = "Copy";
                    btn.classList.remove("copied");
                }, 2000);
            }
        });
        </script>
        <?php
    });
}

add_action('init', 'add_copy_button_script');

Step 2: Save the Changes

After adding the code:

1. Save the functions.php file
2. Clear your website cache if you use any caching plugin
3. Refresh your website

Now every <pre> code block on your website will automatically show a “Copy” button when users hover over it.

Features of This Copy Button

This solution includes:

• Lightweight performance
• No plugin required
• Hover-based copy button
• Clipboard API support
• Fallback support for older browsers
• Automatic “Copied!” success message
• Clean modern design

Will It Work on All WordPress Themes?

Yes, this code works on most WordPress themes including:

• Hello Elementor
• Astra
• GeneratePress
• OceanWP
• Kadence

However, your theme must properly support the wp_footer() function.

Final Thoughts

A small feature like a copy button can make your website look far more professional and improve the overall experience for your visitors. If you regularly share code snippets, tutorials, or technical content, this is definitely worth adding to your WordPress website.

You can also customize the button style, colors, and position based on your website design.