elementor4fun-logo
Last update: November 22, 2018

How to

How to load custom CSS and JS files

In most of these pages, we have to load some JS and CSS files. As stated in the official website, we can't use the functions.php file with Oxygen.

So here is the easiest and most convenient method.

Step 1

Go to download My Custom Functionality , which is a basic plugin to load custom CSS and JS files in WordPress :

https://github.com/srikat/my-custom-functionality

Step 2

Install the zip file like a normal plugin for wordpress, and activate it.

That's it.

What file to edit ?

plugin.php is the file you have to edit to enqueue (add) your JS and CSS files in WordPress.

In the assets folder, you have to put your assets :

assets/css/ for the CSS files
assets/js/ for the Javascript files
assets/images/ for the images that come with these files.

How to edit the plugin file

By chance, Srikat has already wrote the function, so it's much easier to understand and to know what to do :

An example. To add the animate.min.css file, I just have to add this line :

wp_enqueue_style( 'animate', plugin_dir_url( __FILE__ ) . 'assets/css/animate.min.css' );

To add the typed.min.js file :

wp_enqueue_script( 'typed-js', plugin_dir_url( __FILE__ ) . 'assets/js/typed.min.js', '','', true );

to add the morphext.min.js file (which was made for JQUERY, so you can see that we have added 'jquery' in an array) :

wp_enqueue_script( 'morphext-js', plugin_dir_url( __FILE__ ) . 'assets/js/morphext.min.js', array('jquery'),'', true );

Now the plugin.php file looks like this :

Of course you have to upload all the files in their assets folders.

And if you want to check if everything was loaded properly, you can open any page of your website and see in the devtools / network if there are some errors.
As you can see here, the morphext.min.js and some other files were loaded successfully (Status 200) :

closealign-justifychevron-downcaret-up