Recently I found the following javascript from another thread on this forum;
var $content=$('div.leg_ol');
var $links=$('.leg_test').hover(function(){
var index= $links.index(this);
$content.stop(true,true).hide().eq(index).fadeIn();
},function(){
$content.stop(true,true).hide().eq(index);
});
(I would link to the OP, but unfortunately have lost the page).
JSFIDDLE: https://jsfiddle.net/mfyctwvs/1/
The code does exactly what I want to do - in theory, now I am pretty much completely new to js, so this is a very tricky area for me - please bear with me on this.
When I post the code in functions.php it causes my whole site to stop working, I assume because it cannot read it or there is some conflict?
So my first thought, looking at jsfiddle was the js version and that it is specified as no wrap in . If I change either of these the code does not work.. ..so 1. Am I making a newb mistake trying to include incompatible js in my functions.php (probably yes?) & 2. is there a straightforward change I can make to get this working in my functions.php?
I have been searching on this for hours & am sure that I could get this working with some adjustments?
FYI; Functions.php
<?php// Set path to WooFramework and theme specific functions
$functions_path = get_template_directory() . '/functions/';
$includes_path = get_template_directory() . '/includes/';
// Don't load alt stylesheet from WooFramework
if ( ! function_exists( 'woo_output_alt_stylesheet' ) ) {
function woo_output_alt_stylesheet () {}
}
// WooFramework
require_once ( $functions_path . 'admin-init.php' ); // Framework Init
if ( get_option( 'woo_woo_tumblog_switch' ) == 'true' ) {
//Enable Tumblog Functionality and theme is upgraded
update_option( 'woo_needs_tumblog_upgrade', 'false' );
update_option( 'tumblog_woo_tumblog_upgraded', 'true' );
update_option( 'tumblog_woo_tumblog_upgraded_posts_done', 'true' );
require_once ( $functions_path . 'admin-tumblog-quickpress.php' ); // Tumblog Dashboard Functionality
}
/*-----------------------------------------------------------------------------------*/
$includes = array(
'includes/theme-options.php', // Options panel settings and custom settings
'includes/theme-functions.php', // Custom theme functions
'includes/theme-actions.php', // Theme actions & user defined hooks
'includes/theme-comments.php', // Custom comments/pingback loop
'includes/theme-js.php', // Load JavaScript via wp_enqueue_script
'includes/theme-plugin-integrations.php', // Plugin integrations
'includes/sidebar-init.php', // Initialize widgetized areas
'includes/theme-widgets.php', // Theme widgets
'includes/theme-advanced.php', // Advanced Theme Functions
'includes/theme-shortcodes.php', // Custom theme shortcodes
'includes/woo-layout/woo-layout.php', // Layout Manager
'includes/woo-meta/woo-meta.php', // Meta Manager
'includes/woo-hooks/woo-hooks.php' // Hook Manager
);
// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );
foreach ( $includes as $i ) {
locate_template( $i, true );
}
// Load WooCommerce functions, if applicable.
if ( is_woocommerce_activated() ) {
locate_template( 'includes/theme-woocommerce.php', true );
}
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/
add_action( 'init', 'woo_custom_move_navigation', 10 );
function woo_custom_move_navigation () {
// Remove main nav from the woo_header_after hook
remove_action( 'woo_header_after','woo_nav', 10 );
// Add main nav to the woo_header_inside hook
add_action( 'woo_header_inside','woo_nav', 10 );
} // End woo_custom_move_navigation()
/* Testing stuff for mobile */
function woo_load_responsive_meta_tags () {
$html = '';
$html .= "\n" . '<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->' . "\n";
$html .= '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />' . "\n";
echo $html;
} // End woo_load_responsive_meta_tags()
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'user-scripts',
get_template_directory_uri() . '/functions/user-scripts.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
?>
In wordpress you in ject your javascript files into your theme using the wordpress api/hooks. the method you want is wp_enqueue_script. Here are the docs
It's used like this:
add_action('wp_enqueue_scripts', 'addScript');
function addScript() {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
}
Depending on the version of php you have, you can inline the function:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
From the script provided by #atmd the following code worked.
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
A precondition required was that the script was located in the /functions/ folder of the theme used. The original code posted works perfectly on the site.
Related
I'm creating a plugin for WordPress, when I use below code in plugin main file it load js in <head>, it works fine.
wp_enqueue_script ( 'custom-script', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4- rtl/4.6.0-1/js/bootstrap.bundle.min.jsf');
but when I use it inside a function (for example show_form() ):
function show_form()
{
wp_enqueue_script ( 'custom-script', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4- rtl/4.6.0-1/js/bootstrap.bundle.min.js');
require_once 'form.php';
}
it loads script at the bottom of the page (before </body>).
what's wrong with my code?
I need to enqueue script inside the <head> only when my form.php loads.
I know I can load script directly in form.php but i need to load script via wp_enqueue_script
When show_form() is called, you're already too far along in the execution path to go back and insert code into the head section.
Any JS you want to load should be fired on the wp_enqueue_scripts action. wp_enqueue_script() can be used to determine whether code loads in the head or footer of the site.
If there are two points at which you can insert code using wp_enqueue_script() and it's being inserted into the footer even though you haven't specified that, it's because you're calling enqueue script after the head scripts have been inserted.
You need to either determine whether a form is shown on the page earlier in the loading of the page or use your JS in a way that can be supported across the site.
Example:
function wpse_enqueue_form_scripts() {
if ( has_form() ) { // EXAMPLE... You need a way of determining this
wp_enqueue_script( 'custom-script', 'js url...');
}
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_form_scripts' );
You're not following best practices.
Any script should be added to the Wordpress firing sequence via wp_enqueue_scripts() firing hook.
Fires when scripts and styles are enqueued.
Source # https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
Furthermore, when you take a look at the wp_enqueue_script() function CODEX page you can see that it accept a bunch of arguments including a $in_footer variable.
$in_footer
(bool) (Optional) Whether to enqueue the script before instead of in the . Default false.
As a reminder you can also set a $deps variable.
$deps
(string[]) (Optional) An array of registered script handles this script depends on. Default value: array().
The proper way to enqueue for example Bootstrap 4.6.0 (in your case) is to add a dependency to Jquery and load both of them in the footer, not the header. As most of the time any related js action are unnecessary before the DOM as been fully loaded. In the following example I will be enqueuing both Jquery and Bootstrap in the footer, tho you can alway change true to false.
As you're using a CDN you should be checking is the source is available and have a fallback locally waiting. you should also include integrity and crossorigin attributes.
add_action( 'wp_enqueue_scripts', 'plugin_scripts' );
function plugin_scripts() {
/**
* Deregister Wordpress jquery core version.
* #link https://developer.wordpress.org/reference/functions/wp_deregister_script/
*/
wp_deregister_script( 'jquery' );
/**
* Register then enqueue jquery_js (Bootstrap 4.6.x required).
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback.
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload prefetch' <link> and required attributes to bootstrap_bundle_js.
* Filters the HTML link tag of an enqueued style & add required attributes.
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$url_jquery_js = 'https://code.jquery.com/jquery-3.5.1.slim.min.js';
$ver_jquery_js = '3.5.1-slim-min';
$tst_jquery_js = #fopen( $url_jquery_js, 'r' );
$hnd_jquery_js = 'jquery_js';
if ( $tst_jquery_js !== false )
wp_register_script( $hnd_jquery_js, $url_jquery_js, [], $ver_jquery_js, true );
else
wp_register_script( $hnd_jquery_js, trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.slim.min.js', [], $ver_jquery_js, true );
wp_enqueue_script( $hnd_jquery_js );
add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
function data_jquery_js( $tag, $handle, $src ) {
if ( $handle === 'jquery_js' ) {
$integrity = 'sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj';
$tag = str_replace(
[ "<script",
"></script>", ],
[ "<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>", ],
$tag
);
};
return $tag;
};
/**
* Register then enqueue bootstrap_bundle_js (Bootstrap 4.6.x required).
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback.
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload prefetch' <link> and required attributes to bootstrap_bundle_js.
* Filters the HTML link tag of an enqueued style & add required attributes.
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$url_bootstrap_bundle_js = 'https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js';
$ver_bootstrap_bundle_js = '4.6.0';
$tst_bootstrap_bundle_js = #fopen( $url_bootstrap_bundle_js, 'r' );
$hnd_bootstrap_bundle_js = 'bootstrap_bundle_js';
if ( $tst_bootstrap_bundle_js !== false )
wp_register_script( $hnd_bootstrap_bundle_js, $url_bootstrap_bundle_js, [ 'jquery_js', ], $ver_bootstrap_bundle_js, true );
else
wp_register_script( $hnd_bootstrap_bundle_js, trailingslashit( get_template_directory_uri() ) . 'assets/js/bootstrap.bundle.min.js', [ 'jquery_js', ], $ver_bootstrap_bundle_js, true );
wp_enqueue_script( $hnd_bootstrap_bundle_js );
add_filter( 'script_loader_tag', 'data_bootstrap_bundle_js', 10, 3 );
function data_bootstrap_bundle_js( $tag, $handle, $src ) {
if ( $handle === 'bootstrap_bundle_js' ) {
$integrity = 'sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns';
$tag = str_replace(
[ "<script",
"></script>", ],
[ "<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>", ],
$tag
);
};
return $tag;
};
};
I'm trying to enqueue scripts & styles from CDN in Wordpress so I can use this JSfiddle within the footer of my code:
https://jsfiddle.net/wcepbL45/
I can see the 6 scripts are loading in my Page Source, but the JSfiddle I'm trying to embed in the footer isn't working.
I am guessing some of the new scripts are clashing with the original ones, or do I need to be enqueuing these in my footer.php file?
So atm, my functions.php has this code:
<?php
function load_stylesheets()
{
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css',
array(), false, 'all');
wp_enqueue_style('bootstrap');
wp_register_style('style', get_template_directory_uri() . '/style.css',
array(), false, 'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function include_jquery()
{
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.1.3.min.js', '', 1, true);
add_action('wp_enqueue_scripts', 'jquery');
}
add_action('wp_enqueue_scripts', 'include_jquery');
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', 1, true);
wp_enqueue_script('customjs');
}
add_action('wp_enqueue_scripts', 'loadjs');
// Next 6 styles are new (I can see them when i view page source, but I think they are clashing with something, as the JSfiddle I'm trying to input isnt working.
wp_register_style( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('Bootstrap');
wp_register_style( 'Bootstrap_Theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
wp_enqueue_style('Bootstrap_Theme');
wp_register_style( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css' );
wp_enqueue_style('Bootstrap_Slider');
wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');
wp_register_script( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('Bootstrap');
wp_register_script( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', null, null, true );
wp_enqueue_script('Bootstrap_Slider');
//
Where am I going wrong?
Multiple mistakes here, You should restrict the use of your scripts to everything but the admin panel. You're not checking if the CDN is actually working, and you have no fallback. get_template_directory_uri() should not be used for the loading the style.css file, instead use get_stylesheet_uri(). You're using multiple functions for no reason and loading. your call for wp_register_style and wp_register_style are outside any functions.
I will just paste what i'm using to load and enqueue scripts and style, feel free to copy pasta! Hope this will help you, don't forget to thumbs up the answer if it does.
<?php add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue bootstrap bundle js (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_bundle_js = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js', 'r' );
if ( $test_bootstrap_bundle_js !== false ) {
wp_register_script( 'bootstrap_bundle_js', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js' );
} else {
wp_register_script( 'bootstrap_bundle_js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' );
};
wp_enqueue_script( 'bootstrap_bundle_js' );
/**
* Register then enqueue bootstrap css (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_css = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css', 'r' );
if ( $test_bootstrap_css !== false ) {
wp_register_style( 'bootstrap_css', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' );
} else {
wp_register_style( 'bootstrap_css', get_stylesheet_uri() . '/assets/css/bootstrap.min.css' );
};
wp_enqueue_style( 'bootstrap_css' );
/**
* Register then enqueue style css
*/
wp_register_style( 'style_css', get_stylesheet_uri(), array( 'bootstrap_css' ) );
wp_enqueue_style( 'style_css' );
};
}; ?>
EDIT 1: Read more about the wp_enqueue_script # https://developer.wordpress.org/reference/functions/wp_enqueue_script/
EDIT 2: Bootstrap 5 as a range plug and play component # https://v5.getbootstrap.com/docs/5.0/forms/range/ (same for Bootstrap 4)
EDIT 3: When you enqueue your scripts you can set up dependencies restricting the load and enqueue of your script
<?php
/**
* Register then enqueue script js
*/
wp_register_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'bootstrap_bundle_js', 'jquery_js' ) );
wp_enqueue_script( 'script_js' ); ?>
Inside the wp_register_script we specify an array of script to load our new script after array( 'bootstrap_bundle_js', 'jquery_js' ). It uses the handles defined upon registering the style/script wp_register_script( 'script_js', ... here 'script_js' is the handle.
In response to your last comment, we can do something like this:
For your JS scripts:
(1) jquery.min.js,
eg: wp_enqueue_script( 'jquery_js', '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' );
(2) bootstrap.min.js with dependency towards (1),
eg: wp_enqueue_script( 'bootstrap_js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery_js' ) );
(3) bootstrap-slider.min.js with dependency towards (1) & (2),
eg: wp_enqueue_script( 'bootstrap_slider_js', '//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', array( 'jquery_js', 'bootstrap_js' ) );
(4) script.js with dependency towards (1) & (2) & (3),
eg: wp_enqueue_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery_js', 'bootstrap_js', 'bootstrap_slider_js' ) );
For your CSS scripts:
(1) bootstrap.min.css, eg: (same here but with wp_enqueue_style)
(2) bootstrap-slider.css with dependency towards (1),
(3) style.css with dependency towards (1) & (2),
I am trying to substitute 1 javascript file from the parent theme.
I am using the child theme of this theme and i modified 1 *.js file
When i load the file in the parent theme directory all is fine
When i load the file from the child theme all it does is finding the file in the parent theme
I tried different codes found here and on the internet but all failed
I tried
/*
* Use any number above 10 for priority as the default is 10
* any number after 10 will load after
*/
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
wp_dequeue_script( 'Theme-custom' );
#wp_deregister_script( 'Theme-custom' );
// Now the parent script is completely removed
/*
* Now enqueue you child js file, no need to register if you are not
* doing conditional loading
*/
wp_register_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
//Now we have done it correctly
}
and i tried
// dequeue your required script file
function your_child_theme_js_file_dequeue() {
wp_dequeue_script( 'Theme-custom' );
}
add_action( 'wp_print_scripts', 'your_child_theme_js_file_dequeue', 1 );
// enqueue your required script file
function your_child_theme_js_file_override(){
wp_enqueue_script( 'Theme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery' ) );
}
add_action('wp_enqueue_scripts', 'your_child_theme_js_file_override');
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method()
{
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ));
}
and i tried
add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
wp_dequeue_script('Theme-custom');
wp_enqueue_script('Theme-custom', get_template_directory_uri().'/js/custom.js', array('jquery'),20151110,true);
}
I tried even more but will not post
I just want the child theme to load this JS file instead of the original one that comes with the theme
the Handle should stay the same as other files in the theme will also look for this js file
The parent theme registers the JS file like this
wp_register_script('theme-custom', trailing(get_template_directory_uri()) . 'js/custom.js', array('jquery', 'theme-dd', 'type'), false, true);
Just fixed it myself
Just forgot to register the script correct
See code below
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
wp_dequeue_script( 'custom.js' );
wp_deregister_script( 'custom.js' );
// Now the parent script is completely removed
/*
* Now enqueue you child js file, no need to register if you are not
* doing conditional loading
*/
wp_register_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery', 'theme-dd', 'type'), false, true );
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
//Now we have done it correctly
}
I have a series of plugins that only load their respective javascript files, based on a page name, as follows:
function getnames_scripts() {
global $post;
if ( in_array( $post->post_name, array( 'somepage', 'anotherpage') ) ){
wp_enqueue_script(
'getnames-script',
plugin_dir_url(__FILE__) . "assets/getnames.js",
array('jquery'),
'1.0',
true
);
}
}
How can I check to load the javascript when only the hostname is present, i.e. 192.0.0.50, instead of 192.0.0.50/somepage/?
if($_SERVER['HTTP_HOST']=='192.0.0.50'){
// wow man
}else{
// Oh man
}
Im trying to remove all script from a certain page temp so i added this above the doctype
<?php
wp_dequeue_script( 'jquery' );
wp_deregister_script( 'jquery' );
?>
but its not working. any suggestions
This script will remove ALL scripts from your page, not just jquery
public function dequeue_all_scripts(){
// Replace the conditional check below with your own...
if (is_singular('myposttype')){
global $wp_scripts;
$scripts = $wp_scripts->registered;
foreach ( $scripts as $script ){
wp_dequeue_script($script->handle);
}
}
}
add_action('wp_print_scripts', 'dequeue_all_scripts');
You will need to add this code to your functions.php
function dequeue_script() {
if ( is_page_template('page-pop.php') ) {
wp_dequeue_script( 'jquery' );
wp_deregister_script( 'jquery' );
}
}
add_action( 'wp_print_scripts', 'dequeue_script', 100 );
The if ( is_page_template('page-pop.php') ) {} statement is used here to define the page template to which a function will be coupled. You just need to change the template name (page-pop.php) to the template you want to use it on