I'm trying to dequeue a minified js file from wordpress parent theme.
Can't seem to work out how to dequeue and then enqueue my own custom js file from child theme.
Here is my code:
add_action( 'wp_enqueue_scripts', 'my_remove_scripts', 20 );
function my_remove_scripts(){
wp_dequeue_script( 'custom' );
}
add_action('wp_enqueue_scripts', 'my_add_scripts');
function my_add_scripts(){
wp_enqueue_script('custom-child', get_template_directory_uri() . '/js/custom'.$js_minify_prefix.'.js', array('jquery'), THEME_VERSION, true);
}
The script in the parent theme is enqueued like this:
wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom'.$js_minify_prefix.'.js', array('jquery'), THEME_VERSION, true);
Is there something I'm missing in the code or is there a special way of dequeueing/enqueueing minified scripts?
Any help would be appreciated!! :)
There is just one mistake in your code. You are dequeuing and then enqueuing the same file.
Use this code:
add_action( 'wp_enqueue_scripts', 'my_remove_scripts', 20 );
function my_remove_scripts(){
wp_dequeue_script( 'custom' );
}
add_action('wp_enqueue_scripts', 'my_add_scripts');
function my_add_scripts(){
wp_enqueue_script('custom-child', get_stylesheet_directory_uri() . '/js/custom.min.js', array('jquery'), 1.0, true);
}
get_stylesheet_directory_uri() is the key here. It returns the path of the child theme. Also, I have removed the $js_minify_prefix variable from the code as it is not required.
Related
I have a wordpress theme and It's work good.
Every things are working , images , bootstrap CDN , styke.css . but I have a big problem! my Javascript file is not working!!!!!
I write the JS codes in other file and I inclde the file in header.php file but It's not working.
If you have a true answer pleas help me.
Within your WordPress child theme functions.php file you would add the function:
wp_enqueue_script()
Example:
function add_child_theme_scripts() {
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/child-theme-scripts-folder/your-script.js', array ( 'jquery' ), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'add_child_theme_scripts' );
Ref: https://developer.wordpress.org/themes/basics/including-css-javascript/#scripts
Add this code in your function file and edit it.
//Funtion that add script in header
function my_scripts() {
wp_enqueue_script( 'unique-script-name-id', get_template_directory_uri() . '/js/script-name.js', array(), '', false);
}
//Add action hook to call function
add_action( 'wp_enqueue_scripts', 'my_scripts' );
I'm trying to load a custom js file into a child theme. I have set up a folder within the child themes directory on FTP that contains a js file, but it does not work. Below is my code i used to enque the file.
<?php
function theme_name_scripts() {
wp_enqueue_script('myscript', /js/public.js);
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>
Replace
wp_enqueue_script('myscript', /js/public.js);
With
wp_enqueue_script('myscript', '/js/public.js');
if you want to load js file into child theme for Wordpress your code should like this.
<?php
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/public.js', array( 'jquery' ), '1.0', true);
}
?>
I was wondering why my other scripts wont work but the bootstrap.js is working. I have here my code for my functions.php on calling the scripts.
<?php
/*Linking of CSS Child Theme to Parent Theme + JavaScript*/
function theme_add_bootstrap()
{
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/css/custom.css' ); <!--Working Javascript -->
wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri().'/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri().'/js/custom.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-easy-min-js', get_stylesheet_directory_uri().'/js/jquery.easy.min.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-1-js', get_stylesheet_directory_uri().'/js/jquery-1.11.0.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
The other 3 scripts (custom.js , jquery.easy.min.js, and jquery-1.11.0.js) are working fine in LOCALHOST. however when I uploaded my wordpress site. this scripts are no longer functioning. can someone help with this? by the way this 3 scripts are for PAGE SCROLLING.
Maybe you misspelled 'jquery' as 'jqeury'?
wp_enqueue_script( 'jquery-1-js', get_stylesheet_directory_uri().'/js/jqeury-1.11.0.js', array( 'jquery' ) );
But if that wasn't misspelled, then maybe you're loading jQuery twice, because jqeury-1.11.0.js looks like jQuery itself. In that case, get rid of this line. Wordpress has it's own jQuery, which you loaded the first time you put array('jquery') as a dependency in a wp_enqueue_script statement.
Add jQuery before bootstrap. Bootstrap depends on it
I think you have to place jquery at the top of scripts so it will work fine
Ok, I may be an absolute idiot but I can't seem to figure this out... In my functions.php file I have this function that enqueues my style sheets and script files:
function load_style_sheets() {
wp_enqueue_script( 'jquery');
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/includes/css/bootstrap.min.css', '', '','all' );
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/includes/js/bootstrap.min.js', '', array( 'jquery' ), true );
wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/includes/js/custom.js', '', array( 'jquery' ), true );
}
add_action('wp_enqueue_scripts', 'load_style_sheets');
I intentionally have the last value of my scripts set to 'true', because I need my script to load in after the body content, however- they don't appear to be loading.
Basically what I want to happen is everytime I declare a div with the class of "ornament", my JS file runs this:
// add divider line ornaments
function addLineOrnaments() {
$(".ornament").append('<img src="img/divider-glyph.png" alt="" />');
}
addLineOrnaments();
When testing this on a static HTML site I had no problems, so I'm guessing I'm doing something wrong in WordPress.
I have noticed that Wordpress loads jQuery in 'safe' mode, where you can't use $ as a shorthand. Try using
jQuery(".ornament").append('<img src="img/divider-glyph.png" alt="" />');
instead
This is how I call my custom script in functions.php my child theme:
<?php
/*Functions file for child theme*/
define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_stylesheet_directory_uri() . '/inc/' );
require_once dirname( __FILE__ ) . '/inc/options-framework.php';
function mychildtheme_setup() {
show_admin_bar(false);
wp_register_script( 'main', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), false, true);
wp_enqueue_script( 'main' );
}
add_action('after_setup_theme', 'mychildtheme_setup');
add_action( 'wp_enqueue_scripts', 'mychildtheme_setup', 10000 );
?>
But when I look in source code I see that my main.js loads before contact-form.js and I want my main.js script loads after that one.
How can I change the order so my script loads last of all scripts?
Need answer still?Similar question has been answered here: https://wordpress.stackexchange.com/questions/114473/wp-enqueue-script-how-to-change-loading-order-of-scripts.
Keyword is $deps.