The ingredients to add a custom jQuery script to a Wordpress theme:
1) custom function in the theme’s functions.php file;
2) jQuery file;
3) add_action() line
Before you start, please install the Google Libraries plugin !
1) in [website root]\wordpress\wp-content\themes\current_theme\functions.php add these lines:
<?php
// My own nitwit jQuery script
function nitwit () {
wp_enqueue_script('shittycode', THEME . '/scripts/myscript/alert.js', array('jquery'), '1.0', false);
} // End nitwit()
add_action( 'wp_print_scripts', 'nitwit', 1 );
//
?>
For each jQuery file you wish to include, add another wp_enqueue_script() line to the function. This line reads as follows:
The name by which I would like to refer to this jQuery file is 'shittycode'. It is located at THEME . ‘/scripts/myscript/alert.js’ *, requires jQuery to run and has a version number of 1.0. The `false` at the end denotes whether or not the script is to be loaded in the footer of the theme (on wp_footer()). If false, the script will load in wp_head() of the current theme.
2) Put a script file named alert.js in [website root]\wordpress\wp-content\themes\current_theme\scripts\myscript\,
contents:
$(document).ready(function() {
alert("Hello world!");
});
3) The add_action() line has to be put directly beneath the function.
---------
Explanation of wp_print_scripts
Prints script tags in document head. Called by admin-header.php and by wp_head hook. Since it is called by wp_head on every page load, the function does not instantiate the WP_Scripts object unless script names are explicitly passed. Does make use of already instantiated $wp_scripts if present. Use provided wp_print_scripts hook to register/enqueue new scripts.
---------
Result: when the WordPress wp_print_scripts() function runs, the nitwit () function is added to the list of functions to run. It has been given a priority setting of 1 (this can be used to control which functions execute before others).
Specific pages:
To include the jQuery file on only one particular page, use a specific action hook. Action hooks are essentially placeholders. Wherever an action hook is placed, it will execute any code that has been “hooked” to it. Let’s try to visualize this with some default WordPress action hooks that are in most themes. You can find wp_head and wp_footer in just about every single theme available, and most people don’t realize these are action hooks. They’re simply placeholders that plugins can use to insert code into the <head> and footer of the theme. Often times, they use these action hooks to insert things like CSS or Analytics code. They create a function that generates the code, and then “hook” that function to either wp_head or wp_footer.
Examples:
add_action('wp_head', 'nitwit'); // action hook: wp_head
add_action('wp_footer', 'nitwit'); // action hook: wp_footer
If we want to use all pages (and not posts) as an action hook, we have to use the IF statement, like this:
function nitwit () {
if( is_page() ) {
wp_enqueue_script('shittycode', THEME . '/scripts/calendar/alert.js', array('jquery'), '1.0', false);
}}
add_action( 'wp_head', 'nitwit', 1 );
We can filter this a bit more, so that the function is only available on the page which id is 30:
function nitwit () {
if( is_page(30) ) {
wp_enqueue_script('shittycode', THEME . '/scripts/calendar/alert.js', array('jquery'), '1.0', false);
}}
If we want to use the function on multiple pages, we have to use a range:
range( 1, 10 )
means, all page ID's between 1 and 10 use the function, pages with other ID's do not.
function nitwit () {
if( is_page(range(30,35)) ) {
wp_enqueue_script('shittycode', THEME . '/scripts/calendar/alert.js', array('jquery'), '1.0', false);
}}
We can check this by changing the alert.js file like this:
$(document).ready(function() {
$('#mydiv').html('hello world!');
});
Add this line to page.php
<div id="mydiv"></div>
Now, any page with ID's between 30 and 35 will show the line 'hello world!'
