If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

WordPress.How to disable href using jQuery

The following guide will show you how to disable links in Cherry framework 3.x and Cherry Framework 4.x based templates using jQuery

!Note, all of the custom javascript codes are to be added to the child themejs files.

  1. The custom js file can be located following this path for both Cherry Framework 3.x and Cherry Framework 4.x based templates:
    wp-content/themes/themeXXXX/js;

  2. In case the file cannot be located, you should create the file. Here are the guides on how to include custom js file:

  3. We will review 3 techniques that will help us disable the links;
    • The first one is by utilizing preventDefault() function;

      $( document ).ready(function() {
      	$('a').click(function(e) { 
      	e.preventDefault(); 
      }); 

      The above code prevents the default behavior of the links, specifically this one will disable the links globally.
      This is why the basic understanding of CSS selectors is required. The more refined CSS selector would be the following:

      'a[href="the_link_to_be_disabled_here"]'

      Where the_link_to_be_disabled_here, put the link you would like to lock.

    • The second code which can be used to disable link is the following:

      $( document ).ready(function() {
      	$('a').removeAttr("href");
      });

      The above rule will remove the html href attribute. This attribute is responsible for the link’s destination. Once removed, the link will no longer be working.

    • The last way to remove the link is to simply lock it by utilizing the click event handler:

      $( document ).ready(function() {
      	$('a').click (function () {
      		return false; 
      	});
      });
      		
  4. All of the codes have to be included inside the $( document ).ready() jQuery function.
    It would be necessary to include this function if you are adding custom jQuery codes to a newly-created js file
    since the code can run only once the DOM (Document Object Model) of the web page is ready to execute JavaScript code.

  5. In case there is an already existing JavaScript file with jQuery codes included, the bare function should be added at bottom before the closing brackets of $( document ).ready() function;

  6. One of the most important parts here is to select the correct link and locate a selector specific to this link.
    It is recommended to utilize browser inspector tools, this link will provide you with more information on browser inspectors.
    Incorrect CSS selector pattern can result in unexpected work of more links around the entire website.
    More information about selectors can be found here.

Feel free to check the detailed video tutorial below:

WordPress.How to disable href using jQuery

Also, enjoy more of our WordPress themes with Cherry Framework functionality.

We would also recommend you to view the the Best WordPress Themes 2017 in case you need a wider choice of website building solutions.