WordPress – Add Code Block ‘Copy’ button

Before:

After:

Step 1 – Install ‘Code Snippets’ plug-in

Step 2 – Create new JavaScript snippet with following:

document.addEventListener('DOMContentLoaded', function() {
    // Select all code blocks (adjust selector as needed)
    const codeBlocks = document.querySelectorAll('pre code'); 

    codeBlocks.forEach(codeBlock => {
        const button = document.createElement('button');
        button.innerText = 'Copy';
        button.classList.add('copy-button'); // Add a class for styling

        // Insert the button before the code block
        codeBlock.parentNode.insertBefore(button, codeBlock);

        button.addEventListener('click', () => {
            const textToCopy = codeBlock.innerText;
            navigator.clipboard.writeText(textToCopy)
                .then(() => {
                    button.innerText = 'Copied!';
                    setTimeout(() => {
                        button.innerText = 'Copy';
                    }, 2000); // Reset button text after 2 seconds
                })
                .catch(err => {
                    console.error('Failed to copy text: ', err);
                });
        });
    });
});

Step 3 – Add following CSS to Theme:

img.custom-logo {
    max-width: 150px;
}
.bs-social li i{
    background: #0E6BB7;
}
/* Style the code block container */
pre {
  position: relative; /* All absolutely positioned children will be relative to this element */
  padding-top: 3em; /* Creates space for the button at the top */
}

/* Position and style the copy button */
.copy-button {
  position: absolute; /* Positions the button relative to the code block */
  top: 5px; /* Adjust vertical position */
  right: 5px; /* Adjust horizontal position */
  padding: 5px 10px; /* Changes the size of the button */
  font-size: 14px; /* Adjusts the text size */
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  cursor: pointer;
}

Updated custom CSS to match ‘BlogArise’ theme:

/* Position the button at the top right of the code block */
pre {
  position: relative; /* All absolutely positioned children will be relative to this element */
  padding-top: 3em; /* Creates space for the button at the top */
}

.copy-button {
  /* Positioning */
  position: absolute;
  top: 5px;
  right: 5px;
  
  /* Integrate with BlogArise tag styles */
  font-family: var(--headFont);
  font-weight: 800;
  color: var(--head-color, #000); /* Use theme variable or default to black */
  background-color: var(--bg-color, #f1f1f1); /* Use theme variable or a light default */
  border: var(--bxbr, 3px solid #000); /* Use theme variable or default border */
  border-radius: var(--bxbra, 15px); /* Use theme variable or default radius */
  padding: 5px 10px;
  cursor: pointer;
  
  /* Additional styling */
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  transition: all 0.4s ease-in-out 0s;
}

.copy-button:hover {
  box-shadow: 0 4px 20px -5px rgba(0,0,0,0.5); /* Use a standard hover effect */
}