How to call scripts in a child Wordpress theme?

Question

I’m trying to build a Wordpress template. What I can’t do yet is call the script in the child theme I created. CSS worked, but the scripts didn’t. There are several, and I got lost in how to put them in functions.php.

I’m trying to build the template with a ready-made framework that is the Metro UI CSS. I’ve done a lot of research and I don’t quite understand these tips, because in my case are several scripts.

Answer 1

Answer

There are a few things to take into account for a proper inclusion of script on the page:

1. Correct file

   The file functions.php where you should address the inclusion of your script is located in:

   /themes/nome-do-tema/functions.php
   

2. jQuery to use

   You should not remove jQuery that already comes with Wordpress unless you are absolutely sure that you will not break something because you’re changing the version to the one you want to include:

   • See: Including jQuery and Javascript files the correct way ^(English)
   • See: Don’t Dequeue Wordpress' jQuery ^(English)

3. The appropriate function to gather the path to the theme and sub-themes so that there is a attention to the theme-father and theme-son is the get_stylesheet_directory_uri:

   Retrieve stylesheet directory URI for the Current Theme/Child Theme. Checks for SSL.

   That translated:

   Tracks the current theme/child theme style sheet. Checks for SSL.

In light of all this attention, your code based on the comment you left on reply from @Victor Mendonça would be as follows:

/**
 * Função onde adicionamos à lista de inclusões
 * todos os scripts que pretendemos incluir.
 */
function my_scripts() {

  // script 01
  wp_enqueue_script(
    'widget_min',
    get_stylesheet_directory_uri() . '/js/jquery/jquery.widget.min.js',
    array('jquery')
  );

  // script 02
  wp_enqueue_script(
    'metro_min',
    get_stylesheet_directory_uri() . '/js/metro/metro.min.js',
    array('jquery')
  );

  // ...
}

// adicionamos uma acção que chama a nossa função
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Note:
It should work assuming you have the script where you are indicating that they are and assuming that you already have jQuery present.

You can also check the output of the paths in use to ensure that they are pointing to the desired location/file:

// caminho recolhido
echo get_stylesheet_directory_uri();

// caminho recolhido + restante até ao teu ficheiro
echo get_stylesheet_directory_uri() . '/js/metro/metro.min.js';

---

The function wp_enqueue_script is responsible and recommended to include script:

Description

Links a script file to the generated page at the right time According to the script dependencies, if the script has not been already included and if all the dependencies have been Registered. You could either link a script with a Handle Previously Registered using the wp_register_script() Function, or provide this Function with all the Parameters necessary to link a script.

This is the Recommended method of linking Javascript to a Wordpress generated page.

That translated:

Binds a script file to the generated page at the right time according to the dependencies of it, if the script has not been included, and if all dependencies have been registered. You could include a script with a previously registered identifier using wp_register_script Function(), or provide this function with all the necessary parameters to include a script.

This is the recommended method to include Javascript in a Wordpress generated page.

Parameters

It accepts a series of parameters to better control as the script should be included:

 <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> 

Parameters:

• $handle

  Name used as an identifier of the script.

• $src

  Path to the file containing the script.

• $deps

  Matrix with indication of the dependencies that this script has, an example will be:

  array('jquery') // indica que o script precisa de ter o jquery carregado para funcionar
  

• $ver

  Optional field to indicate the version of script.

• $in_footer

  Optional field to specify if the script is inside the HEAD, must be immediately before the closure of the BODY.

Example of Use

A simple example of using this function:

/**
 * Função onde adicionamos à lista todos os scripts
 * que pretendemos incluir.
 */
function my_scripts() {

  wp_enqueue_script(
    'nome-do-script',
    get_template_directory_uri() . '/js/meu_ficheiro.js',
    array('jquery'),
    '1.0.0',
    true 
  );
}

// adicionamos uma acção que chama a nossa função
add_action( 'wp_enqueue_scripts', 'my_scripts' );

---

^{Response credits}

<sup>- Answer given by @b__on SOEN
- Answer given by @Chip Bennett on Wordpress
- Wordpress documentation for add_action
- Wordpress documentation for get_stylesheet_directory_uri
- Wordpress documentation for wp_enqueue_script
- Don’t Dequeue Wordpress' jQuery by Eric Mann</sup>

Answer 2

Well, I’m not sure I quite understood your question, but if I do, it will solve you.

Use the wp_register_script:

wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');

or else create some method with the body like this, in the file functions.php (at the root of the template):

function loadJS(){
    echo '<script type="text/javascript" src="'.bloginfo('stylesheet_directory').'/js/jquery.form.js"></script>';
}

and make his call after your statement

loadJS();

Answer 3

Zuul, it worked here I used the code

function my_scripts() {

  wp_enqueue_script(
    'nome-do-script',
    get_template_directory_uri() . '/js/meu_ficheiro.js',
    array('jquery'),
    '1.0.0',
    true 
  );
}

// adicionamos uma acção que chama a nossa função
add_action( 'wp_enqueue_scripts', 'my_scripts' );

and my code inside the javascript functions.php file q was giving conflict with another javascript code using jquery worked normally in wordpress. thank you.