How to add copy to clipboard button in WordPress

Written by admin

On March 3, 2020

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.

You May Also Like…

How to Update wordpress php  version

How to Update wordpress php version

If you are looking to update WordPress PHP version then you come on the right place in this talk we will discuss why we need to Update PHP version of your website if you are not running the latest version of PHP may increase your site load time and the research shows...

How to add Divi inline buttons (Side By Side Button)

How to add Divi inline buttons (Side By Side Button)

Creating a beautiful website is not enough for your business. You must increase your website authority for better ranking. Google has provided a complete list of how you can increase your website authority. One of the most important points is interlinking. Buttons are...

How to create beautiful Carousel in wordpress

How to create beautiful Carousel in wordpress

Do you want your website more engaging and visually appealing for your website visitors? If your website is appealing that you offer on your website may lose your lot of business so the question is how we can make our website more attractive and visually appealing. I...

0 Comments

Submit a Comment

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