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.
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' );
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 this code:
add_action( 'wp_enqueue_scripts', '_enqueue_home_scripts', 20 );
function _enqueue_home_scripts() {
wp_enqueue_script( 'infite_scroll', get_bloginfo( 'stylesheet_directory' ) . '/js/vendor/jquery-3.1.1.min.js', array( 'jquery' ), '3.1.1', true );
wp_enqueue_script( 'bower_port', get_bloginfo( 'stylesheet_directory' ) . '/js/bower.iostope.masonry.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'infite_scroll', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.infinitescroll.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_style( 'custom_css', get_bloginfo( 'stylesheet_directory' ) .'/css/custom.css');
wp_enqueue_style( 'custom_js', get_bloginfo( 'stylesheet_directory' ) .'/js/custom/javascript.js');
wp_register_script('mobile-numbers', get_bloginfo( 'stylesheet_directory' ) .'/js/custom/mobile-numbers.js');
wp_enqueue_script('mobile-numbers', get_bloginfo( 'stylesheet_directory' ) .'/js/custom/mobile-numbers.js');
}
The problem I am having is with mobile-numbers script:
jQuery(document).ready(function($) {
console.log("script loaded");
jQuery( ".nav-toggle-collapsed" ).on( "click", function() {
console.log("clicked");
});
});
Nevermind the click code, I am just trying to get it to print the "script-loaded" message and it isn't, so it appears the script isn't being loaded at all. The first time I tested the script (not in its current form) it loaded, and then after that it wouldn't change. I removed the minified code from the old script, but that didn't help.
UPDATE
The only related error I have in the console is this - I think it is coming from the minified script with my script in it:
header-35f05689-0.min.js:9 Currently is loaded jQuery version 3.1.1
which is too low for OptimizePress. Please check if you're using
WordPress version 3.5 or higher or contact customer support.
UPDATE
I downloaded the latest jquery and put the file in the same directory as the old one and changed the line:
wp_enqueue_script( 'infite_scroll', get_bloginfo( 'stylesheet_directory' ) . '/js/vendor/jquery-3.1.1.min.js', array( 'jquery' ), '3.1.1', true );
to:
wp_enqueue_script( 'infite_scroll', get_bloginfo( 'stylesheet_directory' ) . '/js/vendor/jquery-3.3.1.min.js', array( 'jquery' ), '3.3.1', true );
My wordpress knowledge is pretty low and I am in desperate need of help on adding some jQuery functions to a wordpress child theme.
I basically want to add this effect to my front-page.php
I somewhat understand how to use the functions.php in order to enqueue my scripts.
Here is what my functions.php file looks like
<?php
function enqueue_scripts() {
wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'global' );
if ( is_page( 'front-page' ) ) { // example page
wp_enqueue_script( 'js name', 'js name', 'js name' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
?>
As of right now it of course does not work.
Any help is much appreciated. Thanks.
Try this:
function yourtheme_enqueue_scripts() {
wp_register_script( 'js_name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js_name_2', get_template_directory_uri() . '/myfile2.js', array( 'jquery' ), '1.0', true );
wp_register_script( 'js_name_3', get_template_directory_uri() . '/myfile3.js', array( 'jquery' ), '1.0', true );
if ( is_front_page() ) {
wp_enqueue_script( 'js_name' );
wp_enqueue_script( 'js_name_2' );
wp_enqueue_script( 'js_name_3' );
}
}
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );
In your themes root folder (same folder as functions.php), create new file called myfile.js. This is the file you refer to in the function above.
As you theme grows in size, it's better to organise your files. You can do this by creating subfolders, like this:
Create a folder named assets (name could be anything);
Inside assets create three new folders called js, css and images;
Put your files in the right folders;
Update your function to follow the right path to your folders;
e.g.
wp_register_script( 'js_name', get_template_directory_uri() . '/assets/js/myfile.js', array( 'jquery' ), '1.0', true );
Note: You don't have to close ?> in your functions.php.
Said website: http://sebastiangraz.com/projects/kbt
I wanted to add a script (FitScroll) to my wordpress template: http://codepen.io/ozgursagiroglu/full/tdpDr
This is how I enqueued it:
function kbt_scripts() {
wp_enqueue_style( 'kbt-style', get_stylesheet_uri() );
wp_enqueue_script( 'kbt-fitscroll', get_template_directory_uri() . '/js/fitscroll.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-js', get_template_directory_uri() . '/js/js.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-validate', get_template_directory_uri() . '/js/jquery.validate.min.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'kbt-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'kbt-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
I called the script with a noconflict wrapper
jQuery(document).ready(function ($) {
$('body').FixedScroll({
elements: '.module', // required
delay: 500 // millisecond, optional
});
});
I made sure I don't load jQuery twice. I've checked everywhere.
I still get this message
Uncaught TypeError: Object [object Object] has no method 'FixedScroll'
Any ideas? Thank you
Its FitScroll not FixedScroll try this,
jQuery(document).ready(function ($) {
$('body').FitScroll({ // FitScroll not FixedScroll
elements: '.module', // required
delay: 500 // millisecond, optional
});
});
jQuery(document).ready(function ($) {
$('body').FitScroll({
elements: '.module', // required
delay: 500 // millisecond, optional
});
});
You need to use Fitscroll instead of FixedScroll:
jQuery(document).ready(function ($) {
$('body').FitScroll({
elements: '.module', // required
delay: 500 // millisecond, optional
});
});
Next time, if you confused whether the name is correct or not, just digging directly into your plugin which is in your case located at the URL: http://sebastiangraz.com/projects/kbt/wp-content/themes/kbt/js/fitscroll.js?ver=20120206
And from this you can figure out the correct name of the function which is this:
$.fn.FitScroll = function(opt){
// Plugin code here
}