as I am trying to figure this one out since hours, I've come to the conclusion, I should have a try, asking you guys.

I want to integrate the JavaScript Library "Fitty" () in my WordPress installation.

I followed several tutorials but wasn't able to figure out, how to integrate exactly that library.

Anybody out there, who could help me out with that one, please?

Thanks in advance,

Dorian.

as I am trying to figure this one out since hours, I've come to the conclusion, I should have a try, asking you guys.

I want to integrate the JavaScript Library "Fitty" (https://github/rikschennink/fitty?fbclid=IwAR0m6k5jCxiTar6qNlPncS0X7phdD4YEyKePUSEqMPO4dg2LrV1QRrHJupc) in my WordPress installation.

I followed several tutorials but wasn't able to figure out, how to integrate exactly that library.

Anybody out there, who could help me out with that one, please?

Thanks in advance,

Dorian.

• javascript
• library

Share Improve this question asked Jun 13, 2019 at 17:16 D. WarningD. Warning 111 bronze badge 3

• I would suggest making a child theme and then enqueue the script in the functions.php file of your child theme - developer.wordpress/reference/functions/wp_enqueue_script – RiddleMeThis Commented Jun 13, 2019 at 17:23
• 1 Hey @RiddleMeThis, I've already added the library to the /scripts-folder in my child theme. Is enqueueing the script in the functions.php of my child theme really everything I need to do, to get it running? – D. Warning Commented Jun 13, 2019 at 17:25
• 1 According to their docs all you need is dist/fitty.min.js, just enqueue that then use fitty('#my-element'); to make it work. – RiddleMeThis Commented Jun 13, 2019 at 17:28

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

1- First you have to make a child theme of your current theme.
2- Then, in your child theme create a functions.php file
3- Create a js folder and put fitty.min.js inside it and create a child.js file also inside this js folder
4- In functions.php of your child theme add the following :

<?php // Opening PHP tag - nothing should be before this, not even whitespace
function child_scripts() {

    wp_enqueue_script( 'fitty', get_theme_file_uri( '/js/fitty.min.js' ), array(), filemtime( get_theme_file_path( '/js/fitty.min.js' ) ), true );

    wp_enqueue_script( 'child', get_theme_file_uri( '/js/child.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/js/child.js' ) ), true );

}
add_action( 'wp_enqueue_scripts', 'child_scripts' );

5- In child.js add the following :

(function ($) {

    fitty('#my-element'); // Here fitty is targeting the element with an id='my-element' 

})(jQuery);

Hope this will help you :)