I'm developing an elementor widget as a plugin. The font view js working fine but the backend (Elementor edit page) js are not working. I'm using hooks (admin_enqueue-scripts, wp_enqueue_scripts, elementor/editor/before_enqueue_scripts, elementor/elements/categories_registered, elementor/widgets/widgets_registered, elementor/editor/after_enqueue_scripts, elementor/frontend/init). Which is perfect the js loading for elementor font page. Now, My js effects are not working on Elementor edit page. How can I solve the problem?
The enqueue code:- `public function bwdic_admin_editor_scripts() {
add_filter( 'script_loader_tag', [ $this, 'bwdic_admin_editor_scripts_as_a_module' ], 10, 2 );
}
public function bwdic_admin_editor_scripts_as_a_module( $tag, $handle ) {
if ( 'bwdic_the_compare_editor' === $handle ) {
$tag = str_replace( '<script', '<script type="module"', $tag );
}
return $tag;
}
private function include_widgets_files() {
require_once( __DIR__ . '/widgets/bwdic-compare.php' );
}
public function bwdic_register_widgets() {
// Its is now safe to include Widgets files
$this->include_widgets_files();
// Register Widgets
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\BWDMEcompare() );
}
private function add_page_settings_controls() {
require_once( __DIR__ . '/page-settings/image-compare-manager.php' );
new Page_Settings();
}
// Register Category
function bwdic_add_elementor_widget_categories( $elements_manager ) {
$elements_manager->add_category(
'bwd-image-compare-category',
[
'title' => esc_html__( 'BWD Image Compare', 'bwd-image-compare' ),
'icon' => 'eicon-person',
]
);
}
public function bwdic_all_assets_for_the_public(){
wp_enqueue_script( 'bwdic_compare_the_main_js', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom.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_the_main_js_admin', plugin_dir_url( __FILE__ ) . 'assets/public/js/custom.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 __construct() {
// For public assets
add_action('wp_enqueue_scripts', [$this, 'bwdic_all_assets_for_the_public']);
// For Elementor Editor
add_action('elementor/editor/before_enqueue_scripts', [$this, 'bwdic_all_assets_for_elementor_editor_admin']);
// Register Category
add_action( 'elementor/elements/categories_registered', [ $this, 'bwdic_add_elementor_widget_categories' ] );
// Register widgets
add_action( 'elementor/widgets/widgets_registered', [ $this, 'bwdic_register_widgets' ] );
// Register editor scripts
add_action( 'elementor/editor/after_enqueue_scripts', [ $this, 'bwdic_admin_editor_scripts' ] );
$this->add_page_settings_controls();
}`
I try to loading the .js files to my page by use wp_enqueue_script in functions.php file.
Its loading the .css files but not the .js
function s_scripts() {
wp_enqueue_style( 's-style', get_stylesheet_uri() );
wp_enqueue_style( 's-styles', get_template_directory_uri() . '/dist/styles/main-rtl.min.css');
wp_enqueue_style( 's-tmp_styles', get_template_directory_uri() . '/dist/styles/tmpstyle.css');
wp_enqueue_script( 's-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 's-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
wp_enqueue_script( 's-js', get_template_directory_uri() . '/dist/scripts/main.min.js', array(), time(), true );
wp_localize_script('s-js-ajax', 'ajax', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'current_obj' => get_queried_object()
));
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 's_scripts' );
You enqueue your scripts in the footer, check if wp_footer(); function exists in your theme.
Try to load scripts in header (remove true from last argument). It will attach script to wp_head()
Also check wp_localize_script documentation: https://developer.wordpress.org/reference/functions/wp_localize_script/
It should start something like wp_localize_script('s-js'
Ok so I am working on a website that has its own custom plugin. I wanted to get all the js files for this plugin to load into the footer as it was slowing the website down. I know how to get them to load into the footer but when I do this the js files seem to not be working anymore, even though I can see them in the footer when I inspect the page. Anybody know what could be causing this?
function enqueue_stairbuilder_js()
{
wp_register_script('simplemodal', plugins_url('js/jquery.simplemodal.1.4.4.min.js', __FILE__), array( 'jquery' ), "1.4.4", true);
wp_register_script('paper', plugins_url('js/paper.js', __FILE__), array( 'jquery' ),"1.0.1", true);
wp_register_script('prices', plugins_url('js/prices.js', __FILE__), array( 'jquery' ), "", true);
wp_register_script('popup', plugins_url('js/popup.js', __FILE__), array( 'jquery' ), "1.0.3", true);
wp_register_script('printelement', plugins_url('js/printElement.js', __FILE__), array( 'jquery' ), "1.0.3", true);
wp_register_script('stairbuilder', plugins_url('js/stairbuilder.js', __FILE__), array( 'jquery' ),"1.0.3", true);
wp_register_script('drawing', plugins_url('js/drawing.js', __FILE__), array( 'jquery' ),"1.0.3", true);
wp_register_script('deserialise', plugins_url('js/deserialise.js', __FILE__), array( 'jquery' ),"1.0.3", true);
wp_enqueue_script('simplemodal');
wp_enqueue_script('paper');
wp_enqueue_script('prices');
wp_enqueue_script('popup');
wp_enqueue_script('printelement');
wp_enqueue_script('stairbuilder');
wp_enqueue_script('drawing');
wp_enqueue_script('deserialise');
}
add_action( 'wp_enqueue_scripts', 'enqueue_stairbuilder_js' );
here's the contents of my functions file incase I have done something wrong here which is causing this.
<?php
//custom gallery image size, cropped
add_image_size( 'gallery-thumb', 720, 720, true );
//removing toolbar on front end
function remove_toolbar(){
if ( is_blog_admin() ) {
return true;
}
remove_action( 'wp_head', '_admin_bar_bump_cb' );
return false;
}
add_filter( 'show_admin_bar', 'remove_toolbar' );
//replacing default jQuery with new version
function update_jQuery(){
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', '3.2.1');
}
add_action('wp_enqueue_scripts', 'update_jQuery');
//MY SCRIPTS
function my_script() {
wp_enqueue_script('custom_js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'my_script');
//BOOTSTRAP
function bootstrap(){
wp_register_script('bootstrap_js', get_template_directory_uri(). '/bootstrap/js/bootstrap.min.js', array('jquery'), '3.3.6', true);
wp_enqueue_script('bootstrap_js');
wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', '3.3.7',true);
}
add_action( 'wp_enqueue_scripts', 'bootstrap');
function my_styles(){
wp_enqueue_style('theme_styles', get_template_directory_uri(). '/css/my_styles.css', true);
}
add_action('wp_enqueue_scripts', 'my_styles');
//magnific img popup
function magnific_popup(){
wp_register_script('magnific_js', get_template_directory_uri(). '/js/magnific_popup.js', array('jquery'), '', true);
wp_enqueue_style('magnific_css', get_template_directory_uri(). '/css/magnific_popup.css');
wp_enqueue_script('magnific_js');
}
add_action('wp_enqueue_scripts', 'magnific_popup');
/*NAV MENUS*/
function register_my_menus() {
register_nav_menus(array(
'head_nav' => __( 'Primary' ),
'foot_nav' => __( 'Secondary' ),
'side_bar_menu' => __( 'side_bar' )
) );
}
add_action( 'init', 'register_my_menus' );
//enqueuing default style sheet
wp_enqueue_style('default_style', get_stylesheet_uri());
require get_template_directory() . '/woo_hooks.php';
?>
Try it like this example:
function wpdocs_theme_name_scripts() {
wp_enqueue_script( 'xxx', 'https://cdnjs.cloudflare.com/ajax/libs/xxx/2.2.0/xxx.js', array('jquery'), 3.3, true);
wp_enqueue_script( 'xxy', 'https://cdnjs.cloudflare.com/ajax/libs/xxy/2.2.0/xxy.js', array('jquery'), 3.3, true);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Try to clear your cache. The codex also recommends If you are using the plugins_url() function in a file that is nested inside a subdirectory of your plugin directory, you should use PHP's dirname() function:
So try this.
function enqueue_stairbuilder_js()
{
wp_register_script('simplemodal', plugins_url('js/jquery.simplemodal.1.4.4.min.js', dirname(__FILE__)), array( 'jquery' ), "1.4.4", true);
wp_register_script('paper', plugins_url('js/paper.js', dirname(__FILE__)), array( 'jquery' ),"1.0.1", true);
wp_register_script('prices', plugins_url('js/prices.js', dirname(__FILE__)), array( 'jquery' ), "", true);
wp_register_script('popup', plugins_url('js/popup.js', dirname(__FILE__)), array( 'jquery' ), "1.0.3", true);
wp_register_script('printelement', plugins_url('js/printElement.js', dirname(__FILE__)), array( 'jquery' ), "1.0.3", true);
wp_register_script('stairbuilder', plugins_url('js/stairbuilder.js', dirname(__FILE__)), array( 'jquery' ),"1.0.3", true);
wp_register_script('drawing', plugins_url('js/drawing.js', dirname(__FILE__)), array( 'jquery' ),"1.0.3", true);
wp_register_script('deserialise', plugins_url('js/deserialise.js', dirname(__FILE__)), array( 'jquery' ),"1.0.3", true);
wp_enqueue_script('simplemodal');
wp_enqueue_script('paper');
wp_enqueue_script('prices');
wp_enqueue_script('popup');
wp_enqueue_script('printelement');
wp_enqueue_script('stairbuilder');
wp_enqueue_script('drawing');
wp_enqueue_script('deserialise');
}
add_action( 'wp_enqueue_scripts', 'enqueue_stairbuilder_js' );
i need to add a custom script in my child theme in wordpress.
This is the content of my child theme :
themes
|meteorite
|style.css
|meteorite-child
|function.php
|style.css
|js
|mngclk.js
my function.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles()
{
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
wp_register_script( 'new-script', get_stylesheet_directory_uri() . '/js/mngclk.js', 'jquery', "1", true);
wp_enqueue_script( 'new-script' );
I tried multiple change but i did not manage to inclute my custom js script
This is the proper example
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Follow this link for more info
enter link description here
add below function in child theme function.php
function add_child_theme_scripts() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), '1.0' );
/* wp_enqueue_script( 'new-script', get_stylesheet_directory_uri() . '/js/mngclk.js', array('jquery'), '1.0', true ); */
}
add_action( 'wp_enqueue_scripts', 'add_child_theme_scripts' );
add below function in child theme function.php file
<?php
function myscript() {
?>
<script type="text/javascript">
function mngClk(str){
document.location.href= decodeURIComponent(escape(window.atob(str)));
}
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );
?>
The weird problem I am facing is that the hl_admin_script wont load in footer. But it load work when I change the $in_footer to false
/*
Load Admin Scripts only on custom-post-type post type.
*/
function hl_enqueue_admin() {
global $post;
$screen = get_current_screen();
if ($screen->post_type !== 'custom-post-type') {
return;
}
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-widget');
wp_enqueue_script('jquery-ui-sortable');
wp_enqueue_script('jquery-ui-accordion');
wp_enqueue_style( 'hl_jquery-ui', plugins_url( 'css/hl-jquery-ui.css', __FILE__ ) , array(), '1.0.0', false );
wp_enqueue_script( 'hl_admin_script', plugins_url( '/js/hl_admin_script.js', __FILE__ ) , array('jquery','jquery-ui-core', 'jquery-ui-sortable','jquery-ui-accordion'), '2.0.0', true );
// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'hl_admin_script', 'ajax_object',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'post_id' => $post->ID,
));
}
add_action( 'admin_enqueue_scripts', 'hl_enqueue_admin' ,1000 ,0 );