Adding a “Copy code” button to a Code block in WordPress improves usability and convenience by allowing users to easily copy displayed code with one click. There are two methods to add this feature: using custom script or creating a custom plugin. The custom script involves editing the header.php file or using a plugin to insert code. The custom plugin method involves creating a folder, PHP file, and script file to add the button. Once the plugin is uploaded and activated, users can see the “Copy code” button on the code block, making it easier to copy and use code snippets on WordPress websites.
Adding a "Copy code" button to a Code block in WordPress improves usability and convenience. This button allows users to easily copy the displayed code with just one click, eliminating the need for manual selection and copying.
This is especially advantageous for those who want to perform operations quickly or are simply uncomfortable with manually copying code, or for those who are accessing on a mobile device.
By incorporating this feature into your website, you will give users convenience when they want to get the code. This not only improves efficiency but also reduces the possibility of errors when copying code.
In this article, I will guide you through two methods to add the "copy code" button to the code block in WordPress in the simplest and fastest way.
Method 1: Use custom script
This method is quite simple if you go to the file header.php of your theme by going to the Appearance > Theme file editor (Theme File Editor) from your WordPress dashboard.
On the Edit Theme page, find and select header.php from the list. Then insert the provided code just before the closing tag.
Note: However, if you apply this method and the theme has a new update, you must repeat the above steps. To avoid this, you can install a Plugin like Insert Headers And Footers and paste the code into the Header or Footer section.
Method 2: Create a Custom Plugin
This is also a useful way so you don’t need to worry when the theme is updated to a new version or you don’t have access to the theme’s files. This way, you will create your own Plugin for your own features without depending on other people’s Plugins.
Step 1: Create Plugin folder
First, create a Plugin folder with a name suggestive of its features like copy-code-button.
Step 2: Create the main Plugin file
Create the PHP file with the same name as the Plugin folder (copy-code-button.php) and paste the provided code inside.
Step 3: Create a script for the button
Create a folder named assets and create a file copycode.js in this folder. Paste the provided code into the file.
Step 4: Create files and install
Compress the Plugin folder into copy-code-button.zip and upload it to your WordPress site using the Upload Plugin feature in the Plugins menu.
Update new custom code
A provided code will add Copy code and Open code in a new window buttons to the code block. You can follow the given methods to add this new feature.
Once done, you will have professional copy buttons on your website. Code blocks are essential in WordPress for sharing code snippets effectively. Adding the "Copy code" button makes your website more friendly and accessible.
Integrate this feature to enhance your WordPress website usability and efficiency. Good luck on your coding journey!
