求助：通过Simple CSS and JS添加的Codepen JS在WordPress失效

Let's walk through the most likely reasons your jQuery code isn't working in WordPress, and how to fix them:

1. Incomplete/Syntax Error in Your Code #

The code you provided cuts off mid-line at $(docu...—this is a critical syntax error that will prevent the entire script from running. Assuming you intended to add a click handler for closing the search form when clicking outside, here's the completed, valid version:

(function($) {
  // Handle click on toggle search button
  $('#toggle-search').click(function() {
    $('#search-form, #toggle-search').toggleClass('open');
    return false;
  });

  // Handle click on search submit button
  $('#search-form input[type=submit]').click(function() {
    $('#search-form, #toggle-search').toggleClass('open');
    return true;
  });

  // Clicking outside the search form closes it
  $(document).click(function(event) {
    if (!$(event.target).closest('#search-form, #toggle-search').length) {
      $('#search-form, #toggle-search').removeClass('open');
    }
  });
})(jQuery);

Always validate your code with a syntax checker to catch missing brackets or incomplete statements.

2. WordPress jQuery NoConflict Mode #

WordPress loads jQuery in "noConflict" mode by default, which means the $ alias isn't available globally. Your code uses the (function($) { ... }) wrapper, but you need to pass jQuery as the argument at the end to make the $ alias work inside the function (as shown in the corrected code above). Without this, $ will be undefined, breaking all your jQuery calls.

3. Wait for the DOM to Be Ready #

If your script runs before the page's DOM is fully loaded, your selectors (#toggle-search, #search-form) won't find any elements. Even if your plugin loads the script in the footer, wrapping your code in $(document).ready() adds an extra layer of safety:

jQuery(document).ready(function($) {
  // Your entire code here
});

This ensures your code only executes once all HTML elements are available.

4. Check for Dynamic Elements #

If your search toggle or form are added to the page dynamically (e.g., via a theme template part that loads after your script, or via AJAX), direct click() bindings won't work. Use event delegation instead to attach the handler to a parent element that exists on page load:

$(document).on('click', '#toggle-search', function() {
  $('#search-form, #toggle-search').toggleClass('open');
  return false;
});

This works for elements added after the initial page load.

5. Verify Script Loading Order #

Make sure your script is loaded after jQuery. Most WordPress themes load jQuery in the footer, so if your plugin is loading your script in the header, jQuery won't be available yet. Check your Simple CSS and JS plugin settings—look for an option to load the script in the footer instead of the header.

6. Debug with Browser Dev Tools #

Open your browser's Developer Tools (F12), go to the Console tab, and look for errors like "ReferenceError: $ is not defined" or "Uncaught SyntaxError". These will point you directly to the issue. You can also test your selectors in the console: type $('#toggle-search')—if it returns an empty object, your selector is wrong or the element hasn't loaded yet.

After applying these fixes, your script should work as expected.

内容的提问来源于stack exchange，提问作者Shoaib