I am trying to enqueue my jQuery files but it still doesn't work. In my assets/functions.js I have the following debugging code:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("yup");
} else {
// jQuery is not loaded
alert("derp");
}
}
I am calling this file with this script, located at the top of the file:
if ( ! defined( 'TS_FILE' ) ) { define( 'TS_FILE', __FILE__ ); }
function ts_scripts() {
wp_enqueue_script('jquery');
wp_register_script( 'functions', plugins_url( 'assets/functions.js', TS_FILE ), array('jquery'));
wp_enqueue_script('functions');
}
add_action( 'wp_enqueue_scripts', 'ts_scripts' );
But I am not getting any alerts when I load the page. There are no error messages in my console.
Help?!
Related
The wp_enqueue_script operates fine as a stand alone script in the main function file. However, when this is placed inside a loop_start function (isolated to run on a specific page), the javascript it calls does not load. Both the 'page name' and post ID work in is_page( ) validated by $message.
add_action( 'loop_start', 'run_on_config_page' );
function run_on_config_page() {
if ( is_page( 1885 ) ) {
function config_scripts() {
wp_enqueue_script( 'config_scripts', get_stylesheet_directory_uri() . '/js/myscript.js', array( 'jquery' ) , '0.0.1', time(), true );
}
add_action( 'wp_enqueue_scripts', 'config_scripts' );
// $message = "Load Script Here";
// echo "<script type='text/javascript'>alert('$message');</script>";
}
}
You are doing it wrong. Use this code to fulfill your requirement.
function config_scripts() {
if( is_page( 1885 ) ){
wp_enqueue_script( 'config_scripts', get_stylesheet_directory_uri() . '/js/myscript.js', array( 'jquery' ) , '0.0.1', time(), true );
}}
add_action( 'wp_enqueue_scripts', 'config_scripts' );
I did a search and found this method here using wp_add_inline_script. And it works.
But what if I wanted to keep my initialization script into an other .js file? That's what I wanted at first. How I can I load correctly?
I tried this but the loading of my init-fancybox must be too early because I get an error.
(my init-fancybox script is not the problem because it works when it is loaded correctly using wp_add_inline_script)
function fancybox_enqueues() {
wp_register_script( 'fancybox', get_theme_file_uri( '/assets/js/jquery.fancybox.min.js' ), array('jquery'), '3.5.7', true);
wp_register_script( 'init-fancybox', get_theme_file_uri( '/assets/js/init-fancybox.js' ), array('jquery','fancybox'), '1.0', true);
wp_register_style( 'fancybox-css', get_theme_file_uri( '/css/jquery.fancybox.min.css' ), '1.0');
if ( is_singular( 'item' ) ) {
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'fancybox' );
wp_enqueue_script ('init-fancybox');
wp_enqueue_style( 'fancybox-css' );
}
}
add_action( 'wp_enqueue_scripts', 'fancybox_enqueues');
Here is the error I get TypeError: $ is not a function
And here is the init-fancybox.js
$('[data-fancybox="single-item__gallery"]').fancybox({
buttons : [
"zoom",
"share",
//"slideShow",
"fullScreen",
//"download",
"thumbs",
"close"
],
thumbs : {
autoStart : false
}
});
It seems jQuery is not loaded by the time your code is running. Try adding the following function around it to make sure jQuery exists before your code runs:
jQuery(document).ready(function ($) {
// Your function goes here:
$('[data-fancybox="single-item__gallery"]').fancybox({
buttons: [
"zoom",
"share",
//"slideShow",
"fullScreen",
//"download",
"thumbs",
"close"
],
thumbs: {
autoStart: false
}
});
});
The function code below outputs a referral to a javascript file called addons.min.js I believe this is done in line 6 of the code.
Because I don't want to edit the plugins core addons.min.js file I have created my-custom-addons.min.js file and added it to the wp-footer (via wp_enqueue_script).
All good but I can't remove the original referral.
I tried to use
// Remove plugins core addons.min.js
function iw_wcpa_script_remove() {
if ( is_product() ) {
wp_dequeue_script( 'woocommerce-addons' );
wp_deregister_script( 'woocommerce-addons' );
}
}
add_action( 'wc_quick_view_enqueue_scripts', 'iw_wcpa_script_remove', 99 );
// Add custom addons.min.js
function iw_wcpa_script_add() {
if ( is_product() ) {
wp_enqueue_script( 'iw-woocommerce-addons', get_site_url() . '/wp-content/uploads/iwebbers/js/addons.min.js' );
}
}
add_action( 'wp_footer', 'iw_wcpa_script_add' );
But addons.min.js still keeps coming up in my HTML output like this:
<script type='text/javascript' src='https://iwebbers.com/wp-content/plugins/woocommerce-product-addons/assets/js/addons.min.js'></script>
I'm completely in the dark here how to get this done.
Anyone?
If it helps, here's the live page to see the whole HTML source:
https://iwebbers.com/samenstellen/gratis-website-pakket
And just to be clear, I can't edit the function below because it's plugins core.
public function addon_scripts() {
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
wp_register_script( 'accounting', WC()->plugin_url() . '/assets/js/accounting/accounting' . $suffix . '.js', array( 'jquery' ), '0.4.2' );
wp_enqueue_script( 'woocommerce-addons', plugins_url( basename( dirname( dirname( __FILE__ ) ) ) ) . '/assets/js/addons' . $suffix . '.js', array( 'jquery', 'accounting' ), '1.0', true );
Try to hook wp_enqueue_scripts instead of wp wp_footer with the high priority value:
add_action( 'wc_quick_view_enqueue_scripts', 'iw_wcpa_custom_script', 99 );
UPDATE
replace wocoomerce-addons with woocommerce-addons in your iw_wcpa_script_remove
Try this:
function remove_product_addons_js() {
wp_dequeue_script( 'woocommerce-addons' );
}
add_action( 'wp_print_footer_scripts', 'remove_product_addons_js', 0 );
I have learned to include scripts the following way.
add_action( 'wp_enqueue_scripts', 'woomps_ajax_frontend' );
function woomps_ajax_frontend() {
wp_enqueue_script( 'woomps_sub_slider', plugins_url( '/js/woomps-ajax-frontend.js', dirname(__FILE__)) , array('jquery'), '1.0', true );
$parameters = array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
);
wp_localize_script( 'woomps_sub_slider', 'subpost', $parameters);
}
This should fire of my jQuery:
jQuery( document ).on( 'click', '.button_sub_chooser', function() {
alert("test");
jQuery.ajax({
url : subpost.ajax_url,
type : 'post',
data : {
action : 'woomps_update_subscription_chooser',
},
success : function( response ) {
jQuery('#button_sub_chooser').effect( "bounce", "slow" );
}
});
return false;
})
When this is clicked:
<a id="button_shake" class="button_sub_chooser" '.$woomps_ajax_url.'>VElg denne</a>
But wp_enqueue_scripts does not fire of the jQuery. If i just call the function like this woomps_ajax_frontend() it will fire. Why does it work when called like a function and not through wp_enqueue_scripts?
Can you please try this plugin_dir_url(__FILE__) insted of plugins_url().
add_action( 'wp_enqueue_scripts', 'woomps_ajax_frontend' );
function woomps_ajax_frontend() {
wp_enqueue_script( 'woomps_sub_slider', plugin_dir_url(__FILE__). 'js/woomps-ajax-frontend.js' , array('jquery'), '1.0', true );
$parameters = array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
);
wp_localize_script( 'woomps_sub_slider', 'subpost', $parameters);
}
The PHP code was put in an included (required_once) file which i had enqueue the following way.
function woomps_scripts() {
require_once ('includes/woomps-ajax-sub-chooser.php');
} //END woomps_scripts
add_action('wp_enqueue_scripts','woomps_scripts');
If I put the require_once ('includes/woomps-ajax-sub-chooser.php'); outside this function woomps_scripts it got included.
So it seems I cant do wp_enqueue_scripts two times down.
I created custom home page whose name is "front-page.php" and than added another page with custom css and JS files like this in the header.php file:
<?php
function my_styles_method() {
if (is_page_template('front-page.php'==TRUE){
// Register the style like this for a theme:
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/marquee.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
enter code here
// Register the style like this for a theme:
if (is_page_template('our-story.php'==TRUE) {
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/main.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
?>
Now, I face the following issues in this one:
when I run this in WordPress I get this error message:
Parse error: syntax error, unexpected '{' in
C:\wamp\www\wordpress_update\wp-content\themes\twentytwelve\header.php
on line 32
I have created custom templates on both the pages .
Thank you in advance.
Try this
<?php
function my_styles_method() {
if (is_page_template('front-page.php')==TRUE){
// Register the style like this for a theme:
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/marquee.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
//enter code here
// Register the style like this for a theme:
if (is_page_template('our-story.php')==TRUE) {
wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/main.css');
// enqueue the stule
wp_enqueue_style( 'my-custom-style' );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
?>
// if (is_page_template('front-page.php'==TRUE) should be if (is_page_template('our-story.php')==TRUE)