How to call scripts in a Wordpress child theme?

5

I'm trying to put together a Wordpress template. What I can not do is still call the script in the child theme I created. CSS worked, but the scripts did not. 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 Metro UI CSS . Already researched enough and did not quite understand these tips , because in my case there are several scripts.

    
asked by anonymous 20.02.2014 / 03:11

3 answers

4

Response

There are a few things to keep in mind for a proper inclusion of script on the page:

  • Correct file

    The functions.php file where you should deal with the inclusion of your script files is located at:

    /themes/nome-do-tema/functions.php
    
  • jQuery to use

    You should not remove jQuery that already comes with WordPress unless you are absolutely sure you will not break anything because you are changing the version you want to include:

    >
  • The appropriate function to collect the path to the theme and sub-themes so that there is an attention to the parent theme and child theme is get_stylesheet_directory_uri :

      

    Retrieve stylesheet directory URI for the current theme / child theme. Checks for SSL.

    What translated:

      

    Gets the path to the current theme / child theme style sheet. Check for SSL.

  • Given these attentions, your code based on the comment you left on @Victor Mendonça's answer would look like this:

    /**
     * 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 files where you are indicating they are and assuming you already have jQuery present.

    You can also check the output of the paths in use to ensure 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 wp_enqueue_script function is responsible and recommended to include script :

    Description

      

    Links to a script file to the generated page at the right time according to the script dependencies, if the script has not already been included and if all the dependencies have been registered. You could either link to script with a handle previously registered using the wp_register_script () function, or provide this function with all necessary parameters to link to script.

         

    This is the recommended method of linking JavaScript to a WordPress generated page.

    What translated:

      

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

         

    This is the recommended method to include JavaScript in a page generated by WordPress.

    Parameters

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

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

    Parameters:

    • $handle

      Name used as an identifier of script .

    • $src

      Path to the file that contains 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 indicate if the script instead of being within HEAD , should be immediately before closing BODY .

    Example Usage

    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

    - Answer given by @b__ in SOEN
    - < a href="https://wordpress.stackexchange.com/a/45440/16692"> Answer given by @Chip Bennett in WordPress - WordPress Documentation for add_action
    - WordPress Documentation for get_stylesheet_directory_uri
    - WordPress Documentation for wp_enqueue_script
    - Do not Dequeue WordPress' jQuery by Eric Mann

        
    25.02.2014 / 18:47
    2

    Well, I'm not sure if I understand your question right, but if I understand, this will solve you.

    Use 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 create any method with the body like this in the functions.php file (in the template root):

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

    and call him after his statement

    loadJS();
    
        
    20.02.2014 / 22:09
    0

    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 functions.php file in javascript was conflicting with other javascript code using jquery worked normally on wordpress. Thank you.

        
    18.04.2016 / 02:45