Categories

Featured templates

WordPress.How to disable href using jQuery

Roger Cunningham September 21, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

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.

Best Wordpress Themes
This entry was posted in WordPress Tutorials and tagged CherryFramework, disable, href, jQuery, link, non-clickable. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket