I'm in the process of creating my first WordPress theme and I'm trying to integrate the TweenLite library but it's not working. I'm not sure where the error lies.
First in my child theme's function.php file I have:
add_action('wp_enqueue_scripts', 'custom_theme_scripts');
function custom_theme_scripts() {
wp_register_script('GSAP', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js', true);
wp_register_script('Animations', get_template_directory_uri() . '/animation.js', true);
}
The first script is the TweenLite and the second is my custom script I'm using test out of it worked or not.
This is my code for my test script:
var logo = document.getElementById("logo");
TweenLite.to(logo, 1.5, { width: 500 });
the wp_register_script is not enough.
You must enqueue it after registering with wp_enqueue_script();
add_action('wp_enqueue_scripts', 'custom_theme_scripts');
function custom_theme_scripts() {
wp_register_script('GSAP','http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js', true);
wp_register_script('Animations', get_template_directory_uri() . '/animation.js', true);
wp_enqueue_script('GSAP');
wp_enqueue_script('Animations');
}
Related
In WordPress, I have a template file called vertical-page.php.
When a page has this template applied, I want to load in a specific stylesheet and script.
I have tried to use is_page_template(), but it doesn't work. When I view the source of the page, the script and styles are not being loaded?
<?php
add_action('wp_enqueue_scripts', 'theme_scripts');
function theme_scripts() {
wp_enqueue_style('bootstrap-grid-style', get_template_directory_uri() . '/assets/css/bootstrap-grid.css', array(), STYLE_VERSION);
if ( is_page_template( 'vertical-page' ) ) {
wp_enqueue_style('tmp-override', get_template_directory_uri() . '/assets/css/override.css', array(), STYLE_VERSION);
wp_enqueue_script('overrides-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'),STYLE_VERSION, true);
}
?>
Try putting the add_action after the function
If your page template file is something.php and it's location is the main folder of the active theme, you need to pass an argument to the is_page_template() function like this: is_page_template('something.php')
To add js-cookie (https://github.com/js-cookie/js-cookie) into my Wordpress plugin I´m using this code:
add_action('wp_print_scripts', 'drsm_import_cookies_plugin');
if (!function_exists('drsm_import_cookies_plugin')) {
function drsm_import_cookies_plugin() {
echo '<script type="module">import * as Cookies from "'.plugin_dir_url(dirname(__FILE__)).'vendor/js/js.cookie.min.js"</script>';
}
}
The wordpress review team says:
Why is the code being included like that? It's an odd usage of script modules.
What would be a better way to import this script with module into my Wordpress plugin?
Can you please try this.
paste this code into your wp plugin file
function drsm_import_cookies_plugin() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery', plugin_dir_url(dirname(__FILE__)) . '/vendor/js/js.cookie.min.js', array( 'jquery' ) );
}
add_action( 'admin_enqueue_scripts', 'drsm_import_cookies_plugin' );
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Thanks.
I can't link .js code to functions.php file .
I can't work with add_action and wp-enqueue-script. and I not know correctly where i will add function in functions.php .
my previous code :
function wpb_hook_javascript() {
wp_register_script('read-more-button', get_template_directory_uri() . '/assets/js/read-more-button.js', array('jquery'), true);
wp_enqueue_script('read-more-button');
}
add_action('wp_enqueue-scripts',' wpb_hook_javascript',999);
I have created a wordpress plugin that creates various widgets. To keep page load time down, I only want to enqueue the associated scripts when the widget is being used.
To do this I created a function like this:
function enqueue_lightbox(){
wp_enqueue_style(
SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-fancybox-css',
'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css',
array(),
SKIZZAR_SHORTCODES__VERSION
);
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox' );
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox-media' );
}
And in my widget class I call it like this:
enqueue_lightbox();
The issue I have is that I have 2 widgets sharing the same piece of code, so I'd like to create a statement that says, if it hasn't been enqueued elsewhere already, enqueue it.
How would I write this function?
You can use wp_script_is function to check the file and load it like this
$handle = 'fluidVids.js';
$list = 'enqueued';
if (wp_script_is( $handle, $list )) {
return;
} else {
wp_register_script( 'fluidVids.js', plugin_dir_url(__FILE__).'js/fluidvids.min.js');
wp_enqueue_script( 'fluidVids.js' );
}
Setting the $in_footer parameter to true in wp_enqueue_script loads a script in the footer. This is great if I'm adding a new script. However, WordPress already provides a version of jQuery by default and this is enqueued in the document head.
How can I move the jQuery provided by WordPress from the header to the footer?
You need to de-register the existing query and re-register it to load in the footer.
function jquery_in_footer() {
if (!is_admin()) {
wp_deregister_script('jquery');
// load the local copy of jQuery in the footer
wp_register_script('jquery', home_url(trailingslashit(WPINC) . 'js/jquery/jquery.js'), false, null, true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'jquery_in_footer');
Bear in mind that if you have any other scripts enqueued that depend on jQuery and are not loaded in the footer, WordPress will still load jQuery in the header to satisfy that dependency.
(adapted from http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/)
Edit: If you really want to get crazy, you could modify the WP_Scripts object directly, but then you're dependent on the implementation never changing. I imagine that would change before they even thought of moving jquery.js' location in wp-includes :)
But just for fun…
function load_jquery_footer() {
global $wp_scripts;
$wp_scripts->in_footer[] = 'jquery';
}
add_action('wp_print_scripts', 'load_jquery_footer');
Maybe the defer attribute will help. There is a good article on this topic.
I use the following code for convinient nonblocking loading of any scripts, not just jQuery.
// Defer scripts.
function dt_add_defer_attribute( $tag, $handle ) {
$handles = array(
'jquery-core',
'jquery-migrate',
'fancybox',
);
foreach( $handles as $defer_script) {
if ( $defer_script === $handle ) {
return str_replace( ' src', ' defer src', $tag ); // Or ' async src'
}
}
return $tag;
}
add_filter( 'script_loader_tag', 'dt_add_defer_attribute', 10, 2 );