Title: Enqueue javascript file
Last modified: September 1, 2016

---

# Enqueue javascript file

 *  Resolved [Guido](https://wordpress.org/support/users/guido07111975/)
 * (@guido07111975)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/)
 * Hi,
 * I’m building a theme and want to include a toggle form.
    Form is displayed onclick:
 *     ```
       <div id="header-search"><?php _e( 'Search', 'textdomain' ); ?></div>
       <form id="header-search-form" style="display:none"><?php get_search_form(); ?></form>
   
       <script>
       $( "#header-search" ).click(function() {
       	$( "#header-search-form" ).toggle();
       });
       </script>
       ```
   
 * Because I don’t want to include .js in my php template files I want to replace
   it to a separate file and call it from my functions file:
 *     ```
       wp_enqueue_script( 'head-search', get_template_directory_uri() . '/js/head-search.js', array( 'jquery' ) );
       ```
   
 * So I have created a .js file called ‘head-search’ and added it to my /js theme
   folder. It contains:
 *     ```
       jQuery(document).ready(function() {
       	$( "#header-search" ).click(function() {
       		$( "#header-search-form" ).toggle();
       	});
       });
       ```
   
 * Enqueue is loaded in my head but toggle doesn’t work.
 * I guess the .js should be adjusted for external use?
 * Guido

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [Guido](https://wordpress.org/support/users/guido07111975/)
 * (@guido07111975)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/#post-7464357)
 * Yes, found it myself, need to prefix it:
 *     ```
       jQuery(document).ready(function() {
       	jQuery( "#header-search" ).click(function() {
       		jQuery( "#header-search-form" ).toggle();
       	});
       });
       ```
   
 * Guido
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/#post-7464371)
 * Hi Guido,
 * I think everyone gets caught by that one at first! FYI, you can still use the
   $ shortcut by altering the `.ready()` closure a bit:
    `jQuery(document).ready(
   function( $ ) {`
 * Especially useful when adapting a large block of jQuery script to WP that uses
   the $ shortcut everywhere.
    [https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-1473](https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-1473)
 * BC
 *  Thread Starter [Guido](https://wordpress.org/support/users/guido07111975/)
 * (@guido07111975)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/#post-7464411)
 * Hi BC,
 * Thanks for your response. I found out myself when I checked another .js file 
   from my theme.
 * Indeed, the other thing you mentioned can be usefull in case of big code blocks.
 * Guido
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/#post-7464412)
 * If you’re not already, utilise your browser’s console to see more informative
   errors; [https://developer.chrome.com/devtools#console](https://developer.chrome.com/devtools#console)
 *  Thread Starter [Guido](https://wordpress.org/support/users/guido07111975/)
 * (@guido07111975)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/#post-7464414)
 * Hi Andrew,
 * Thanks, I obviously didn’t know about this feature 😉
 * Guido
 *  [Yudhistira Mauris](https://wordpress.org/support/users/maurisrx/)
 * (@maurisrx)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/#post-7464416)
 * +1 for Chrome’s developer tool (F12). It’s very useful tool.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Enqueue javascript file’ is closed to new replies.

## Tags

 * [enqueue](https://wordpress.org/support/topic-tag/enqueue/)
 * [js](https://wordpress.org/support/topic-tag/js/)
 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 6 replies
 * 4 participants
 * Last reply from: [Yudhistira Mauris](https://wordpress.org/support/users/maurisrx/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/enqueue-javascript-file/#post-7464416)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics