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),
Related
I am using the Understrap Child theme to build my site. All my CSS files are working properly but my JS files are not working.
I have the following code in my Html
<script src="/js/jquery.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/animsition.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>
My enqueue.php file has the following code
<?php
/**
* Understrap enqueue scripts
*
* #package Understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
if ( ! function_exists( 'understrap_scripts' ) ) {
/**
* Load theme's JavaScript and CSS sources.
*/
function understrap_scripts() {
// Get the theme data.
$the_theme = wp_get_theme();
$theme_version = $the_theme->get( 'Version' );
$bootstrap_version = get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' );
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
// Grab asset urls.
$theme_styles = "/css/theme{$suffix}.css";
$theme_scripts = "/js/theme{$suffix}.js";
if ( 'bootstrap4' === $bootstrap_version ) {
$theme_styles = "/css/theme-bootstrap4{$suffix}.css";
$theme_scripts = "/js/theme-bootstrap4{$suffix}.js";
}
$css_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_styles );
wp_enqueue_style( 'understrap-styles', get_template_directory_uri() . $theme_styles, array(), $css_version );
wp_enqueue_script( 'jquery' );
$js_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_scripts );
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . $theme_scripts, array(), $js_version, true );
wp_enqueue_script( 'carousel-scripts', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), $theme_version, true );
wp_enqueue_script( 'popup-scripts', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array(), $theme_version, true );
wp_enqueue_script( 'wow-scripts', get_template_directory_uri() . '/js/wow.min.js', array(), $theme_version, true );
wp_enqueue_script( 'pagepiling-scripts', get_template_directory_uri() . '/js/jquery.pagepiling.min.js', array(), $theme_version, true );
wp_enqueue_script( 'smoothscroll-scripts', get_template_directory_uri() . '/js/smoothscroll.js', array(), $theme_version, true );
wp_enqueue_script( 'validate-scripts', get_template_directory_uri() . '/js/jquery.validate.min.js', array(), $theme_version, true );
wp_enqueue_script( 'jquery-scripts', get_template_directory_uri() . '/js/jquery.min.js', array(), $theme_version, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
} // End of if function_exists( 'understrap_scripts' ).
add_action( 'wp_enqueue_scripts', 'understrap_scripts' );
I have copied the inc folder from parent theme to the child theme and modified my functions.php file as follows
<?php
/**
* Understrap Child Theme functions and definitions
*
* #package UnderstrapChild
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
// UnderStrap's includes directory.
$understrap_inc_dir = get_stylesheet_directory() . '/inc';
// Array of files to include.
$understrap_includes = array(
'/theme-settings.php', // Initialize theme default settings.
'/setup.php', // Theme setup and custom theme supports.
'/widgets.php', // Register widget area.
'/enqueue.php', // Enqueue scripts and styles.
'/template-tags.php', // Custom template tags for this theme.
'/pagination.php', // Custom pagination for this theme.
'/hooks.php', // Custom hooks.
'/extras.php', // Custom functions that act independently of the theme templates.
'/customizer.php', // Customizer additions.
'/custom-comments.php', // Custom Comments file.
'/class-wp-bootstrap-navwalker.php', // Load custom WordPress nav walker. Trying to get deeper navigation? Check out: https://github.com/understrap/understrap/issues/567.
'/editor.php', // Load Editor functions.
'/deprecated.php', // Load deprecated functions.
);
// Load WooCommerce functions if WooCommerce is activated.
if ( class_exists( 'WooCommerce' ) ) {
$understrap_includes[] = '/woocommerce.php';
}
// Load Jetpack compatibility file if Jetpack is activiated.
if ( class_exists( 'Jetpack' ) ) {
$understrap_includes[] = '/jetpack.php';
}
// Include files.
foreach ( $understrap_includes as $file ) {
require_once $understrap_inc_dir . $file;
}
/**
* Removes the parent themes stylesheet and scripts from inc/enqueue.php
*/
function understrap_remove_scripts() {
wp_dequeue_style( 'understrap-styles' );
wp_deregister_style( 'understrap-styles' );
wp_dequeue_script( 'understrap-scripts' );
wp_deregister_script( 'understrap-scripts' );
}
add_action( 'wp_enqueue_scripts', 'understrap_remove_scripts', 20 );
/**
* Enqueue our stylesheet and javascript file
*/
function theme_enqueue_styles() {
// Get the theme data.
$the_theme = wp_get_theme();
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
// Grab asset urls.
$theme_styles = "/css/child-theme{$suffix}.css";
$theme_scripts = "/js/child-theme{$suffix}.js";
wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . $theme_styles, array(), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . $theme_scripts, array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
/**
* Load the child theme's text domain
*/
function add_child_theme_textdomain() {
load_child_theme_textdomain( 'understrap-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'add_child_theme_textdomain' );
/**
* Overrides the theme_mod to default to Bootstrap 5
*
* This function uses the `theme_mod_{$name}` hook and
* can be duplicated to override other theme settings.
*
* #param string $current_mod The current value of the theme_mod.
* #return string
*/
function understrap_default_bootstrap_version( $current_mod ) {
return 'bootstrap5';
}
add_filter( 'theme_mod_understrap_bootstrap_version', 'understrap_default_bootstrap_version', 20 );
/**
* Loads javascript for showing customizer warning dialog.
*/
function understrap_child_customize_controls_js() {
wp_enqueue_script(
'understrap_child_customizer',
get_stylesheet_directory_uri() . '/js/customizer-controls.js',
array( 'customize-preview' ),
'20130508',
true
);
}
add_action( 'customize_controls_enqueue_scripts', 'understrap_child_customize_controls_js' );
What I have in my Chrome developer tools is this
I have my js files in the js folder of Understrap child theme and not the one under src folder.
you have to use get_stylesheet_directory_uri() instead of get_template_directory_uri()
get_template_directory_uri return always main Theme Uri.
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'm trying to enqueue javascript and css in WordPress. I have written the following code but it is not working and no style or css is being added to my theme.
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri() . '/css/persian-datepicker.css', array(), '1.1', 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), '1.1', true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
I think it will be added but it showing you cache version CSS and js which is blank maybe
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri(). '/css/persian-datepicker.css', array(), null, 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), null, true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
use this code to run updated js and CSS file ( non-cache )
OR
it is already added to your site but the path is wrong so it will throw an error in console.
you can see in the console using the F12 key
please check and let me know what is your status.
OR
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
if your $handle has already existed with other style or script so it will not be added to your theme or plugin so be careful about this and add the unique name of $handle
Note :- Add Unique name of $handle or add your own prefix before name of
$handle like custom_jquery this is our custom jquery $handle name
Refrence site :- WP Codex wp_enqueue_script
I have a website in WordPress. It's have a site preloader (Queryloader2). But when I go to my site its load first site after then loader. But it should load loader first. If I add it in header part then it works well. I am adding in header below this coded:
See the site here (now queryloader added in footer)
<head>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo("template_directory"); ?>/js/jqueryloader2.min.js"></script>
</head>
But when I click on any image then its blank with black color.
Now my code for this site is:
functions.php: (just one functions part)
if (is_home() || is_archive()) {
wp_enqueue_script( 'sliphover', get_template_directory_uri() . '/js/jquery.sliphover.min.js', array ( 'jquery' ), null , true);
wp_enqueue_script( 'queryloader2', get_template_directory_uri() . '/js/queryloader2.min.js', array ( 'jquery' ), null , true);
}elseif (is_single()) {
wp_enqueue_style('fancy-box', get_template_directory_uri() . '/css/jquery.fancybox.css', '');
wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/js/jquery.fancybox.js', array ( 'jquery' ), null , true);
wp_enqueue_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), null , true);
My one question is: how can add custom jQuery in header of WordPress site? And it just for a specific page (home).
Thanks in advance.
Try This :
Replace false with true.
So js file will add in head.
if (is_home() || is_archive()) {
wp_enqueue_script( 'sliphover', get_template_directory_uri() . '/js/jquery.sliphover.min.js', array ( 'jquery' ), null , false);
wp_enqueue_script( 'queryloader2', get_template_directory_uri() . '/js/queryloader2.min.js', array ( 'jquery' ), null , false);
}elseif (is_single()) {
wp_enqueue_style('fancy-box', get_template_directory_uri() . '/css/jquery.fancybox.css', '');
wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/js/jquery.fancybox.js', array ( 'jquery' ), null , false);
wp_enqueue_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), null , false);
I'm learning to building my own WordPress plugin and it nearly works.
Here's part of the code which I feel is the most relevant:
(The plugin is supposed to create an splash screen on start where an Vimeo-clip is supposed to start playing automatically).
define( 'COLORBOX_VERSION', '1.4.24' );
define( 'BVSSP_VIMEO_VERSION', '1.0' );
define( 'BVSSP_CSS_VERSION', '1.0' );
add_action( 'wp_enqueue_scripts', 'bvssp_colorbox_js' );
add_action('wp_footer', 'bvssp_data_display');
function bvssp_colorbox_js() {
wp_register_style( 'bvssp-style', plugins_url('/css/colorbox.css',__FILE__), array(), BVSSP_CSS_VERSION );
wp_enqueue_style( 'bvssp-style' );
wp_enqueue_script( 'jquery' );
wp_register_script( 'bvssp-colorbox', plugins_url('/js/jquery.colorbox-min.js',__FILE__), array('jquery','jquery-ui-sortable'), COLORBOX_VERSION );
wp_enqueue_script( 'bvssp-colorbox' );
wp_register_script( 'bvssp-vimeo', plugins_url('/js/bvssp-vimeo.js',__FILE__), array('jquery','jquery-ui-sortable','bvssp-colorbox'), BVSSP_VIMEO_VERSION );
wp_enqueue_script( 'bvssp-vimeo' );
}
function bvssp_data_display() {
echo '<a style="display:none;" class="vimeo" href="http://player.vimeo.com/video/67189599?title=0&byline=0&portrait=0&badge=0&autoplay=1">vimeo</a>';
}
The problem I have is that the content found in the bvssp-vimeo.js is not executed. This is what's inside that file:
<script>
jQuery(document).ready(function($) {
$(".vimeo").colorbox({iframe:true, innerWidth:800, innerHeight:709, open: true});
});
</script>
If I paste the code in this file directly in the theme, everything works great. But I want to execute the JS-code from the file instead. How can I do this?
Kind regards
Johan (now very tired) :)
don't use HTML tags in javascript files :
jQuery(function($) {
$(".vimeo").colorbox({iframe:true, innerWidth:800, innerHeight:709, open: true});
});