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
Related
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.
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 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 );
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');
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.