how do i use wp_enqueue_script? - php

OK, so this is in my functions.php file: (the following is the edited version to utilize cool's answer below. I'm leaving the original afterward:
function mdg_setup_scripts() {
wp_register_script( 'hoverIntent', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
wp_enqueue_script( 'hoverIntent' );
wp_register_script( 'mdMenuAnimation', get_bloginfo('template_url').'/js-custom/mdMenuAnimation.js', array( 'jquery' ));
wp_enqueue_script( 'mdMenuAnimation' );
}
add_action( 'wp_enqueue_scripts', 'mdg_setup_scripts' );
Here's what I originally had:
function mdg_setup_scripts() {
wp_register_script( 'hoverIntent',
get_bloginfo( 'template_url' ) . '/js/hoverIntent.js',
array( 'jquery' ),
false,
true );
wp_register_script( 'mdMenuAnimation',
get_bloginfo('template_url') . '/js/mdMenuAnimation.js',
array( 'jquery', 'hoverIntent' ),
false,
false );
if (!is_admin()) {
wp_enqueue_script( 'mdMenuAnimation' );
}
}
add_action( 'init', 'mdg_setup_scripts' );
The js files are present in the indicated folder.
But no JavaScript at all is loading on the front end.
I'm doing something wrong, but what?
Do I need to register jquery (I thought WP had jquery in it, though)?
Do I need to separate the enqueue call? Do I need to add something to my header.php?

You dont need to add jquery. If it is not added, and if your custom script depends on it (like you wrote in code) it will be added by wordpress.
This code will work (i just tested it) but..
Instead of this:
if (!is_admin()) {
wp_enqueue_script( 'mdMenuAnimation' );
}
wordpress recomed that you use hooks:
Wordpress-codex: Use the wp_enqueue_scripts action to call this function, or admin_enqueue_scripts to call it on the admin side.
So it should be something like this:
function my_scripts_method() {
wp_register_script( 'somehover', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
wp_enqueue_script( 'somehover' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
Wordpress-codex: by using the wp_enqueue_scripts hook (instead of the init hook which many articles reference), we avoid registering the alternate jQuery on admin pages, which will cause post editing (amongst other things) to break after upgrades often.

Related

How do I echo out particular wp_register_script or wp_enqueue_script version and id in WordPress?

I want to echo out the version of a particular wp_register_script or wp_enqueue_script on the frontend.
Like Superfish JS registered via theme core files:
wp_register_script( 'superfish', GENESIS_JS_URL . "/menu/superfish{$this->suffix}.js", array( 'jquery', 'hoverIntent' ), '1.7.10', true );
wp_register_script( 'superfish-args', apply_filters( 'genesis_superfish_args_url', GENESIS_JS_URL . "/menu/superfish.args{$this->suffix}.js" ), array( 'superfish' ), PARENT_THEME_VERSION, true );
And, I want to get the version of these JS reflected on frontend via:
add_filter('the_content','addToEndOfPost');
function addToEndOfPost($content) {
if (is_single()){
return $content . '<p>Version of Superfish JS:</p>';
}
return $content;}
Even if I could get the separate script as a variable, I might be able to use a delimiter to separate out the version and id of these scripts. I'm trying WordPress development for the first time, so please help.
To load a script with condition you need to use wp_enqueue_scripts action - https://developer.wordpress.org/reference/functions/wp_register_script/
add_action('wp_enqueue_scripts','my_custom_scripts');
function my_custom_scripts() {
wp_register_script( 'superfish', GENESIS_JS_URL . "/menu/superfish{$this->suffix}.js", array( 'jquery', 'hoverIntent' ), '1.7.10', true );
wp_register_script( 'superfish-args', apply_filters( 'genesis_superfish_args_url', GENESIS_JS_URL . "/menu/superfish.args{$this->suffix}.js" ), array( 'superfish' ), PARENT_THEME_VERSION, true );
//Add your condition and enqueue script
if (is_single()){
wp_enqueue_script('superfish');
}
}

How to conditionally load a JavaScript script in `functions.php` for WordPress?

Been trying to enqueue script for the archive page, to no avail.
I've checked the source code for HTML (Ctrl + U), but the script doesn't load.
I've tried using is_post_type_archive(), still no.
I've put the enqueue_script in a different function as well.
function theme_resources() {
wp_enqueue_script( 'infiniteSlider', get_template_directory_uri() . '/javascript/infiniteSlider.js', array( 'ui' ), '1.0.0', true );
if (is_archive()) {
wp_enqueue_script( 'infiniteScroll', get_template_directory_uri() . '/javascript/infiniteScroll.js', array( ... ) );
}
}
add_action('wp_enqueue_scripts', 'theme_resources');
wp_enqueue_script( 'infiniteSlider', get_template_directory_uri() . '/javascript/infiniteSlider.js', array( 'ui' ), '1.0.0', true );
i would venture to say that 'ui' script does not exist. since this is a dependency, the whole script is not being loaded. probably you mean 'jquery' instead?
is_archive() is correct. but you had array(...) in your code, which actually throws an error. this should work:
if (is_archive()) {
wp_enqueue_script( 'infiniteSlider', get_template_directory_uri() . '/javascript/infiniteSlider.js', array( 'jquery' ), '1.0.0', true );
}
It's not a custom post type, just the default page for displaying blog posts, so instead of is_archive(), I should use is_home(), like so:
if ( is_home() ) {...}

How to add JavaScript inline in WordPress using wp_add_inline_script?

I want to add inline JavaScript to my WordPress frontend using wp_add_inline_script.
According to the docs it should work (as long as I add a script to the queue, which is true in my case)!
Code will only be added if the script in already in the queue.
An equivalent snippet for styles instead of scripts works as expected (see my second snippet below)!
My current snippet which doesn't work:
add_action( 'wp_enqueue_scripts', function()
{
wp_register_script( 'test-handle', '', array(), null );
wp_enqueue_script( 'test-handle' ) );
wp_add_inline_script( 'test-handle', 'does not work' )
} );
The following snippet works as aspected but is for styles instead:
add_action( 'wp_enqueue_scripts', function()
{
wp_register_style( 'test-handle', '', array(), null );
wp_enqueue_style( 'test-handle' ) );
wp_add_inline_style( 'test-handle', 'works. is what I want.' )
} );
I'd like to use wp_add_inline_script because of its advantages (eg synchronize order, etc)...
While the function wp_add_inline_script was already implemented it didn't work in WordPress version 4.x. Since WordPress version 5.x its working just as expected.
add_action( 'wp_enqueue_scripts', function()
{
wp_register_script( 'test-handle', '', array(), null );
wp_enqueue_script( 'test-handle' ) );
wp_add_inline_script( 'test-handle', 'does work since WP 5.x' )
} );

Calling jQuery from functions.php in Wordpress

I want to call a jQuery from my functions.php in WordPress.
I'm using Divi Theme. When I add the script directly into Divi theme it works. But I want to add it to the functions.php form my child theme and this is where the problem start.
Functions.php
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
Script:
jQuery(document).ready(function(){
jQuery('#cta-section').waypoint(function() {
jQuery('#cta-section').toggleClass('animate-cta');
}, {offset: '80%'});
});
Can somebody point out what I'm doing wrong?
Seems like you're missing the jQuery Waypoint JS file
Try enqueueing the jquery waypoint js file BEFORE using your custom script
function coolbanner_enqueue() {
wp_enqueue_script( 'jquery-waypoint', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', [ 'jquery' ] );
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery-waypoint' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
you can find the jquery waypoint github repo here...
https://github.com/imakewebthings/waypoints
Additionally the url I used below is from a cdn which you can find here:
https://cdnjs.com/libraries/waypoints
if you feel more comfortable using the github's url
then just substitute the cdn url with the following...
https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js
Solution:
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts-js', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );

Why are bootstrap classes not working after I import enqueue it in my functions.php file using WordPress?

In my child theme functions PHP file, I have the following code:
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
// IMPORT BOOTSTRAP CDN
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
// END BOOTSTRAP IMPORT
?>
However, when I try to use a simple bootstarp class like col-sm-4 I do not get the column layout on my page. It seems, bootstrap is not being loaded. I'm using the optimizer theme, but I don't think that matters.
In any event. I've scoured there many WP support forums and to no avail have I had success. Custom css is working in my child theme style file but this is not working in the functions file. Where am I going wrong?
You are missing 2 things....
You function my_scripts_enqueue doesn't seem to be called anywhere, just call it inside your enqueue_child_theme_styles function or add another hook function call for it.
In '://maxcdn.bootstrapcdn.com/boo... we don't start with : just with // ;-)
Your code should look something like this...
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
my_scripts_enqueue();
}
// IMPORT BOOTSTRAP CDN
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}

Categories