In this article, I will share my solution for displaying shortcodes, HTML code snippets and other text in a way that makes it easy for your users to copy to clipboard. It works by displaying the text to be copied alongside a copy to clipboard button. You can do it by adding an easy-to-use copy to clipboard WordPress plugin.
The demo sites contain lots of examples of different types of tables you can create with the plugin. Underneath, we provide the exact shortcode used to create the table so that people can copy it for their own site.
Unfortunately, shortcodes and other types of HTML and text snippets aren't pretty if you add them directly to the page. I wanted to present them in a more attractive and user-friendly format.
What are the challenges to providing code or text snippets in WordPress?
- When you publish code snippets on a website for people to copy, there's a risk that some unwanted formatting from your page will be copied over too. For example, if you surround HTML code with
<code>tags to stop your website from processing it, then these can accidentally be copied to your users' sites. This causes problems as it stops the code from working for them too! We've had lots of support requests due to this.
Solution: Provide snippets in a format that can be copied in plain text.
- Shortcodes and other code snippets can be quite long. You don't want them to take up too much space on the page.
Solution: Put the snippet in a small box with a 'Copy to clipboard' button.
- Users can make mistakes when they copy long snippets from your site. For example, they might accidentally forget to copy the closing square brackets from a shortcode. If this happens, then the snippet won't work for them.
Solution: Provide a 'Copy to clipboard' button that automatically copies the entire snippet.
- If you add shortcodes or code directly to a page, then it looks like your website is broken! This isn't very professional.
Solution: Add the code snippets to a small box that looks like it's supposed to be there.
- When you add shortcodes or code to your website for people to see, your website thinks it should render this code. It's not obvious how to display it in a way that won't be processed.
Solution: Add the code in a format that can't be processed.
So, now we need a solution that fixes all these problems! I've achieved this by installing a simple WordPress copy to clipboard plugin. I'll tell you about it now.
How to add a 'Copy to clipboard' button in WordPress
When I started searching for copy to clipboard WordPress plugins, I was surprised at there are no major plugins offering this feature.
I found a free WordPress plugin called Clipboard and tested it on a staging site before installing it on any live sites.
The plugin is actually very good. The settings page provides 2 examples of the copy to clipboard buttons in action. One displays the text to be copied in a small box with a copy to clipboard button alongside or underneath. The other displays a bigger block of text with the same button.
The styling of the button is inherited from your theme. This is great because it means that the copy to clipboard button matches the other buttons on your WordPress site perfectly.
Each button has its own class, so you can label each one individually in order to use multiple 'copy to clipboard' snippets on the same page.
Example code for 2 copy to clipboard snippets
Here's an example of the text for a page with 2 copy to clipboard buttons, with a heading in between. You should add this to the Text tab in WordPress.
Note that the first button says 'copy1' in 2 places, and the second says 'copy2'. You need to label each one separately in order to add multiple copy to clipboard buttons to a single page.
Copy this shortcode to use it on your own site: <input id="copy1" type="text" value="I want to be able to copy this text"/> <button class="btn" data-clipboard-target="#copy1">Copy to clipboard</button> Copy this shortcode to use it on your own site: <input id="copy2" type="text" value="This is another text snippet to be copied"/> <button class="btn" data-clipboard-target="#copy2">Copy to clipboard</button>
Problem - You can't include quotation marks in the text to be copied
While adding the copy to clipboard plugin to our demo sites, I soon discovered a problem. You can't include "double quotation marks" in the text to be copied to the clipboard. If you don't want to do this, then that's great. Read on if you do need to use double quotation marks.
Our plugin shortcodes include double quotation marks around the different shortcode parameters. The code for the copy to clipboard plugin also uses quotation marks, which was causing a conflict.
For example, I wanted to add:
<input id="copy1" type="text" value="[product_table "columns=name,price,add-to-cart""/> <button class="btn" data-clipboard-target="#copy1">Copy to clipboard</button>
This doesn't work, as the two uses of quotation marks can't be used together.
I fixed the problem by adding the outer quotation marks (shown in blue above) as single inverted commas instead, e.g.:
<input id="copy1" type="text" value="[product_table "columns=name,price,buy""/> <button class="btn" data-clipboard-target="#copy1">Copy to clipboard</button>
That fixed the problem when I stayed in Text view. However, when I switched back to the Visual tab, WordPress switched the inverted commas back into double quotation marks and removed the ones from my product table shortcode. This is a common problem in WordPress, as the TinyMCE editor (used in Visual tab) likes to clean up your code when you switch from Text to Visual view - often with unwanted results.
How to fix the problem
You can fix the problem by adding the Pro version of the Raw HTML plugin. It only cost $15, so I didn't mind shelling out for it.
This plugin lets you surround the affected code with a
[raw] shortcode to prevent WordPress from changing the HTML code when you switch from Text to Visual tab.
For example, this shortcode fixes the problem so that you can use double quotation marks in your text to be copied.
[raw]<input id="copy1" type="text" value='I want to "use double quotation marks"'/>[/raw] <button class="btn" data-clipboard-target="#copy1">Copy to clipboard</button>
Here's a screenshot of the complete solution in action:
This is what it looks like in the front end: