Copy Anything to Clipboard

Advertisement

Table of Content

Introduction Introduction

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:

<h2>Hello World</h2>

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.

Top ↑

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:

Simple Page

Now, When we visit to this page then we see:

Page Preview

Here, We see the Copy button inside our pre tag. On click on it the content <h1>Heading Goes Here</h1> into the clipboard.

Top ↑

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.

Top ↑

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 todo-list

So, I’m going to Settings > Copy to Clpboard > Add new and you can see:

Add new screen

Here, By default the selector is set as pre. So, Change it with our CSS class as .todo-list

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:

CSS Selectors

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.

Pretty simple!

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:

Top ↑

Shortcode Shortcode

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:

  1. content
  2. target
  3. text
  4. copied-text
  5. tag
  6. class
  7. copy-as

1. Content

We can use the shortcode as:

[copy]100OFF[/copy]

But, We can use the content as well like:


[copy content="100OFF"]

But, If you use both like:


[copy content="100OFF"]400off[/copy]

Then only content value will copy to clipboard.

2. text

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.

E.g.

[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.

3. copied-text

To change the copied text value:

[copy copied-text="Coupon Code Copied"]100OFF[/copy]

Top ↑

Support Support

  • 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 mwaghmare7@gmail.com to report any small or minor issues or features. Every support request is important to improve the plugin quality.

4 thoughts on “Copy Anything to Clipboard

  1. Would really like to use your plugin.. but my page has dynamic data that is populated AFTER the page loads using js. Is there a quick work-around or code change I could make to the plugin to get a copy button attached to the dynamic class that populates AFTER page is loaded?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: