Adding a “Copy Code” button with a floating “Copied!” notification is a great way to improve user experience in technical posts on your WordPress site — especially if you publish tutorials, code snippets, and developer guides. The best part? You can achieve this without using any plugins, just HTML, CSS, and JavaScript.
This tutorial shows how to add a lightweight and professional code box with a copy button and visual feedback — perfectly suited for themes like GeneratePress (free or premium) or any theme that supports custom HTML and CSS.
🧰 What We’re Building
By the end of this tutorial, you’ll have:
✔ A styled code block
✔ A Copy button in the top-right corner
✔ A “Copied!” tooltip notification that appears after copying
✔ Zero plugins — just custom code instead
🧩 Step 1 — Add Custom CSS
Go to Appearance → Customize → Additional CSS and add:
.code-box {
position: relative;
background: #1e1e1e;
color: #fff;
padding: 1em;
border-radius: 10px;
font-family: monospace;
overflow: auto;
margin-bottom: 20px;
}
.copy-code-btn {
position: absolute;
top: 10px;
right: 10px;
background: #4CAF50;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 0.9em;
}
.copy-code-btn:hover {
background: #45a049;
}
.inline-toast {
position: absolute;
top: 10px;
right: 100px;
background-color: rgba(51, 51, 51, 0.9);
color: #fff;
padding: 5px 10px;
border-radius: 6px;
font-size: 0.8em;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(-5px);
z-index: 10;
}
.inline-toast.show {
opacity: 1;
transform: translateY(0);
}This styles the code container, the copy button, and the toast notification that appears when the user successfully copies code.
🧠 Step 2 — Add JavaScript
Add the following script before the closing </body> tag of your theme’s footer.php, or using a Custom HTML block in the footer:
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.copy-code-btn').forEach(button => {
const toast = document.createElement('div');
toast.className = 'inline-toast';
toast.innerText = 'Copied!';
button.parentElement.appendChild(toast);
button.addEventListener('click', function() {
const codeBlock = this.parentElement.querySelector('pre code');
const textToCopy = codeBlock.innerText;
navigator.clipboard.writeText(textToCopy).then(() => {
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 2000);
}).catch(err => {
console.error('Error copying code: ', err);
});
});
});
});
</script>This script finds all buttons with the .copy-code-btn class, attaches a click handler to copy the associated code, and displays the notification.
🧩 Step 3 — How to Use in Your Posts
In the WordPress editor (Gutenberg), add a Custom HTML block and paste this template:
<div class="code-box">
<button class="copy-code-btn">Copy</button>
<pre><code>
# Example code
echo "Hello World!";
</code></pre>
</div>Replace the content inside <pre><code> with your actual code snippet.
✔ Final Result
Once added to your post:
- A Copy button will appear in the top-right corner of your code block.
- Clicking it will copy your code to the clipboard.
- A small “Copied!” notification will appear to confirm the action for 2 seconds.
- You can use this pattern for multiple code blocks anywhere in the post.
❓ FAQ — Frequently Asked Questions
Do I need plugins for this?
No — this solution uses plain HTML, CSS, and JavaScript, no plugins required.
Will this work on any theme?
Yes — as long as your theme lets you add custom CSS and edit the footer or insert custom HTML. It works especially well with themes like GeneratePress.
Can I reuse this structure in multiple posts?
Yes! Create a Reusable Block in Gutenberg with this HTML structure and just swap the code inside <code> for future posts.
Using essential tools for Linux and homelab?
Explore more Tools & Utilities tutorials →
