How to add copy to clipboard button in WordPress

Do you want to add a copy text to clipboard button in your WordPress posts or pages? Copy text to clipboard is not a tough job, there is no need to do lots of configuration and not require to load KBs data to do this job. If you are working on wordpress there are a lot of plugins in the WordPress repository to fulfill your desires.

There are the following two ways to do this task:

  1. By using plugin
  2. By using javascript

Copy text to the clipboard in WordPress using plugin

I am going to explain to you how you can add a button to copy particular text or code snippets by using WordPress plugin. Copy text to clipboard is a simple WordPress plugin, you can download copy text to the clipboard plugin here. Clicking the button will copy the text or code snippet and then paste them anywhere you want. Install and activate the plugin, on the post or page editor wrap your text or code snippet within the <pre> tag.

Copy text to clipboard in WordPress using javascript

Now it is time to discuss to add the copy text to the clipboard button by using javascript library, goclipboardjs.com download the .zip file. You have to load‘clipboard.js’ or ‘clipboard.min.js’ in your themes file. I will suggest you create a ‘js’ directory for your theme’s javascript file if your theme is not already included.

Add code to your theme

Add the following code in the ‘function.php’ file, I suggest you add this code  in the child theme’s ‘function.php’ and file name that you have loaded in the ‘js’ directory and in the code to be the same.

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'load_responsive_javascript' );
function load_responsive_javascript() {
    wp_enqueue_script( 'clipboard', get_stylesheet_directory_uri() . '/js/clipboard.js', array( 'jquery' ), '1.0.0' );
	
}

Using Code in post or page

On the post or page, you need to include the copy text clipboard, paste following code in the post or page text editor make sure it’s text editor if you place this in the visual mode, maybe its consider it as the text, so go in the text mode add this code here.

Clipboardjs have multiple options for the HTML structure to explore the source file and see what you can do it with this configuration.

To complete this process you have to add the following script into your post or page. WordPress offers multiple ways to add script in your posts or pages.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *