Easily Copy Code with “Code Copier” – A WordPress Plugin Tutorial

So I’ve been doing some tutorials, mixing my own developer experience with help from ChatGPT. So far so good, except I noticed that the code blocks that wordpress creates do not let the user to easily copy the code for their own use. So… yes, I asked GPT again to help me create a wordpress plugin that would allow for this “copy code” functionality.

I did have to correct/add some code, as it suggested very simple and frankly ugly solutions. For example an alert() message when the user copies the code.

Oh, and yes, I have followed it and created the plugin in this very site, so let me know if it works.

Anyway, here it is, enjoy….

Creating a WordPress plugin that adds the functionality for users to easily copy code blocks from a page or post is a great way to enhance the user experience on your website. Here is a tutorial on how to create such a plugin:

Steps to create the plugin:

1. First, create a new folder in the wp-content/plugins directory of your WordPress installation. Name the folder “code-copier”.
2. Inside the “code-copier” folder, create a new file named “code-copier.php”. This will be the main plugin file.
3. In the “code-copier.php” file, add the following code to the top of the file:

<?php
/*
Plugin Name: Code Copier
Description: A WordPress plugin that adds the ability for users to easily copy code blocks from pages or posts with just one click.
Author: Your Name
Version: 1.0
*/

This code is the plugin header and is required by WordPress to recognize the plugin. Replace “Your Name” with your name or your website name.

4. Next, we will use JavaScript to add a “Copy” button next to each code block and handle the copying functionality. Add the following code to the “code-copier.php” file:

function add_code_copier() {
    echo '<script>
        document.querySelectorAll("pre code").forEach(function(block) {
            var button = document.createElement("button");
            button.innerHTML = "Copy";
            button.classList.add("code-copier-button");
            button.addEventListener("click", function() {
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(block.innerText).then(function() {
                        var tooltip = document.createElement("div");
                        tooltip.innerHTML = "Code copied!";
                        tooltip.classList.add("code-copier-tooltip");
                        block.parentNode.appendChild(tooltip);
                        setTimeout(function() {
                            tooltip.remove();
                        }, 2000);
                    }, function(err) {
                        console.error("Failed to copy code: ", err);
                    });
                } else {
                    var textArea = document.createElement("textarea");
                    textArea.value = block.innerText;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand("copy");
                    textArea.remove();
                    var tooltip = document.createElement("div");
                    tooltip.innerHTML = "Code copied!";
                    tooltip.classList.add("code-copier-tooltip");
                    block.parentNode.appendChild(tooltip);
                    setTimeout(function() {
                        tooltip.remove();
                    }, 2000);
                }
            });
            block.parentNode.insertBefore(button, block);
        });
    </script>';
}
add_action( 'wp_footer', 'add_code_copier' );

This code uses JavaScript to find all “pre code” blocks on the page and add a “Copy” button next to each one. When the button is clicked, it uses the browser’s clipboard API to copy the code to the user’s clipboard.

This code creates a new element div with the message “Code copied!” and a class “code-copier-tooltip” and append it to the parent of the code block, and then it removes the tooltip element after 2 seconds.

5. Finally, to add some styling to the “Copy” button, add the following code to the “code-copier.php” file:

function add_code_copier() {
    echo '<script>
        document.querySelectorAll("pre code").forEach(function(block) {
            var button = document.createElement("button");
            button.innerHTML = "Copy";
            button.classList.add("code-copier-button");
            button.addEventListener("click", function() {
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(block.innerText);
                } else {
                    var textArea = document.createElement("textarea");
                    textArea.value = block.innerText;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand("copy");
                    textArea.remove();
                }
            }, {passive: true});
            block.parentNode.insertBefore(button, block);
        });
    var tooltip = document.createElement("div");
    tooltip.innerHTML = "Code copied!";
    tooltip.classList.add("code-copier-tooltip");
    block.parentNode.appendChild(tooltip);
    setTimeout(function() {
        tooltip.remove();
    }, 2000);
    </script>';
}
add_action( 'wp_footer', 'add_code_copier' );

This code adds a CSS class to the “Copy” button, which can be used to style the button as desired. In this example, the button has a green background color and white text.

This way the tooltip will be displayed at the bottom-right of the code block with a green background color and white text and rounded border.

Please note that the position and style of the tooltip can be adjusted as needed.

6. Once you have finished adding the code to the plugin file, you can activate the plugin from the WordPress plugin management page.
7. To test the plugin, create a new post or page with a code block and make sure the “Copy” button appears next to the code block and that the code can be copied to the clipboard when the button is clicked.

And that’s it! Your “Code Copier” plugin is now ready to use. You can further customize the plugin by editing the CSS and JavaScript as needed.

Note:

• You might also want to add some error handling or fallback options for cases where the browser does not support the clipboard API
• It is recommended to add some security measures like nonces or user capability checks when working with clipboard API.