Geek Answers Handbook

Wordpress Theming: Add your own scripts and jquery correctly.

Just took over the wordpress project. Former developers screwed up the theme so that it would not allow my ajax (gravityform) forms to work correctly. Proplem is a way to add jquery and custom js to 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 completely new to Wordpress thinking how to correctly add these scripts to my functions.php using wp_register_script and wp_enqueue_script.

How to find out which script depends on others? What is the correct order of their call?

EDIT I ​​enabled scripts properly through wp_enqueue_scripts. But now I am facing unusual JS errors. TypeError: $ is not a function

This works when I substitute $ jQuery. But this cannot be a solution. Why does this error appear anyway?

+4
source share
2 answers

The best way to avoid asset conflicts is to register the files correctly. For 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, for example,

  • create function
  • insert wp_register_script into function
  • then insert wp_enqeue_script into the function
  • use add_action () to initialize the queue 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 load_scripts() function will then be called in the header.php file. Take a look at wp_register_script for a better understanding of the arguments for this, but in a summary -

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

second argument: the actual link to the script

Third argument: this is the script you want to load before this script (the script you want to load before this script)

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

arguments to the add_action function:

first argument: the function that you "connect" to

second argument: the function you created will be "connected"

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

+3
source

It seems that the developer just used a simple link. If you want to assign a WP script see wp_enqueue_script

I do not believe that scripts will depend on anything other than a specific version of jquery.

here's 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' ); ?>
0
source

More articles:


All Articles