How to Fix jQuery breaking your site for WordPress 4.5.x

Posted on June 10, 2016 at 3:15 pm

Tags: ,

1 Comment

Quick Guide on updating your outdated WordPress theme or plugin jQuery selectors

Back when WordPress 4.5 was first released we've received many support requests for broken themes and plugins.

All of them had two things in common:
a. Running WordPress 4.5.x
b. having a specific jQuery issue which resulted in the following warning:

Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

While seems like an issue related with the 4.5.x version of WordPress it's really not, this jQuery warning has to do with a theme or plugin that is using an outdated href selector.
Since I'm still getting such support requests I thought to post a How To on updating your WP theme/plugin jQuery selectors to the latest ones used by WordPress jQuery.

Warning: Make sure you always keep a backup of the files you are editing before you start working on them.

How to Detect the WordPress Plugin or Theme which uses the outdated jQuery selector

First of all you must find the offending piece of code and the file it belongs to, in order to do this I suggest using the Chrome Inspector or FireFox Inspector addon and inspect your site code by right clicking on the page that hosts the issue. In there you can see the outdated code and the path of the it belongs to. The jQuery warning which should look like the one found below:

Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

Notice: If you're experiencing difficulties in using the Inspector addon then I suggest to take a look at the Beginner introduction to the features of the Chrome Debugger Guide by CodeProject.com.

How to Fix the outdated jQuery selector

Once you find the file and the line which the jQuery selector resides you should replace this piece of code:

$( 'a[href*=#]:not([href=#])' ).click( function() {

with this one:

$( 'a[href*="#"]:not([href="#"])' ).click( function() {

What you're doing here is adding double quote marks around the hash symbols(#). When finished you can save the file, upload it to your site and cache clear refresh your page with CTRL+F5.

Comments (1)

  1. Patti Ryan Reply

    June 10, 2016 at 9:27 pm

    Thanks for sharing. I posted this on the WP forum.

Leave a Reply

Your email address will not be published. Required fields are marked *