Post Reads 458 reads

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.

Copy the content into the clipboard with WordPress plugin.

2 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!

Leave a Reply

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

Scroll to Top
%d bloggers like this: