javascript - Wordpress Theming: add custom scripts and jquery the correct way - Stack Overflow

admin管理员组

文章数量:1400807

Just took over a wordpress project. The former developers screwed up the theming so it prevents my ajax forms (gravityform) from working correctly. Proplem is the way they add jquery and custom js in header.php:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slides.min.jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/script.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/tabs.min.js"></script>

I am totaly new to wordpress theming thought, how would I correctly add those scripts in my functions.php using wp_register_script and wp_enqueue_script.

How do I find out which script depends on the others? like the correct order of calling them?

EDIT I made it to include the scripts the proper way via wp_enqueue_scripts. But now I am facing strange JS errors. TypeError: $ is not a function

It works when I substitute the $ by jQuery. But this cant be a solution. Why does this error appear anyways?

Just took over a wordpress project. The former developers screwed up the theming so it prevents my ajax forms (gravityform) from working correctly. Proplem is the way they add jquery and custom js in header.php:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slides.min.jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/script.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/tabs.min.js"></script>

I am totaly new to wordpress theming thought, how would I correctly add those scripts in my functions.php using wp_register_script and wp_enqueue_script.

How do I find out which script depends on the others? like the correct order of calling them?

EDIT I made it to include the scripts the proper way via wp_enqueue_scripts. But now I am facing strange JS errors. TypeError: $ is not a function

It works when I substitute the $ by jQuery. But this cant be a solution. Why does this error appear anyways?

• javascript
• jquery
• ajax
• wordpress
• wordpress-theming

Share Improve this question Follow edited Sep 26, 2013 at 15:02 uncle_iroh asked Sep 26, 2013 at 13:07 uncle_irohuncle_iroh 19311 gold badge22 silver badges77 bronze badges 1

• Please have a look at codex.wordpress/Function_Reference/…. – sufinawaz Commented Sep 26, 2013 at 15:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The best way to avoid asset conflicts is by properly enquing the files. To do this you must use wp_enqueue_script

a good way to do this is to put it as part of a function in your functions.php file like so

1. create a function
2. insert wp_register_script into the function
3. then insert wp_enqeue_script into the function
4. use add_action(), to initlize the enqueue-ing process

---

so -

function load_scripts() {
  wp_register_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'scriptyouwillwaittobeloaded' ) );
  wp_enqueue_script( 'script-name' );
}

add_action('wp_enqueue_scripts', 'load_scripts');

---

In this example the function load_scripts() would then be called in the header.php file. Take a look at wp_register_script as well to get a better understanding of the arguments for that as well, but in summary -

first argument: is the name you want to use as reference to this script

second argument: is the actual link to the script

third argument: is the script that you want to load before this script (the script you want to wait for before this script loads)

---

and for wp_enqueue_script, the argument is merely a reference to the name (the first argument of wp_register_script)

---

the add_action function arguments:

first argument: the function you are "hooking" into

second argument: the function you created that will be "hooked"

---

To note - you can load as many scripts as you would like in this function, this is just an example of loading a single script.

What it looks like the dev's did was just to use a simple reference. If you would like to enqueue a WP script look at wp_enqueue_script

I don't believe the scripts will depend on anything other than a specific version of jquery.

this is how they do it:

<?php

function my_scripts_method() {
    wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom_script.js',
    array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

本文标签： javascriptWordpress Theming add custom scripts and jquery the correct wayStack Overflow