Table of Content
In my free time, I try to write all the possible things which I have learned from my past experience. As a developer, I write technical articles on my blog and share code snippets as per required.
I notice that when someone read the article and try to follow the steps they copy the code snippet manually.
So, I thought why not build the copy to clipboard WordPress plugin?
And after a week, I have to build a WordPress plugin “Copy Anything to Clipboard“. It simply adds the copy button which copies the content from the provided selector.
Let’s see how it works with below example:
Here we see the HTML
<h2>Hello World</h2>. And the button Copy to Clipboard at the top right corner. It simply copies the code into the clipboard.
How does it work? How does it work?
After install and activate plugin by default it check the
<pre> tag inside the page content.
If we visit to any page which contain the
<pre> tag then you can see the copy button for that pre tag.
Eg. I have created a page with sample pre tag as:
Now, When we visit to this page then we see:
Here, We see the Copy button inside our pre tag. On click on it the content
<h1>Heading Goes Here</h1> into the clipboard.
How it target to <pre> tag after plugin install? How it target to <pre> tag after plugin install?
By default, After plugin install and activate you can see the default copy to code type is added as:
And if you click on it then you can see:
Here, You can see:
- button-copy-text: Copied!
- button-position: inside
- button-text: Copy
- button-title: Copy to Clipboard
- selector: pre
- style: button
For now just forget above things.
Lets see another example to understand how to use it.
Create New Create New
Before proceed suppose we have a list in which we want to add a copy button like:
Here, We can see the simple list is added with additional CSS class todo-list
Now, We want to add the copy button for our todo list with the help of CSS class
So, I’m going to Settings > Copy to Clpboard > Add new and you can see:
Here, By default the selector is set as pre. So, Change it with our CSS class as
Note: Our CSS class is todo-list but we have added an additional dot at the start of the CSS class as
.todo-list. Because in CSS the class selector identified with dot prefix.
See below image to understand about CSS selctors:
We have 3 selectors:
- Element selectors – If you want to add the copy button the the HTML tag like p, a, h1, h2 etc then you need to use selectors same as tag name like p, a, h1, h2 etc.
- Class selectors – If you want to target the HTML element which have specific class then you need to add a DOT as prefix for that class in the selector field as .site-title, .page-title, etc.
- ID selectors – And, Finally if you have a ID then you need to add a HASH as a prefix for the ID. E.g. #main, #primary, etc.
Now, We need to add a copy button to our selector .todo-list so lets see how to add it with below video:
In above video we can see that there are 3 styles to add the button:
- Button style
- Icon style
- Hover style
We can also configure the:
- Button text
- Button title
- Button copied text – It appear after click on the button
In video you can see how we have configure our copy to clipboard button.
After create new button we can see it in our list page as:
Finally, We can see the copy button for our todo list as:
After some user requests, I have added a support for the copy shortcode.
We can do everything with this shortcode. Lets see few examples:
Default Usage Default Usage
If we use shortcode as:
On frontend we see the Copy text and on click on it the text 100OFF copied to the clipboard.
Obviously we don’t display the text Copy which don’t make any sense. So, We can configure shortcode as below:
We can use the shortcode as:
But, We can use the content as well like:
But, If you use both like:
Then only content value will copy to clipboard.
By default the text Copy visible on front end. If you want to display another text then you can use the text parameter to display different text.
[copy text="Copy Coupon"]100OFF[/copy]
We can see the Copy Coupon text and on click on it the 100OFF value copied to the clipboard.
To change the copied text value:
[copy copied-text="Coupon Code Copied"]100OFF[/copy]
- Do you have any issues while using the plugin?
- Do you have any improvements to the plugin?
- Do you have any featured requests for the plugin?
- Having any trouble?
Simply, Contact me from https://maheshwaghmare.com/say-hello/. Also, Provide all the possible details to understand the issue, featured request by sharing screenshots and reference URLs.
Again, Don’t hesitate to email me on email@example.com to report any small or minor issues or features. Every support request is important to improve the plugin quality.