Post Reads 116 reads

WARNING!

This is the guide of version 1.8.0 and below. “Copy Anything to Clipboard” plugin version 2.0.0 is released. So use the latest plugin guide at copy anything to clipboard the latest guide.

Simply copy the content into the clipboard.

Table of Content

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.

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.

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.

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.

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.

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.

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

Example 5 – Copy content as HTML as Text Example 5 – Copy content as HTML as Text

Suppose we have below HTML:

<div class="heading">
<h2>Hello World</h2>
<p>Description goes here</p>
<h2>Another Heading</h2>
</div>

Here, If we use the selector .heading then the content is copied as HTML markup like below:

<h2>Hello World</h2>
<p>Description goes here</p>
<h2>Another Heading</h2>

But if we want to avoid the mark-up and copy the content without markup as below:

Hello World
Description goes here
Another Heading

How to achieve that?

We have a setting Copy Content As which allows us to copy the content with HTML markup or as a plain text.

Compatibility Themes & Plugins Compatibility Themes & 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.

Below is the list of WordPress themes. We have manually tested the pluign on all of them. And it works as expected on each of them.

  • Twenty Twelve – By WordPress.org
  • Twenty Sixteen – By WordPress.org
  • Twenty Seventeen – By WordPress.org
  • Twenty Nineteen – By WordPress.org
  • Velux – By GoDaddy
  • Hello Elementor – By Elementor
  • OceanWP – By oceanwp
  • Astra – By Brainstorm Force
  • Ascension – By GoDaddy
  • Twenty Sixteen – By WordPress.org
  • Twenty Fifteen – By WordPress.org
  • Hestia – By Themeisle
  • Neve – By Themeisle
  • Escapade – By GoDaddy
  • Shapely – By Silkalns
  • Sydney – By athemes
  • Storefront – By Automattic
  • Twenty Fourteen – By WordPress.org
  • Futurio – By FuturioWP
  • Zakra – By ThemeGrill
  • GeneratePress – By Tom
  • Mesmerize – By Extend Themes
  • Highlight – By Extend Themes
  • Customify – By PressMaximum
  • Ashe – By WP Royal

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.

Frequently Asked Questions Frequently Asked Questions

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.

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.

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.

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.

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;  
}

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.

Examples Examples

To understand how it works lets see some examples.

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

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:

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.

Copy the content into the clipboard with WordPress plugin.

1 thought on “Copy Anything to Clipboard – v1.8.0”

  1. Hi Sir Thanks For This Guide But as a new blogger i cant understand this type of coding so i request you to please make a tutorial Video and add video in this blog.

    Thanks
    Zuber Khan
    Love Form Jaipur

Leave a Reply

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

Scroll to Top
%d bloggers like this: