Using Greensock JS with WordPress - javascript

Checked around various tutorial/forum sites but can't crack this problem I'm having getting Greensock JS Animation Platform running in WordPress.
I've got a WP site up and running and have linked all relevant (as far as I can see) GS files as follows:
function greensock_scripts()
{
wp_register_script( 'mytweenmax', get_template_directory_uri() . '/js/minified /TweenMax.min.js');
wp_register_script( 'myeasepack', get_template_directory_uri() . '/js/minified/easing/EasePack.min.js');
wp_register_script( 'mycssplugin', get_template_directory_uri() . '/js/minified/plugins/CSSPlugin.min.js');
wp_register_script( 'mygsext', get_template_directory_uri() . '/js/greensock_ext.js');
wp_register_style( 'mygscss', get_template_directory_uri() . '/css/gs_styles.css');
wp_enqueue_script( 'mytweenmax' );
wp_enqueue_script( 'myeasepack' );
wp_enqueue_script( 'mycssplugin' );
wp_enqueue_script( 'mygsext' );
wp_enqueue_style( 'mygscss' );
}
add_action( 'wp_enqueue_scripts', 'greensock_scripts' );
Double-checked pathway to files ... all OK.
The greensock_ext.js contains my call to scripts:
window.onload = function(){
var thebox = document.getElementById("mybox");
TweenMax.to(thebox, 2, {left:"632px", delay:4});
}
Styles are working:
#mycontainer{
width:600px;
height:50px;
background-color: #ccc;
}
#mybox{
width:20px;
height:20px;
background-color:#f00;
position:relative;
}
All good, but can't get any animation happening :(
Any advice would be greatly appreciated.
Mekong

Related

Link Javascript file with wordpress plugin

I am struggling with finishing a basic plugin I created.
I have a plugin folder with the following structure:
Folder_name: Booking
booking.php
js - script.js
css - style.css
js and css are sub folders in the Booking folder.
I have the following function in the booking.php file:
function sc_booking_process() {
return 'html content which uses divs which connect to js and css files';
}
add_shortcode('cinema-booking', 'sc_booking_process');
?>
The booking.php needs to link to the javascript and css files to work properly but no matter what method I do it wont work.
I have tried putting the following before the above function but they still aren't linked to it:
function my_scripts_and_css() {
wp_enqueue_style( 'my-plugin-css', 'css/style.css' );
wp_enqueue_script( 'my-plugin-js', 'js/script.js', array('jquery'), '20200110' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
Any advise would be really appreciated.

function my_scripts_and_css() {
wp_enqueue_style( 'my-plugin-css', plugins_url( '/css/style.css', __FILE__ ) );
wp_enqueue_script( 'my-plugin-js', plugins_url( '/js/script.js',__FILE__ ), array('jquery'), '20200110' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
It should work now! Please try with this

function my_scripts_and_css() {
wp_enqueue_style( 'my-plugin-css', plugin_dir_url( __FILE__ ).'/css/style.css' );
wp_enqueue_script( 'my-plugin-js', plugin_dir_url( __FILE__ ).'/js/script.js', array('jquery'), '20200110' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
You call wrong dir for css and js, please try this one! hope it will work for you

Adding javascript to wordpress functions.php

JavaScript(s) Are Not Loading
I found this really awesome static html/css template online and wanted to convert it to a wordpress theme but after the conversion i noticed the html/css is loading from inspect element view, although (visually) only the menu, section backgrounds and footer are showing on the screen while the remaining body content seems to be hiding.
Check my functions.php for any errors enqueuing the javascript. The alert works but the other scripts seem to not load. I'm sure i made a rookie mistake and coded this incorrectly.
Im developing on xampp.
Download the project files: https://drive.google.com/open?id=1ty9-LsirC6cPA2y-TuirC2IDpEYPOOug
function theme_scripts()
{
wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'alert', get_template_directory_uri() . '/js/alert.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'bootstrap-datepicker', get_template_directory_uri() . '/js/bootstrap-datepicker.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'google-map', get_template_directory_uri() . '/js/google-map.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.animateNumber.min', get_template_directory_uri() . '/js/jquery.animateNumber.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.easing.1.3', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.magnific-popup.min', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.min', get_template_directory_uri() . '/js/jquery.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.stellar.min', get_template_directory_uri() . '/js/jquery.stellar.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery.waypoints.min', get_template_directory_uri() . '/js/jquery.waypoints.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery-3.2.1.min', get_template_directory_uri() . '/js/jquery-3.2.1.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'jquery-migrate-3.0.1.min', get_template_directory_uri() . '/js/jquery-migrate-3.0.1.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'owl.carousel.min', get_template_directory_uri() . '/js/owl.carousel.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'popper.min', get_template_directory_uri() . '/js/popper.min.js', array ( 'jquery' ), 1.1, false);
wp_enqueue_script( 'scrollax.min', get_template_directory_uri() . '/js/scrollax.min.js', array ( 'jquery' ), 1.1, false);
}
add_action( 'wp_enqueue_scripts', 'theme_scripts', 50, 0 );
Regards

To load the JS files, you need to:
Go to footer.php
Delete all the hardcoded scripts from the bottom (the template tries to load these, not the ones from your functions.php)
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
Then add this:
<?php wp_footer(); ?>
This is the Wordpress footer, that invokes the hook that your wp_enqueue() uses for injecting the script tags (it's like wp_head() only for the footer). I suggest you also include the Google Maps script in your functions.php - keep all your external scripts in one place.
It seems that the problem is that you copied the HTML template as a Wordpress theme. They have differences, although not too big - this is one. :)
This will be the same with the missing images: the directory structure of the HTML template is not the same as of the Wordpress installation. You just have to correct that, and everything will be fine.

instead of
wp_enqueue_script( 'aos', get_template_directory_uri() . '/js/aos.js', array ( 'jquery' ), 1.1, false);
use this
wp_register_script( 'aos', get_template_directory_uri() . '/js/aos.js', array () , 1, 1, 1);
wp_enqueue_script ('aos');

Working with the theme in your wordpress theme updated june 20 2019 zip:
Modify index.php and frontpage.php
change: "/images/ to "<?php echo get_template_directory_uri(); ?>/images/
change: url(/images/ to url(<?php echo get_template_directory_uri(); ?>/images/
change: url('/images/ to url('<?php echo get_template_directory_uri(); ?>/images/
suggestion: use url('...') instead of url(...) (this way you'll be sure that it's treated like a string), but at least only use one syntax in one theme. It's easier to manage, if you create a convention for your template, and stick to that.
Modify functions.php
not found: wp-content/themes/eLeadWorks/js/jquery.timepicker.min.js (the file is not in that library, so I commented register and enqueue out)
not found: wp-content/themes/eLeadWorks/js/example.js (the file is not in that library, so I commented register and enqueue out)
deregister script: wp_deregister_script('jquery-migrate'); (place it before wp_register_('jquery-migrate-3.0.1.min', ...)
rename script handles (suggestion): don't use version numbers in script registering handles. This way you'll not be able to freely update versions if you need to. (so jquery-migrate-3.0.1.min is not OK, jquery-migrate is OK)
change: wp_register_style( 'fonts', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' ); to wp_register_style( 'fonts', 'https://fonts.googleapis.com/css?family=Work+Sans:300,400,,500,600,700', array(), 1.1, 'all' ); (no get_template_directory_uri() is needed)
change: wp_register_script( 'google-api', get_template_directory_uri() . 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1); to wp_register_script( 'google-api', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false', array () , 1, 1, 1); (no get_template_directory_uri() is needed)
After these modifications
After these changes I only see one (1) error when loading the page: Uncaught TypeError: Cannot read property 'firstChild' of null. This error is thrown by your Google Maps code.
The error comes from that you don't have a DOM element with id="map".
So, either add an element with id="map" (where Google Maps can place the map), or modify your code to check for mapElement's value (in google-map.js):
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// check if mapElement exists (not null)
if (mapElement) {
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var addresses = ['New York'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
icon: 'images/loc.png'
});
});
}
}
After all these modifications I don't see a single error in my console.

Wordpress Plugin doesn't load JS files

I am writing my first plugin for wordpress and I'm attempting to load scripts in with my plugin.
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . 'js/slick.js',array('jQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . 'js/somaslick.js',array('jQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
/*Create Plugin Parts*/
add_action('init', 'create_carousel');
add_action('wp_enqueue_scripts', 'somadome_enqueue_script');
The issue is the CSS loads (two lines at the bottom) but the code at the top (the scripts) doesn't Load and I'm trying to figure out why the Javascript/JQuery code isn't loading.
I echo'd the paths to check them and they load into the browser fine, so they exist. But aren't being loaded by wordpress.

From looking at the code, I'm assuming it's not loading because you've missed the forward slash from the JavaScript files in the enqueue function.
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('jQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('jQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
...should get things working.

I guess its just a dependencies issue. You've set your logoslickjs depends on array('jQuery') and The dependencies argument of wp_enqueue_script() is case sensetive, so it should be array('jquery')
But, since you're loading a custom version of jQuery called 'somajQuery', you need to change the script depends array('jQuery') to array('somajQuery') so your code should be:
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('somajQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('somajQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
Now, logoslickjs and logoslider are depends on custom jQuery somajQuery and so on.

Is there a simpler way of enqueuing scripts for multiple page templates in Wordpress?

Besides the standard page.php in my Wordpress theme, I have an additional page template called full-page.php.
I want to enqueue an additional script ( script-4.js ) in full-page.php that I don't want to enqueue in the default template. At the moment I have enqueued them using the method below, with if and else statements – the same way in which my stylesheets are enqueued.
I'm wondering if there's a way to do this without enqueuing everything twice? For example, in full-page.php, is it possible for me to just enqueue script-4.js whilst getting it to automatically take scripts 1, 2 and 3 from the default template?
function enqueue_my_styles_and_scripts() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
wp_enqueue_script(
'mytheme-script-4',
get_template_directory_uri() . '/js/script-4.js' );
}
else {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );

Do you mean something like this:
function enqueue_my_styles_and_scripts() {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_script(
'mytheme-script-4',
get_template_directory_uri() . '/js/script-4.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );

How to call a java script on deactivation of wordpress plugin

I want to call a js file which have a ready function to call my api. My Code is..
<?php
.
. // rest all code.................................
.
.
/* Runs on plugin deactivation*/
register_deactivation_hook( __FILE__, 'Pushbiz_remove' );
function Pushbiz_remove() {
/* Deletes the database field */
delete_option('PushBIZ_firstCreation');
delete_option('VarPushBIZapikey');
delete_option('PushBIZRegUrl');
wp_register_script( 'DeactivationJS', plugins_url( '/admin/js/deactivation.js', __FILE__ ));
wp_enqueue_script( 'DeactivationJS' );
}
?>
I am unable to call deactivation.js on on the deactivation of plugin. How can i call this java script on the event of deactivation.

Can you please check below code?
/* Runs on plugin deactivation*/
register_deactivation_hook( __FILE__, 'Pushbiz_remove' );
function Pushbiz_remove() {
/* Deletes the database field */
delete_option('PushBIZ_firstCreation');
delete_option('VarPushBIZapikey');
delete_option('PushBIZRegUrl');
add_action( 'wp_enqueue_scripts', 'DeactivationJS_scripts' );
}
function DeactivationJS_scripts(){
wp_enqueue_script( 'DeactivationJS', plugin_dir_url( __FILE__ ) .'/admin/js/deactivation.js');
}

Categories

Resources