Copy Text to Clipboard

Hello,

Is there a way to tag a shortcode to copy text to the clipboard in a post? Or what options do I have to allow a user to copy text to their clipboard using X Theme?

Thanks!

Hey There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks for the reply, but for example…

I put some text say “SomeText” and when you click it, it stores “SomeText” in your clipboard so when you hit Paste in notepad or any other text field, the user’s machine will know to insert “SomeText”.

Go here:

Scroll down to the “Playground” and click the “Copy” button… it will store whatever text that is in the text box into your clipboard.

Thanks!

Hi There,

Thank you for writing in! While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Lets follow the method provided here, as it is more practical and simple. The Guy there uses the clipboard.js package. So we need to enqueue/load that to your site, to do this you need a child theme because you need to add the following code to your child theme’s functions.php file:

/*Load clipboard.js */
function copytocb_scripts() {
wp_register_script('copytocb_script', 'https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js', array('jquery'),'1.5.12', true);
wp_enqueue_script('copytocb_script');
}
 
add_action( 'wp_enqueue_scripts', 'copytocb_scripts' );

Then add this on the page JS

jQuery(function($){
  new Clipboard('.copy-text');
});

Then add a button on a RAW content element as the trigger

<button href="#" class="x-btn copy-text" data-clipboard-target="#content">Copy to Clipboard</button>

Then add an ID content (https://prnt.sc/gskray) to the text element that you want to be copied when the button is press.

Because this is a 3rd party script, regretfully we can not provide further support from here. I hope this helps.

Cheers!

1 Like

Wow, I was only trying to figure out if X Theme natively supported a feature like this - you have gone above and beyond your call of duty! Thanks for the great detailed reply :smile:

Yes I have a child theme and I’m starting to get the hang of doing modifications like this, so I should be able to figure it out with what you have posted for me.

Thanks again!

Got it working! Thanks again :smile:

Glad to hear that. Have a nice day! :slight_smile:

Can this be done without a child theme?

Hey There,

Thanks for updating this thread. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, you can then add the following code in your child theme’s functions.php file

/*Load clipboard.js */
function copytocb_scripts() {
wp_register_script('copytocb_script', 'https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js', array('jquery'),'1.5.12', true);
wp_enqueue_script('copytocb_script');
}
 
add_action( 'wp_enqueue_scripts', 'copytocb_scripts' );

After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Hope this helps.