Working with jquery in WordPress

by Nikolaenko Maxim · Published January 19, 2013 · Updated August 8, 2018

To begin with, I will write down the task that I had. Then settings WordPress output jquery library version 1.4 because of the plugin, the free version of which has not been updated yet c 2009 of the year. Plugin name “TheTheFly“, I'm sure everything was fine in the paid version, but the toad would crush me to buy it, when I can make the necessary script or, in extreme cases, figure out how the plugin works.

In general, I got interested and I began to dig into the code. Digging into plugin sources, I noticed an interesting piece of code like the following.

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-latest.min.js', false, 'latest');
    wp_enqueue_script( 'jquery' );

    wp_deregister_script( 'jquery-ui' );
    wp_register_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js');
    wp_enqueue_script( 'jquery-ui' );

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://code.jquery.com/jquery-latest.min.js', false, 'latest');

wp_enqueue_script( 'jquery' );

wp_deregister_script( 'jquery-ui' );

wp_register_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js');

wp_enqueue_script( 'jquery-ui' );

It seems like you should take the latest version, but it didn't take ). I redid the code without the plugin and everything worked fine, but the design that I found in the plugin, I started to disassemble and now I will give a small description of what I found.

From the code WordPress found out that the function wp deregister script() needed to exclude javascript script from WordPress registry. Moreover, this function can remove not only the JQUERY library, but also any other registered script, for example, when a conflict appears in different plugins written incorrectly. I have this conflict often., when badcoders decide to include another jquery library along with the plugin. To use the function, you can write the following code:

<?php wp_deregister_script( $handle ); ?>

или

<?php wp_deregister_script('jquery'); ?>

<?php wp_deregister_script( $handle ); ?>

или

<?php wp_deregister_script('jquery'); ?>

As you can see from the example, the $handle variable – these are the titles of the script, which should be removed. The function itself does not return any values and is located at wp-includes/functions.wp-scripts.php.

The following function from the code snippet is wp_register_script(). There's not much to say here, just add it to the function parameter, that script, which you want to display in the template header WordPress. The function has multiple parameters.

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

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

Consider the function parameters wp_register_script in order:

$handle – Scenario name. Must be unique, since it is used as an identifier for later use with wp_enqueue_script ().

Default parameter value: None

$SRC – URL script, to be added to your template.

An example of connecting a script: ” https://example.com/wp-includes/js/scriptaculous/scriptaculous.js “.

You should never hardcode a URL in local scripts. Better use get_template_directory_uri construct, to get path from wordpress theme.

Default parameter value: None

$dept – array of registered scripts, He shows, that this script depends on scripts, which must be loaded before loading this script. The function will return false if not all scripts have been registered before. This parameter is required, only if your script needs to load other libraries or scripts.

Default parameter value: Array ()

$ver – parameter is optional, if you don't need to use the script version. This setting is used to, so that the correct version is sent to the client, regardless of caching. Can be left blank to disable.

Default parameter value: False

$In_footer – usually scripts are placed in <head> section. If this parameter is equal to false, the script is placed at the bottom <body> . For the parameter at the bottom of the template to work, you need a function wp_footer() in its place and your script will be displayed. note, that you should also have a function at the top of the site wp_head(), even if the script is placed in the basement.

Default parameter value: False

Herself wp_register_script function does not return any values.

All scripts, which can be connected and they are in CMS WordPress, by default are listed in the code, I won't list them. Reading here.

Function sources are located at: wp-includes/functions.wp-scripts.php

After registering the script, the help of the function wp_register_script required it is necessary enable the use of this very script in template WordPress using functions wp_enqueue_script.

The function code when used looks like this:

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

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

Also, this function has variations and will indicate exactly where the script should be included..

wp_enqueue_scripts – for the external part of the site;
admin_enqueue_scripts – for control panel;
login_enqueue_scripts – for login page.

$handle – unique script script name. I already described it above..

Default parameter value: None

$src – parameter specifies the path to the script and is needed only in cases, if WordPress doesn't already know about it, where is the script. If, prior to calling this function, you did not register your script with the function wp_register_script.

Default parameter value: None

$dept -as described in the previous function, this parameter will contain an array with script IDs that must be connected before the script is called.

Default parameter value: Array ()

In WordPress code it is also advised to use the plugin Use Google Libraries in order to avoid conflicts with libraries when connecting third-party plugins.

Example for connecting CDN copy of jquery library from google.

<?php
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

<?php

function my_scripts_method() {

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');

wp_enqueue_script( 'jquery' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Using the wp_enqueue_scripts filter (instead of a filter init, to which some articles on third-party sites link), we avoid registering an alternative version jQuery on control panel pages, which reduces the risk of breaking the post editor when updating.

Example

Add and load a new script, which depends on scriptaculous (this also causes the scriptaculous to load on the page):

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'newscript',
		plugins_url( '/js/newscript.js', __FILE__ ),
		array( 'scriptaculous' )
	);
}    
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

<?php

function my_scripts_method() {

wp_enqueue_script(

'newscript',

plugins_url( '/js/newscript.js', __FILE__ ),

array( 'scriptaculous' )

);

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Loading the script in the theme, script dependent in wordpress

Often required, to before JavaScript-files, supplied with the theme, another was uploaded JavaScript-file. WordPress provides API, allowing you to specify its dependencies when registering a script. For example, the theme with the below code requires, to before the script custom_script.js library has been loaded jQuery:

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

<?php

function my_scripts_method() {

wp_enqueue_script(

'custom-script',

get_template_directory_uri() . '/js/custom_script.js',

array('jquery')

);

}

add_action('wp_enqueue_scripts', 'my_scripts_method');

We load plugin scripts only on its pages

<?php
    add_action( 'admin_init', 'my_plugin_admin_init' );
    add_action( 'admin_menu', 'my_plugin_admin_menu' );
    
    function my_plugin_admin_init() {
        /* Регистрируем наш скрипт. */
        wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
    }
    
    function my_plugin_admin_menu() {
        /* Регистрируем страницу нашего плагина */
        $page = add_submenu_page( 'edit.php', // Родительская страница меню
                                  __( 'Мой плагин', 'myPlugin' ), // Название пункта меню
                                  __( 'Мой плагин', 'myPlugin' ), // Заголовок страницы
                                  'manage_options', // Возможность, определяющая уровень доступа к пункту
                                  'my_plugin-options', // Ярлык (часть адреса) страницы плагина
                                  'my_plugin_manage_menu' // Функция, которая выводит страницу
                               );
   
        /* Используем зарегистрированную страницу для загрузки скрипта */
        add_action( 'admin_print_scripts-' . $page, 'my_plugin_admin_scripts' );
    }
    
    function my_plugin_admin_scripts() {
        /*
         * Эта функция будет вызвана только на странице плагина, подключаем наш скрипт
         */
        wp_enqueue_script( 'my-plugin-script' );
    }
    
    function my_plugin_manage_menu() {
        /* Выводим страницу плагина */
    }
?>

<?php

add_action( 'admin_init', 'my_plugin_admin_init' );

add_action( 'admin_menu', 'my_plugin_admin_menu' );

function my_plugin_admin_init() {

/* Регистрируем наш скрипт. */

wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );

}

function my_plugin_admin_menu() {

/* Регистрируем страницу нашего плагина */

$page = add_submenu_page( 'edit.php', // Родительская страница меню

__( 'Мой плагин', 'myPlugin' ), // Название пункта меню

__( 'Мой плагин', 'myPlugin' ), // Заголовок страницы

'manage_options', // Возможность, определяющая уровень доступа к пункту

'my_plugin-options', // Ярлык (часть адреса) страницы плагина

'my_plugin_manage_menu' // Функция, которая выводит страницу

);

/* Используем зарегистрированную страницу для загрузки скрипта */

add_action( 'admin_print_scripts-' . $page, 'my_plugin_admin_scripts' );

}

function my_plugin_admin_scripts() {

* Эта функция будет вызвана только на странице плагина, подключаем наш скрипт

wp_enqueue_script( 'my-plugin-script' );

}

function my_plugin_manage_menu() {

/* Выводим страницу плагина */

}

You can read more from the code here. In the same place below there are links to English articles on connecting scripts in WordPress. Good luck with development!

Online tutoring services. List of courses I teach

Basic web design course;
Site layout;
General course on CMS WordPress and continuation of the course on template development;
Website development in PHP.