How to Add Copy Code button in WordPress

Add the following HTML Snippet to enable Copy Code button in WordPress. Install and activate any code snippet Plugin such as Code Snippets or WP Code.

<script>
document.addEventListener('DOMContentLoaded', function() {
    var codeBlocks = document.querySelectorAll('.wp-block-code');
    codeBlocks.forEach(function(block) {
        var code = block.querySelector('code');
        var button = document.createElement('button');
        var buttonText = document.createTextNode('Copy Code');
        button.appendChild(buttonText);
        button.style.cssText = 'position: absolute; top: 0; right: 0; margin: 4px; padding: 4px 8px; font-size: 12px; background-color: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out;';

        button.addEventListener('mouseenter', function() {
            button.style.backgroundColor = '#222';
        });

        button.addEventListener('mouseleave', function() {
            button.style.backgroundColor = '#000';
        });

        button.addEventListener('click', function() {
            var range = document.createRange();
            range.selectNode(code);
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            button.innerText = 'Copied!';
            button.style.backgroundColor = '#333';
            button.style.color = '#fff';
            setTimeout(function() {
                button.innerText = 'Copy Code';
                button.style.backgroundColor = '#000';
                button.style.color = '#fff';
            }, 3000);
        });

        block.style.cssText = 'position: relative;';
        block.insertBefore(button, code);
    });
    var codeTexts = document.querySelectorAll('.wp-block-code pre');
    codeTexts.forEach(function(text) {
        text.style.color = '#fff';
    });
});
</script>

Then in your post insert ‘Code’ option and write your code.

How to change background color of Copy Code button.

Initial Background Color

Locate the following code first

button.style.cssText = ‘position: absolute; top: 0; right: 0; margin: 4px; padding: 4px 8px; font-size: 12px; background-color: rgba(200, 200, 200, 0.2); color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out;’;

Change background-color: rgba(200, 200, 200, 0.2); to background-color: #000; to set the initial background color to black.

Change the Hover Background Color

Change button.style.backgroundColor = 'rgba(0, 0, 0, 0.1)'; to button.style.backgroundColor = '#222'; for a slightly lighter black on hover. Change button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)'; to button.style.backgroundColor = '#000'; to revert back to black when the mouse leaves.

Change the Background Color After Click

Locate the following lines:

button.style.backgroundColor = ‘#333’;

After a click, this line changes the button color to a darker shade. No change needed unless you want a different color.

Update the Reset Background Color

Locate the following code

setTimeout(function() {
button.innerText = ‘Copy Code’;
button.style.backgroundColor = ‘rgba(200, 200, 200, 0.2)’;
button.style.color = ‘#fff’;
}, 3000);

Change button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)'; to button.style.backgroundColor = '#000'; to reset the background color to black.

Now save changes.