We are gathering inspirational Midjourney prompts, and we want to make it easier for readers to copy and use any prompts, regardless of whether readers are using a computer or a phone. We want to include a "copy" button next to each prompt. ChatGPT 4 helped us quickly create the code to add this feature, and it only took a few minutes.
To achieve this, we asked ChatGPT 4 to help us write a WordPress function that does the following:
Please write a wordpress function, so that:
1. Whenever a quote is detected, a "copy" button will appear in the bottom right corner of the quote.
2. When the user clicks the "copy" button, the quote will be copied to their clipboard, and the text on the button will change to "Done!" However, the button will return to its original "Copy" text, allowing the user to copy the prompt again if needed.
ChatGPT 4 immediately provided us with the perfect code that you can add to your WordPress theme's functions.php file (alternatively, you can use the "Code Snippets" plugin, which is a better solution). This function utilizes JavaScript to handle the copying functionality, and it also includes CSS to style the button.
function add_copy_button_to_quotes() {
?>
<style>
.quote-wrapper {
position: relative;
}
.copy-btn {
position: absolute;
bottom: 0;
right: 0;
background: #0073aa;
border: none;
border-radius: 4px;
color: #ffffff;
padding: 4px 8px;
cursor: pointer;
font-size: 12px;
transition: background 0.3s;
}
.copy-btn:hover {
background: #006799;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get all quote elements
const quotes = document.querySelectorAll('blockquote');
// Iterate over quotes and add a "copy" button to each
quotes.forEach(quote => {
const wrapper = document.createElement('div');
wrapper.classList.add('quote-wrapper');
quote.parentNode.insertBefore(wrapper, quote);
wrapper.appendChild(quote);
const copyBtn = document.createElement('button');
copyBtn.classList.add('copy-btn');
copyBtn.textContent = 'Copy';
wrapper.appendChild(copyBtn);
// Add click event listener for the "copy" button
copyBtn.addEventListener('click', () => {
const tempTextArea = document.createElement('textarea');
tempTextArea.value = quote.textContent;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
copyBtn.textContent = 'Done!';
// Reset the button text after 2 seconds
setTimeout(() => {
copyBtn.textContent = 'Copy';
}, 2000);
});
});
});
</script>
<?php
}
add_action('wp_footer', 'add_copy_button_to_quotes');This function searches the post for any <blockquote> elements, creates a container for each quote, and places a "Copy" button within the container. When the user clicks on the button, it will copy the text of the quote to their clipboard, and the button text will change to "Done!" for 2 seconds before changing back to "Copy".
Certain quotes may have a <cite> tag, which contains a citation and does not need to be copied. We asked ChatGPT to exclude any content within a <cite> tag.
function add_copy_button_to_quotes() {
?>
<style>
.quote-wrapper {
position: relative;
}
.copy-btn {
position: absolute;
bottom: 0;
right: 0;
background: #0073aa;
border: none;
border-radius: 4px;
color: #ffffff;
padding: 4px 8px;
cursor: pointer;
font-size: 12px;
transition: background 0.3s;
}
.copy-btn:hover {
background: #006799;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get all quote elements
const quotes = document.querySelectorAll('blockquote');
// Iterate over quotes and add a "copy" button to each
quotes.forEach(quote => {
const wrapper = document.createElement('div');
wrapper.classList.add('quote-wrapper');
quote.parentNode.insertBefore(wrapper, quote);
wrapper.appendChild(quote);
const copyBtn = document.createElement('button');
copyBtn.classList.add('copy-btn');
copyBtn.textContent = 'Copy';
wrapper.appendChild(copyBtn);
// Add click event listener for the "copy" button
copyBtn.addEventListener('click', () => {
// Create a clone of the quote to remove <cite> without affecting the original
const quoteClone = quote.cloneNode(true);
const cite = quoteClone.querySelector('cite');
if (cite) {
cite.remove();
}
const tempTextArea = document.createElement('textarea');
tempTextArea.value = quoteClone.textContent;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
copyBtn.textContent = 'Done!';
// Reset the button text after 2 seconds
setTimeout(() => {
copyBtn.textContent = 'Copy';
}, 2000);
});
});
});
</script>
<?php
}
add_action('wp_footer', 'add_copy_button_to_quotes');The new version of the function creates a clone of the quote before copying the text. If the quote includes a <cite> tag, it is removed from the clone. This ensures that only the relevant text is copied, and the original quote is not affected.
If you also want to add the "Copy" button to any <code> blocks, you can use the following code.
function add_copy_button_to_content() {
?>
<style>
.content-wrapper {
position: relative;
display: inline-block;
}
.copy-btn {
position: absolute;
bottom: 0;
right: 0;
background: #0073aa;
border: none;
border-radius: 4px;
color: #ffffff;
padding: 4px 8px;
cursor: pointer;
font-size: 12px;
transition: background 0.3s;
}
.copy-btn:hover {
background: #006799;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get all quote and code elements
const contentElements = document.querySelectorAll('blockquote, code');
// Iterate over content elements and add a "copy" button to each
contentElements.forEach(content => {
const wrapper = document.createElement('div');
wrapper.classList.add('content-wrapper');
content.parentNode.insertBefore(wrapper, content);
wrapper.appendChild(content);
const copyBtn = document.createElement('button');
copyBtn.classList.add('copy-btn');
copyBtn.textContent = 'Copy';
wrapper.appendChild(copyBtn);
// Add click event listener for the "copy" button
copyBtn.addEventListener('click', () => {
// Create a clone of the content to remove <cite> without affecting the original (only for blockquotes)
let contentClone = content;
if (content.tagName.toLowerCase() === 'blockquote') {
contentClone = content.cloneNode(true);
const cite = contentClone.querySelector('cite');
if (cite) {
cite.remove();
}
}
const tempTextArea = document.createElement('textarea');
tempTextArea.value = contentClone.textContent;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
copyBtn.textContent = 'Done!';
// Reset the button text after 2 seconds
setTimeout(() => {
copyBtn.textContent = 'Copy';
}, 2000);
});
});
});
</script>
<?php
}
add_action('wp_footer', 'add_copy_button_to_content');The updated function has a modified selector, which now includes both <blockquote> and <code> elements. However, the rest of the logic remains the same. To ensure that only <blockquote> tags have their <cite> tags removed, a new condition has been added to check the element's tag name.