Adding a handy “copy” button next to important bits of text (dates, codes, contact info, etc.) can significantly improve your readers’ experience.
In this post, you’ll learn how to drop a small snippet into your theme (or a tiny custom plugin) so you can use a [copy] shortcode anywhere—no heavyweight plugin required.
[copy text="Copy this...!"] →
Copy this…!
Why You’ll Love This Approach
- Lightweight: Just one PHP function with inline CSS & vanilla JS, so there’s zero extra HTTP requests.
- Reusable: Drop the shortcode into any post, page or widget.
- User‑friendly: Readers click once and the text is in their clipboard.
Installing the Snippet
Paste the snippet into your theme’s functions.php.
You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]
As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.
Show Code
/* Copy to Clipboard Shortcode for WordPress by WPCookie
* Register [copy text="…"]
* update: https://redpishi.com/wordpress-tutorials/copy-to-clipboard/
*/
add_shortcode( 'copy', 'wp_copy_shortcode' );
function wp_copy_shortcode( $atts ) {
static $assets_printed = false;
// grab & sanitize
$atts = shortcode_atts( array( 'text' => '' ), $atts, 'copy' );
$text = esc_html( $atts['text'] );
$out = '';
if ( ! $assets_printed ) {
$out .= <<<HTML
<style>
.copy-container {
display: inline-flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 8px;
background: #fff;
font-family: sans-serif;
position: relative;
}
.copy-text {
margin-right: 8px;
}
.copy-button {
position: relative;
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
}
.copy-button .icon-check {
display: none;
}
.copy-button.copied .icon-copy {
display: none;
}
.copy-button.copied .icon-check {
display: block;
}
.copy-button svg {
width: 16px;
height: 16px;
fill: #555;
transition: fill .2s;
}
.copy-button:hover .tooltip {
opacity: 1;
visibility: visible;
}
.tooltip {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: opacity .2s;
white-space: nowrap;
pointer-events: none;
}
button.copy-button:hover, button.copy-button:focus {
background-color: #e9e9e9;
}
button.copy-button {
transition: all 0.4s ease;
}
</style>
<script>
(function(){
document.addEventListener('click', function(e){
var btn = e.target.closest('.copy-button');
if (!btn) return;
var container = btn.closest('.copy-container');
var txt = container.querySelector('.copy-text').textContent;
navigator.clipboard.writeText(txt).then(function(){
btn.classList.add('copied');
btn.querySelector('.tooltip').textContent = 'Copied!';
setTimeout(function(){
btn.classList.remove('copied');
btn.querySelector('.tooltip').textContent = 'Click to copy';
}, 2000);
});
});
})();
</script>
HTML;
$assets_printed = true;
}
// unique wrapper
$uid = 'copy-' . uniqid();
// markup uses both icons
$out .= <<<HTML
<span id="{$uid}" class="copy-container">
<span class="copy-text">{$text}</span>
<button type="button" class="copy-button" aria-label="Copy">
<!-- clipboard icon -->
<svg class="icon-copy" viewBox="0 0 24 24">
<path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1Z"/>
<path d="M20 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H20C21.1 23 22 22.1 22 21V7C22 5.9 21.1 5 20 5ZM20 21H8V7H20V21Z"/>
</svg>
<!-- check‑mark icon -->
<svg class="icon-check" viewBox="0 0 24 24">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>
</svg>
<div class="tooltip">Click to copy</div>
</button>
</span>
HTML;
return $out;
}
Tip: Always back up your
functions.phpbefore editing!
Using the Shortcode in Your Content
Add a Shortcode block to the page and write the shortcode below in it:
[copy text="Your text to copy here"]This way, you can easily add copyable text to your pages.
To change the padding and margin of this block, first group it, then change the padding and margin of the group.
Inlining Inside a Paragraph Block
If you’re using the Gutenberg editor, you can embed the shortcode directly within a Paragraph block. For example:
“Our next workshop is scheduled on [copy text=”08 January 2025″], so don’t miss out! You can also email us at [copy text=”team@workshops.co“] for any queries.”
More examples:
- Event Reminder:
The webinar kicks off at [copy text=”20 December 2024″]—mark your calendar! - Contact Email:
Reach out to support at [copy text=”help@yourdomain.com“] anytime. - Phone Number:
For urgent inquiries, call [copy text=”+1 (555) 987‑6543″]. - Special Offer:
Enter [copy text=”SAVE20NOW”] at checkout for 20% off.
Because WordPress parses shortcodes in standard paragraph text, you don’t need any extra HTML or special “Shortcode” blocks—just type it inline.
Final Tips
- Multiple Uses: You can sprinkle
[copy]shortcodes throughout a single page, and the CSS/JS loads only once. - Styling Tweaks: Feel free to adjust the border, colors, or tooltip positioning by editing the inline
<style>in the snippet.
With this small, self‑contained solution, you empower your readers to grab key details in one click—no plugins, no bloat, just pure vanilla WordPress. Enjoy!
If this article is difficult for you to read in text, you can watch the video version below.
