Get the Code
Adding the Code to Your Theme
Add the following to your functions.php file of your theme. If are using the Genesis Framework, make sure this goes in a child theme function.php file. Note the clipboard.js file name. Make sure to change this to reflect the correct name of the file you have loaded to your theme’s js directory.
|//* Enqueue Scripts|
|wp_enqueue_script( 'clipboard', get_stylesheet_directory_uri() . '/js/clipboard.js', array( 'jquery' ), '1.0.0' );|
On the page or post you want to include the copy to clipboard, you will need to use the following HTML structure. You will need to add this in the text editor of the post or page. If you copy/paste into the visual editor, it will be considered text and not HTML. So click the Text tab in the upper right corner of the editor.
|<p>Your Text to be copied</p>|
|<button class="btn" data-clipborad-action="copy" data-clipboard-target="#clipboard">Copy to Clipboard</button>|
Clipboard.js has several variations available for your HTML structure. Look at the source files in the directory ‘demo’ for some examples of what you can do with this setup.
|var clipboard = new Clipboard('.btn');|
I hope you find this helpful. It solved a problem I had for a client and made for a better user experience for their customers.Just added copy to clipboard to my @WordPress website using clipboard.js Click To Tweet
If you have any questions or feedback, please post in the comments below.