So I've followed this tutorial to the T, even downloading source files and implementing locally:


I also saw another poster here get this running: https://stackoverflow.com/questions/22254286/effective-dropdown-login-box-in-jquery

However, I am implementing this code into Wordpress and it suddenly ceases to work.

First I inserted the HTML into header.php (everything renders fine in browser).

I wp_enqueued the js properly and confirmed it's appearing in source head. Also verified JQuery is loaded.

Style sheet is loading fine. However, the dropdown doesn't work. When inspecting in Firefox, there's usually a little black icon next to active js elements.. it appears locally but not running in WP:

enter image description here

Seems like the javascript isn't linking to the button or something ..?

  • No magicians over here, if you are not posting your code, how do you expect anyone to see what is wrong with it? Please edit the question and add relevant "test case", try to make it as minimal as you think make sense – Mark Kaplun Apr 6 '16 at 3:35

First thing you do about this issue is try to check if the button calls the jquery function.

for example:

  alert('button was clicked!'); // to display an alert

or using the console

      console.log('button was clicked!'); // check using web browser console

If one of them works then there is no issue in loading the script. Additionally, check your file permission for jquery script you use if you see 644 then change it to 755. Goodluck!

  • So after checking console and wrestling with the problem for a few hours, here's what I discovered if anyone has similar issues.. – Whitesky Apr 6 '16 at 18:37
  • Firefox didn't report the bug, though Chrome displayed the following: $(document).ready(function() { is not a function Evidently this can be caused by too many jquery libraries being loaded by different plugins, and the latest causes conflicts. To counter this, a function has to be rewritten as such: From: $(document).ready(function() { blah... To: ( function($) { $(document).ready(function() { blah.. }; } ) ( jQuery ); Wrapping the function this way will allow the code to be passed, useful on a development site that is heavily modded with plugins. – Whitesky Apr 6 '16 at 18:43
  • Do you use firebug on firefox? and is the issue solved now? – claudios Apr 7 '16 at 1:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.