Add Copy Text To Clipboard Feature To Your WordPress Website

Table of Contents

WordPress is a web application you can use to create a beautiful website or blog. You'll be up and running in no time with the drag-and-drop design feature and automatic updates, which ensures your content is always fresh.

Even in WordPress, there are some functionalities where it gets a little difficult to find a good assisting plugin. One of these use cases is the feature.

You must have seen websites that have a nice button when clicked, the content or text is copied to your clipboard. Then you can use this text to paste it into any other application. It also helps improve the (UX) of the website.

The copy to clipboard function is possible with Javascript on web browsers. Writing an appropriate code will help you get this functionality to your website too.

Today we will see how we can get the copy to clipboard code on our WordPress websites.

Add Copy To Clipboard Button In WordPress

Whether you are using or not on your . There is no easy way to add Copy To Clipboard button in WordPress.

You will have to use custom code and javascript functions to get the copy to clipboard functionality.

Unfortunately, there are no good plugins as well to help you get this functionality. There are two plugins in the whole WordPress repository that offers the copy to clipboard functionality but turns out that they have their limitations which are not suitable in every use case.

We will talk about this plugin later in the post. Let us now see how we can add the copy to clipboard functionality to WordPress.

Step 1: Custom HTML Widget

If you are using Elementor or Gutenberg editor, which is the default editor of WordPress, place a custom HTML widget on the page.

We are using Elementor as our page builder. We will be making functionality in our example of this post.

Step 2: Insert this code into the HTML widget.

textarea id="p1" style="color:#666666;">Happy Belated Birthday! Hope you had a good one :) /textarea>

button>Copy To Clipboard /button>

script type="text/javascript">

document.querySelector("button").onclick = function(){

    document.querySelector("#p1").select();

    document.execCommand('copy');

}

/script>

It should be like this.

COPY TO CLIPBOAD CUSTOM HTML JAVASCRIPT CODE IN ELEMENTOR WORDPRESS

We have here used the “textarea” HTML tag to allow our users to also edit and add their own text to it. Custom messages can be inserted in the textarea of HTML.

You can use the “text” HTML tag feature as well here and only allow the text without any editing to be copied to the clipboard.

You can edit the text message and button text in the above code to suit your requirements.

The script in the above code is suitable for WordPress websites only. Because it does not import jQuery script to execute because we are using the jQuery that is already present in the WordPress by default.

If you like to use the same code outside of WordPress on any other website, this should be the code.

script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> /script>
textarea id="p1">Here is the text to be copied! /textaread>
button onclick="copyToClipboard('#p1')">Copy text /button>
br/> br/> input type="text" placeholder="Paste here for test the clipboard value" /
script type="text/javascript"
function copyToClipboard(element) {
  var $temp = $("input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
/script

The above copy to clipboard example uses the jQuery function. This is why we import the jQuery library file at the beginning of the code. Make sure to put the “

We do not do this in the WordPress website because WordPress already has a jQuery library file loaded by default. So we only call this file function using the “document” tag instead of “$”.

The above code can also be used to make . Remove the button and just place a link instead.

Step3: Design button using CSS

If you using Elementor like us, then you can find the custom CSS option in the Advanced Tab of the Custom HTML widget.

CUSTOM CSS

But before you start customizing the CSS part of the button, make sure you name the widget with a CSS class or ID as shown below in the example.

CSTOM HTML ELEMENTOR ADVANCED SETTINGS

This will stylize your click to copy button.

WordPress Copy To Clipboard Plugins

The above custom HTML code is the best way to implement a copy to the clipboard button on your website. But in some cases, you might need to use it more often.

Like a coupon website where you show coupons to the visitors that can be easily copied to their clipboard with just one click. It helps the UX of the WordPress website too.

In a case where you don't want to use the custom HTML and Javascript code on your website, you can go with these two plugins that are available in the WordPress repository for free.

  1. Copy Anything To Clipboard

Copy Anything To Clipboard plugin claims to be the #1 solution for WordPress websites to implement the click to copy button functionality. It has like 8000+ websites actively installed and using it.

The plugin can be installed and activated by going to the Plugins > Add New page and searching for its name.

Once activated, its initial start page will look like this:

COPY TO CLIPBOARD START PAGE

It comes pre-configured to show the Copy button on your website where the “pre” tag is used. You can delete this tag if you don't want to use it.

In our experience, we did not find this plugin to be so user-friendly. It has some bugs that are yet to be fixed by the developer.

Also, it is hard to use this plugin for new users. Because when you want to edit any tag that you have added to it. The edit page is completely blank.

COPY TO CLIPBOARD EDIT PAGE

You will be confused about how to edit the tag settings. It can be found by going into the screen options tab on the top right corner of WordPress Dashboard.

Another confusing and incomplete part is the shortcode tutorial.

SHORTCODE HELP PAGE

The shortcodes shown on the help page are not complete. You have to again go to the developers help page by clicking the link at the bottom which says “copy with shortcode”

We also found the plugin to not work in some cases where it had a conflict with the theme javascript. So this plugin might not work with all WordPress themes. Expect to get some errors or no functionality when you update your theme files.

Unfortunately, there are not many configuration options in this plugin. So you will be limited with the options that can be configured to suit your website's requirements.

  1. Code Click To Copy

Code Click To Copy is a new plugin in the WordPress repository with only 600+ active installations. It tends to be different by allowing the users to click anywhere on the code to be copied to their clipboards.

This plugin was designed to copy the programming codes from the website directly to your computers clipboard. So there is no Copy button shown.

It aims to be a lightweight plugin with limited functionalities. Much less functionalities than the above Copy Anything To Clipboard plugin.

Code Click To Copy plugin cannot be used in every use case. It was made by keeping the computer program codes to be copied to the clipboard.

Use it if you have a WordPress website where you share programming codes with your visitors. It will help in copying a whole bunch of codes easily to their clipboards.

So if you plan to use it in any other use case it might not work out so well.

Final Words

This blog post is intended to help the WordPress website owners who want to have an easy to use copy to clipboard functionality on their website. Unfortunately, there isn't an easy solution for this in the form of a .

As we recommended, go with the custom HTML code for the clipboard functionality we shared at the beginning of this post. It will help you save time and keep your WordPress website lightweight without any additional plugins.

In a case where you would need to use it more extensively we would recommend you to hire a good WordPress development team like ours by going here: Professional WordPress Website Development Services

Let us know in the comments below if you find this blog post useful. Share it to let everyone know of this simple solution that can help others keep their WordPress websites lightweight.

Share This Article:
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Email
Reddit
Related Articles:
image size reduce online
Facebook
Free Image Size Reduction Trick

Without Any Plugin Did you know that a normal website gets most of its weight from the images used in it? It is true. The majority of website size is mostly because of the images used in its pages. Optimizing images without losing quality is a difficult task for average

Read More »
free wordpress hosting
Plugins
Host Your WordPress Website For Free Forever

Hosting a WordPress website can be an expensive thing if not done properly. It can go from just a few dollars to thousands of dollars a month. Finding WordPress hosting can be a difficult task. If you own a small blog or website that you do not update often then

Read More »
free high quality backlinks
Backlinks
Get Free High Quality Backlinks The Creative Way

A backlink in the SEO world is a link from a post or a page on one website to another. If a website is linking to your content, it means you got a backlink. These backlinks are also called “inbound links”. Sometimes they are also called “incoming links”. Carrying a

Read More »
Google My Business Reviews WordPress Plugins
WordPress
5 Best Google My Business Reviews WordPress Plugins Free

Trust. It’s possibly the most crucial aspect of the sales process. Unsolicited, honest feedback from other customers is one of the fastest ways to create customer trust. If there’s one thing Google excels at, it’s designing products and services that appear to smoothly blend into our lives and enterprises. When

Read More »
google ranking dropped dramatically
Search Engine Optimization (SEO)
Why Did My Google Ranking Dropped Dramatically?

Bringing a website on top of Google search engine rankings is not an easy task. A lot of work goes through it to bring the website on top for high-traffic keywords. And when it does, these rankings bring a good amount of organic traffic from Google. When you see a

Read More »
add linkedin profile badge to wordpress
WordPress
Add LinkedIn Profile Badge And Card To WordPress

LinkedIn is an important social network to connect with many other businesses and work professionals worldwide. It is quite popular in English-speaking countries. A lot of professionals have found their job opportunities through LinkedIn. Also, many HRs and companies are always posting job openings here. If you have a good-looking

Read More »
Chat With Our SEO community members On discord
Discord SEO Community Chat
  • nkap avatar nkap <@211319858258771968> hey, would you be able to share the website that you want guest posts on? I’m in touch with a few fintech businesses and can ask them whether they’d be interested in putting a post on your site.
  • ddev66 avatar ddev66 <@211319858258771968> it sure will work. Make sure to write that it’s free to post as guests. A lot of websites do not mention this and writers usually think it’s paid opportunity only.

    Keep us updated of how well this goes for your website.
  • soutaraku avatar soutaraku Thank you so much for the detailed guide. I'll see if I can put up the Guest Post page to start with! I hope my email gets bombarded in a good way haha
  • ddev66 avatar ddev66 You should start putting up a page called Guest Posting on your other website where you put articles, etc.. and put all the requirements there which you are looking for in the guest posts. Make sure to leave your email as well for easier contacts.

    Build up some links to this page. Because most of the writers are looking to write for high metrics website that have good DA, TF, etc...

    Once you have a page setup it will help you get attention from people who are searching on Google.

    Next you can start sending the URL of this page to people whom you think might be interested to write for your service on social networks like twitter, linkedin, etc.

    Also list this page URL on websites that have posts like free guest posts list in SaaS, free guest posts list in "your niche", etc. Something like this: https://underwp.com/the-best-free-guest-posting-websites-list-in-2022-over-3000/

    These will get you enough traction to attract guest posts from various contributors over the time. Your email will be bombarded with emails following the above tips.
  • soutaraku avatar soutaraku I can translate guest post to Japanese and put it on our website to share stories from overseas. I thought it would be interesting for our readers and a good way for link building.
  • soutaraku avatar soutaraku It's not titled as contribute/guest posts page, but there's a website we put interview articles and such. We surely can put guest posts on that website.
  • ddev66 avatar ddev66 <@211319858258771968> does your website have contribute/guest posts page?
  • soutaraku avatar soutaraku Hi guys! I'm a Japanese SEO specialist/ content editor working for a fintech company, and looking for someone to put guest posts on our website (preferably about fintech or SaaS market). Are there any good place to look for people willing to guest post?

    In Japan, not many people write guest posts, so I'm kinda lost. Twitter trick is only guiding light to me, <@838326478924021760>. Thanks for sharing.
  • z. avatar z. trying it out right now
  • nkap avatar nkap Great idea! Will definitely try it out. Thanks mate.
  • ddev66 avatar ddev66 A good trick to get guest posts for your website. <@968643757010481232> <@755307075625549854>
  • Büşra avatar Büşra Thank you very much. I'll try 😊
  • nkap avatar nkap Yeah me too!!
  • naaz avatar naaz <@755307075625549854> Thank you for the detailed answer. Hope <@341197404302737408> finds the right solution for this.
  • nkap avatar nkap <@341197404302737408> Just these:

    You can try 3 things: (I suggest you try the 3rd option first)

    1. If there are any links in your coverage report that’s actually not from your domain/property, I’d recommend you use the Search Console’s removal tool to remove these from your property.

    2. If you’re using any page builders like elementor etc make sure you turn off search engine indexing for things like templates. You can find this in Yoast SEO settings. With this setting your templates and unnecessary pages won’t be indexed. Are you using elementor by any chance?

    3. It’s also possible that your site has been hacked. If random URLs are appearing in analytics and search console the first thing that you should do is check your .htaccess file to see if someone has put any rewrite rules.
  • ddev66 avatar ddev66 <@755307075625549854> got any views on this?
  • ddev66 avatar ddev66 did you change your permalinks sometime back in last few months?
  • naaz avatar naaz <@838326478924021760> bringing to your attention on this.
  • Büşra avatar Büşra hello guys! I need to help about SEO optimation. I'm using wordpress Yoast. I saw dummy link like as ``` https://myURL.com/cuisine/35/17498``` I haven't these in page. Btw ı'm using google search console. Why may be this? Is anyone has idea about that?
  • ankit662003 avatar ankit662003 does anyone know how to create seo silos?
  • ankit662003 avatar ankit662003 hi
  • ddev66 avatar ddev66 Just know that we are all here to help each other
  • ddev66 avatar ddev66 No worries mate.
  • Alex25 avatar Alex25 The thing is idk what to ask .
    I'm just stuck
  • ddev66 avatar ddev66 Drop your queries here
  • ddev66 avatar ddev66 Surely <@555915490791391232>
  • Alex25 avatar Alex25 Hello guys ,
    I'm a begginer at Marketing and i'm really stuck on my project if you guys can help me with it i'll be soo greatful .
  • ddev66 avatar ddev66 Discuss your seo related questions here
  • Alex25 avatar Alex25 Hello everyone
  • ddev66 avatar ddev66 Hello everyone! Here we will be sharing all the SEO related information and threads.

One Response

  1. Thank you for the simple codes. Elementor implementation of the custom HTML is easy. Helped me by not installing more plugins on the website for this simple task.

    Your codes miss out some “<" and ">” in some lines. It was removed so that the browser doesn’t parse it for others.

    For everyone, make sure you put the appropriate symbols in the code if you are using these codes in your pages.

Leave a Reply

Your email address will not be published.

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

%d bloggers like this: