I am trying to add a custom JavaScript file in my child theme. After a few hours, I finally got it working with the following code:
wp_register_script( 'resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js'
);
wp_enqueue_script( 'resources-page' );
I don't understand why this would fail (the resources_page.js doesn't get called at all) if I do it like this (with the rest of the params):
wp_register_script( 'resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js',
array( 'jquery '),
NULL,
true
);
wp_enqueue_script( 'resources-page' );
Can someone explain?
Try it this way, packing the whole thing into a function which you then put into an action hook:
function register_scripts() {
wp_register_script('resources-page',
get_stylesheet_directory_uri() . '/layout/js/resources_page.js',
array( 'jquery'),
NULL,
true
);
wp_enqueue_script( 'resources-page' );
}
add_action('wp_enqueue_scripts', 'register_scripts');
Related
I'm developing an elementor widget. The widget font view js is working fine but the elementor edit page js effects are not working. I'm using some hooks to try. Now, What is the perfect way to js loading for elementor edit page.
WP Plugin Link:- https://github.com/Ferdaussk/image-compare.git
Problem Video:- https://drive.google.com/file/d/1lOy1TEHUszLXEYvdJueZQrOuqsaax-nX/view?usp=sharing
All assets enqueue hooks which I used
public function bwdic_all_assets_for_the_public(){
wp_enqueue_script( 'bwdic_compare_the_main_one_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-one.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_two_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-two.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_three_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-three.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_four_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-four.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_five_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-five.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'bwdic_compare_the_mainel_six_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-six.js', array('jquery'), '1.0', true );
$all_css_js_file = array(
'bwdic_compare_main_css' => array('bwdic_path_define'=>BWDIC_ASFSK_ASSETS_PUBLIC_DIR_FILE . '/css/style.css'),
);
foreach($all_css_js_file as $handle => $fileinfo){
wp_enqueue_style( $handle, $fileinfo['bwdic_path_define'], null, '1.0', 'all');
}
}
public function bwdic_all_assets_for_elementor_editor_admin(){
wp_enqueue_script( 'bwdic_compare_admin_the_main_one_js', plugin_dir_url( __FILE__ ) . 'assets/admin/js/custom-one.js', array('jquery'), '1.0', true );
$all_css_js_file = array(
'bwdic_compare_admin_icon_css' => array('bwdic_path_admin_define'=>BWDIC_ASFSK_ASSETS_ADMIN_DIR_FILE . '/icon.css'),
);
foreach($all_css_js_file as $handle => $fileinfo){
wp_enqueue_style( $handle, $fileinfo['bwdic_path_admin_define'], null, '1.0', 'all');
}
}
public function bwdic_all_assets_for_the_frontens_scripts(){
wp_enqueue_script( 'bwdic_compare_admin_the_main_one_jsaa', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom-one.js', array('jquery'), '1.0', true );
}
public function __construct() {
// For public assets
add_action('wp_enqueue_scripts', [$this, 'bwdic_all_assets_for_the_public']);
// For fontend scripts
add_action( 'elementor/frontend/init', [ $this, 'bwdic_all_assets_for_the_frontens_scripts' ] );
// For Elementor Editor
add_action('elementor/editor/before_enqueue_scripts', [$this, 'bwdic_all_assets_for_elementor_editor_admin']);
}
You should check your console in chrome developer tools.
Sometimes there is bug when elementor editor doesn't apply ur javascript changes in real time. If you check console, you will know what I mean
I'm trying to develop my own theme and i've run in the following issue:
I use WP-RECIPE and I can't use the button "print recipe", but if I install other theme that button is working. So I thought it's because of the plugin, so I installed something random like 'social share', same output. What's wrong?
PRINT
This is my functions.php for styles and scripts:
<?php
//JAVASCRIPT SI CSS
function pezona_enqueue_styles() {
wp_enqueue_style(
'layout',
get_stylesheet_directory_uri() . '/assets/css/layout.css',
array(),
false,
'all'
);
wp_enqueue_style(
'stil',
get_stylesheet_directory_uri() . '/assets/css/stil.css',
array(),
false,
'all'
);
wp_enqueue_style(
'stil-responsive',
get_stylesheet_directory_uri() . '/assets/css/stil-responsive.css',
array(),
false,
'all'
);
}
add_action( 'wp_enqueue_scripts', 'pezona_enqueue_styles' );
function pezona_enqueue_scripts() {
wp_enqueue_script(
'main-js',
get_stylesheet_directory_uri() . '/assets/javascript/lazysizes.min.js',
array(),
'1.0.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'pezona_enqueue_scripts' );
?>
Any ideea guys? thanks.
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
}