Smartly Prevent Text Selection and Copy in WordPress

Want to prevent users from copying text of your WordPress website? But do not want to block the right-click, then this quick tip is for you. There can be many ways to handle this situation from plugins to CSS to a PHP code snippet.

These methods can be used by other users as well, not limited to WordPress. We will look into two ways to do this:

Method 1:
Block text copying using CSS

This is very simple option that anyone can easily implement on their website by adding the given CSS into your WordPress website. It will block the text selection on your website.

 *{ 
-webkit-touch-callout: none; /* iOS Safari */  
-webkit-user-select: none; /* Safari */  
-khtml-user-select: none; /* Konqueror HTML */  
-moz-user-select: none; /* Old versions of Firefox */  
-ms-user-select: none; /* Internet Explorer/Edge */  
user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ } 

Here is how you can add this CSS into theme customizer:

Step 1:
Go to WordPress dashboard (wp-admin section)

Step 2:
Navigate to Appearance > Customize.

Step 3:
Find the Additional CSS area, and paste the given CSS.

Step 4:
Now, try to copy the text from any page from your website.

If you want to try something cool, then the next option is you can try. It will allow users to copy the text on your website, but will replace the copied text by your given string of text.

Simply put, it will change the copied text by your text.

Method 2:
Block text copying using PHP code snippet.

To use this option, you need to add this php code into your theme’s function.php file or you can use a plugin like Code Snippet to add the given php snippet in to your WordPress.

add_action('wp_head', 'smartRightClick');
function smartRightClick()
{ ?>
<script>
function addLink() {
var selection = window.getSelection();         
pagelink = "This text will be replaced with selected text on page change it";         
copytext = pagelink;         
newdiv = document.createElement('div');         
newdiv.style.position = 'absolute';         
newdiv.style.left = '-99999px';         
document.body.appendChild(newdiv);         
newdiv.innerHTML = copytext;         
selection.selectAllChildren(newdiv);         
window.setTimeout(function () {         
document.body.removeChild(newdiv);         
}, 100);         
}         
document.addEventListener('copy', addLink);  
</script>     
<?php } ?>    

By following these two methods, you can make it hard for users to copy the text from your website. However, these are not concrete solution, anyone with little use of brain can copy the text by opening inspect element.

Well, you can use it if you want to, please do let me know in the comments why you want to block user from copying text from your website.

For more latest and quick updates follow us on social channels Facebook, Twitter, LinkedIn and YouTube.