Copy Anything to Clipboard

Advertisement

Simply copy the content into the clipboard.

INFO

This is the guide of version 2.0.0 which is releasing soon. For now you can see the older version guide.

Introducing the Copy Anything to Clipboard version 2.0.0

Introduction Introduction

I write articles if my free times to share all the possible things I learn from my experience. While writing articles on my blog I share some code snippets.

I notice that when someone follow the steps from the article then they copy the code from 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?

By default, the Copy to Clipboard button is added to the <pre> tag. So, After plugin installs and activates the plugin add the Copy to Clipboard button to all pre tags.

In plugin we have a setting page in which we can change the <pre> selector.

Top ↑

How to Installation? How to Installation?

Install the Copy Anything to Clipboard plugin either via the WordPress plugin directory or by uploading the files to your server at wp-content/plugins.

Top ↑

Styles Styles

The Copy to Anything provides the 3 styles. You can use multiple selector and multiple styles as per your requirement.

Let’s see all the available styles as below:

Button Style Button Style

The button is the default style. As per its name, it adds a copy button to the selector. The button style has two options to show the copy button.

Inside button position Inside button position

See below example in which you can see the copy button inside the selector.

<h3>Hello World</h3>

Note: The inside button position is the default style. You can change according your requirement.

Top ↑

Button outside the selector Button outside the selector

In below selector the copy button is added outside the selector.

<h3>Hello World</h3>

Top ↑

Cover Style Cover Style

The cover style is specially introduce to copy the small elements in which we are not able to add the copy button.

But, You can use it for any elements as you want. Do you want to copy :hello:? Then simply click on it to copy to clipboard.

Top ↑

Symbols Symbols

Hover and click on symbols to copy to clipboard.

⌚️ πŸ“± πŸ“² πŸ’» ⌨️

Top ↑

Emojis Emojis

Hover and click on Emoji to copy to clipboard.

β™” β™• β™– β™— β™˜ β™™ β™š β™› β™œ ♝

Top ↑

SVG Icon SVG Icon

See below example of inside button position.

<h3>Hello World</h3>

Below is the example of outside button position.

<h3>Hello World</h3>

Top ↑

What is the selector? What is the selector?

The selector is a technical term. Don’t get scared if you don’t have any technical knowledge. It is super easy. Just read carefully below the section.

If you notice that I have mention the default selector as <pre> tag but in settings page I have used pre as a selector.

Why?

Because we define the HTML tag with opening and closing angel <> brackets.

But when we want to use them as CSS or JavaScript selector then we don’t need to use angle <> brackets.

It is important part in the settings so, Let’s see some examples to understand selectors.

Top ↑

Compatibility Themes and Plugins Compatibility Themes and Plugins

The plugin Copy Anything to Clipboard is works with any theme and plugin. There is no specific requirement of any theme or any plugin.

Top ↑

Examples Examples

Top ↑

Example 1 – Using HTML tag as a selector Example 1 – Using HTML tag as a selector

Suppose we have below HTML on our website:

<pre>Hello World<pre>

here, We can use the pre (without the angle <> brackets) as a selector.

Top ↑

Example 2 – Using class as a selector Example 2 – Using class as a selector

Suppose we have below HTML code:

<h2 class="heading">Hello World</h2>

Here, We can use h2 (with angel <> brackets) an as selector. But, We can also use .heading as selector. Note that here we have added the . dot before the heading.

The dot (.) is used to set the class as a selector.

So, In above example it doesn’t matter, if we either use h2 or .heading as a selector.

Top ↑

Example 3 – Using ID as a selector Example 3 – Using ID as a selector

<h2 id="heading">Hello World</h2>

In above example we either use h2 or #heading as a selector.

Note the keyword # hash is used to set the HTML as selector.

Top ↑

Example 4 – Using nested selector Example 4 – Using nested selector

<div class="heading">
<h2>Hello World</h2>
</div>
<h2>Another Heading</h2>

In the above example, if we want to target the copy button to the <h2>Hello World</h2> then we need to use the nested selector like .heading h2.

because, if we use only h2 as a selector then the copy button is also added to the tag <h2>Another Heading</h2>.

To understand how it works lets see some examples.

Top ↑

Example 1: Copy Code Snippets Example 1: Copy Code Snippets

If you are a developer and you have share some code snippet like below:

Here, I have used <pre> tag to show the code <h3>Heading</h3>. Now, I want to add a copy button to my code snippets which are in the <pre> tag.

Go to Settings > Copy to Clipboard menu and set below settings:

  • Add text pre in to the Selector option.
  • Select the option text from the option Copy Content As
  • Click on Save Changes.

That’s it. After click on save you can see the Copy button to the <pre> tag as below:

Here, On click on Copy button the content is copy as <h3>Heading</h3>.

Top ↑

Example 2: Copy Block Quotes Example 2: Copy Block Quotes

If you are a developer and you have share some code snippet like below:

Here, I have used a quote block to show the quote. Now, I want to add a copy button to my quote which is in the wp-block-quote CSS class.

Go to Settings > Copy to Clipboard menu and set below settings:

  • Add text .wp-block-quote in to the Selector option.
    Note: Here, I have used .wp-block-quote instead of wp-block-quote. The Extra dot (.) is added because of we have used CSS class selector. If you want to use CSS ID selector then you can use # (hash) instead of dot (.)
  • Select the option text from the option Copy Content As
  • Click on Save Changes.

That’s it. After click on save you can see the Copy button to the quote as below:

Here, On click on Copy button the content is copy as I’ve missed more than 9,000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game-winning shot and missed. I’ve failed over and over and over again in my life and that is why I succeed.– Michael Jordan.

Here, The button overlap on the block quote. We have not control over the selector so, It is difficult to manage it from the plugin.

You can do some minor CSS changes to make it look awesome.

In above block quote example I have move the copy buttton a bit up to visible the quote with below CSS:

.copy-the-code-inside-wrap .copy-the-code-button {
     top: -35px !important;
}

After using above CSS the quote looks nice as below:

Top ↑

Frequently Asked Questions Frequently Asked Questions

Top ↑

Some Examples of Selectors? Some Examples of Selectors?

Lets check below some selectors which are valid to use:

  • pre – Copy button added all the pre tags.
  • .single pre – Copy button added only if its parent have CSS class .single.
  • #my-account-section-1 pre – Copy button added only if its parent have CSS class #my-account-section-1.

Top ↑

Can I change the copied content? Can I change the copied content?

Yes, By default the content are copied as HTML. We can change it as Text so content copied without HTML tags.

Top ↑

Can I default copy button string’s? Can I default copy button string’s?

Yes, We can change the default strings of the button text, button copied text and the title of the button too.

Top ↑

Can I change the copy button position? Can I change the copy button position?

Yes, By default the button is added within the selector. But, We can change it outside the selector.

Top ↑

Can I change the selector with filter? Can I change the selector with filter?

Yes, We can use the copy_the_code_localize_vars selector to change the currently stored selector.

E.g.

add_filter( 'copy_the_code_localize_vars', 'my_slug_copy_the_code_localize_vars' );
function my_slug_copy_the_code_localize_vars( $defaults )
{
    // `single class is added to the `` tag for the single page, post etc.
    $defaults['selector'] = 'body.single pre';

    return $defaults;  
}

Top ↑

Is plugin CSS compatible for all the themes? Is plugin CSS compatible for all the themes?

Yes, We have added !important for the Copy button to keep the button style same for each theme. We have tested below themes.

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.

18 thoughts on “Copy Anything to Clipboard

  1. Hi, how can I edit the font style of the text that is inside the copy clipboard? I noticed that the format of the text inside the clipboard is different from the rest of the content. Thanks for answering!

  2. hi mahesh thanks for this plugin. i want to add copy button in table cell that will copy the content in previous cell how can i achieve that?

    1. Hello,

      I thought you sent an email to me. I was sent the reply to that email but it was not sent. It was the email of the commit notification. I thought you sent an email to me. See short video https://www.dropbox.com/s/jkq6it2ni1yehg2/2accVHkKjd.mp4?dl=0

      Ok, For your question see below comments:

      For now, this is not possible but I’m working on another feature that may resolve this issue.

      I’m introducing the Cover style in which the copy text appears on the complete targeted selector so on the click it the copy text appears.

      In the next release, you can get that feature.

      Can you please share your website URL for reference? So, I can maybe provide you some solution.

      Also, I recommend you to contact through https://maheshwaghmare.com/say-hello/ so, We’ll discuss the issue step by step.

  3. Hey Mahesh,

    I love your plugin, very easy to use plugin for WordPress.

    I just want to know that how can we transform the input box to a normal text box without a horizontal scrollable menu. Just like this comment box that adopts its height according to paragraph.

    Thank you!

    1. Hello,

      Thanks for providing the video. I’m able to reproduce the same issue on my local environment. I’ll find the fix for this issue.

      For now, you can fix this by setting the button position outside. Please check the screenshot – copy anything to clipboard button position outside

      Also, For support contact from say hello link. So, We’ll discuss the issues in depth.

  4. Oh, I’m afraid my previous comment didn’t come through. πŸ™
    It was more important than the button thing.

    OK, once again:

    I need to put some HTML code inside “pre” tags for users to copy.
    I replaced the angel brackets with entities (lt, gt) and it displays properly (instead of being rendered).
    But when its copied, the “br” tags disappear – they’re being replaced by standard EOT chars. I guess it’s done by WordPress.
    But still – I need the “br” tags to be included in the copied code.
    Any hints how to achieve that?

    1. To achieve this you need to change the setting Copy Content As from HTML to Text. After using Text setting the br tag is copied as it is without EOT.

      Also, For support contact from say hello link. So, We’ll in dept.

  5. You can simply use below CSS:

    .copy-the-code-button {
        background: #54595f !important;
        color: #fff !important;
    }
    

    I’ll add such option to change the button styling in future plugin updates.

  6. I am NOT a programmer. The plugin works great for what I need except that it strips the html out of the copied text. Is there a setting I missed? I am using the plugin to copy text inside a widget. The text is a citation that includes a link to the article.

  7. Hello sir i am very thankful if you help me i am trying to copy blockquote which i used is gutenberg blcok quote and i used your technic but its not work. can you please help me………..

Leave a Reply

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

%d bloggers like this: