How to Add a Copy Button to WordPress Default Code Block Without a Plugin

This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. Thank you for your support!

Here’s the step-by-step guide:

Step 1: Add CSS (to make the button look nice)

Paste this into the same Appearance > Customize > Additional CSS section where you added the font size code.

/* कोड ब्लॉक को बटन के लिए तैयार करना */
.wp-block-code {
    position: relative; /* यह बटन को बॉक्स के अंदर रखने के लिए ज़रूरी है */
    padding-top: 35px !important; /* ऊपर थोड़ी जगह ताकि बटन कोड के ऊपर न आए */
}

/* कॉपी बटन का डिज़ाइन */
.copy-code-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #444; /* बटन का रंग */
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.8;
}

.copy-code-button:hover {
    background-color: #000;
    opacity: 1;
}

/* बटन क्लिक होने के बाद का लुक */
.copy-code-button.copied {
    background-color: #28a745; /* हरा रंग */
}

Step 2: Add the JavaScript (for the copy function)

Now you need to add this code to the footer of your website.

Where to put it? The easiest way is to paste it into your theme’s footer.php file, just before the tag </body>.

Alternatively, if you’re using a plugin like “Insert Headers and Footers,” you can add it to the ‘Footer’ section of that plugin.

<script>
document.querySelectorAll('.wp-block-code').forEach((codeBlock) => {
    // बटन बनाना
    const button = document.createElement('button');
    button.className = 'copy-code-button';
    button.type = 'button';
    button.innerText = 'Copy';

    // कोड ब्लॉक में बटन जोड़ना
    codeBlock.appendChild(button);

    button.addEventListener('click', () => {
        const code = codeBlock.querySelector('code').innerText;
        
        // क्लिपबोर्ड में कॉपी करना
        navigator.clipboard.writeText(code).then(() => {
            button.innerText = 'Copied!';
            button.classList.add('copied');

            // 2 सेकंड बाद वापस 'Copy' कर देना
            setTimeout(() => {
                button.innerText = 'Copy';
                button.classList.remove('copied');
            }, 2000);
        });
    });
});
</script>

Clean functional code

You can replace the Hindi comments if you’d like, but here is the clean functional code.

CSS (Clean Code)

.wp-block-code {
    position: relative;
    padding-top: 35px !important;
}

.copy-code-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #444;
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.8;
}

.copy-code-button:hover {
    background-color: #000;
    opacity: 1;
}

.copy-code-button.copied {
    background-color: #28a745;
}

JavaScript (Clean Code)

<script>
document.querySelectorAll('.wp-block-code').forEach((codeBlock) => {
    const button = document.createElement('button');
    button.className = 'copy-code-button';
    button.type = 'button';
    button.innerText = 'Copy';

    codeBlock.appendChild(button);

    button.addEventListener('click', () => {
        const codeElement = codeBlock.querySelector('code');
        const codeText = codeElement.innerText;
        
        navigator.clipboard.writeText(codeText).then(() => {
            button.innerText = 'Copied!';
            button.classList.add('copied');

            setTimeout(() => {
                button.innerText = 'Copy';
                button.classList.remove('copied');
            }, 2000);
        });
    });
});
</script>

How will this work?

• Automatic: As soon as your page loads, this script will automatically detect all instances of the wp-block-code (WordPress code block) on the page.
• Injection: It will add a “Copy” button to the corner of each code block.
• Clean Copy: When a user clicks the button, only the text inside that specific block will be copied. It will not affect your site’s design or theme coding.
• Speed: This code only runs when a user clicks the button, so it will have 0% impact on your site’s loading time.

Using WPCode Lite for a Safer Implementation

If you’re not comfortable directly editing your theme files (such as footer.php) or you want your “Copy” button code to remain intact even after future theme updates, the WPCode Lite plugin is the safest option.

This is a very lightweight plugin that allows you to add global headers and footers to your website without any technical risks.

With this plugin, you can simply go to its dashboard and paste the JavaScript code into the “Footer” section.

The biggest advantage is that you don’t have to tamper with your theme’s code, ensuring the design and security of your website remain completely safe.

It also keeps your code organized, allowing you to easily manage or remove it whenever needed.

How to set up WPCode Lite? (Quick Steps)

• You can also add these short steps for your readers’ convenience:
• Install and activate WPCode Lite.
• Go to ‘Code Snippets’ > ‘Header & Footer’ in your dashboard.
• Go to the ‘Footer’ box and paste the JavaScript code provided above.
• Click ‘Save Changes’. Your ‘Copy’ button will now be live!

Conclusion

In conclusion, using heavy plugins to display code snippets on your WordPress website isn’t always necessary.

As we’ve seen, using WordPress’s default ‘Code Block’ not only maintains your site’s loading speed but is also the safest approach for SEO.

With a little CSS and JavaScript, you can provide your users with a professional “one-click copy” experience without any extra overhead.

Whether you insert the code directly into your theme or use a secure plugin like WPCode Lite, this method improves both your website’s design and performance.

Try this technique and make your website even more user-friendly. If you encounter any problems during setup, feel free to ask in the comments below!