Skip to main content

The right way to load Javascript and CSS files in Wordpress.


The way we load Javascript and CSS files in Wordpress is different from the normal HTML way.

First of all, we need to identify where do we want to load the scripts. Is it in our theme or plugin?.
Lets say we want to load it to  our theme, we can easily create a new folder in our child theme and place the scripts in it. for example
//create the directories first in our child theme
mkdir -p /var/www/our-wordpress-site/wp-content/themes/child-storefront/assets/js
mkdir -p /var/www/our-wordpress-site/wp-content/themes/child-storefront/assets/css
//copy files from our machine to the server site.
scp utils.js alia@xxx:/var/www/our-wordpress-site/wp-content/themes/child-storefront/assets/js/
scp utils.css alia@xxx:/var/www/our-wordpress-site/wp-content/themes/child-storefront/assets/css/
view raw prepare_child_theme_assets_directories.sh hosted with ❤ by GitHub
Then we can load it in our child theme functions.php file.
function wp_add_javascripts() {
wp_enqueue_script('utils-js',
get_stylesheet_directory().'/assets/js/utils.js', array('jquery'),'1.1', true);
}
function wp_add_styles() {
wp_enqueue_style('utils-css',
get_stylesheet_directory().'/assets/css/utils.css');
}
//add to the wp_enqueue_scripts hook.
add_action( 'wp_enqueue_scripts', 'wp_add_javascripts' );
add_action( 'wp_enqueue_scripts', 'wp_add_styles' );
view raw add_scripts_to_wordpress_theme.php hosted with ❤ by GitHub
Ok when we load, we need to understand the parameters that we want to pass in... for wp_enqueue_styles is quite straight forward. but for wp_enqueue_script..
Parameters #Parameters
$handle
(string) (Required) Name of the script. Should be unique.
$src
(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.
Default value: ''
$deps
(array) (Optional) An array of registered script handles this script depends on.
Default value: array()
$ver
(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
Default value: false
$in_footer
(bool) (Optional) Whether to enqueue the script before </body> instead of in the <head>. Default 'false'.
Default value: false
view raw wp_enqueue_script hosted with ❤ by GitHub
Pay attention on deps parameter. whether the script that we want to load has dependencies with other scripts / jquery. Same goes to in_footer parameter, do we want to load in header or before the body closing tag. If we do not define properly. Our scripts might not be loaded properly. Pay attention on those two parameters.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Tutorial on Min3D framework using Android Studio

Salam peeps, UPDATES***, the model on the old link is no longer working. so i have create a github repo, where i put the source code in a project, you guys can try to clone in and run on your android studio device emulator or directly on your phone, Ive replaced the model with a cube. https://github.com/aliaramli/Min3DTutorial Previously i ve posted tutorial on min3D using eclipse IDE, i believe most of us has moved to Android Studio IDE in developing android apps? As previous tutorial shows a lot of support from readers and among hot post in my blog, i ve decided to post the same tutorial but this time using Android Studio. For those who are familiar with Eclipse/Android Studio migration they might not have problem in running this tutorial . For more detail explanation on min3D please visit this website page Ok lets get started. Step One Create a new android project in android studio. you may name it as what you like, below are how i defined my project settings. ...
23 comments
Read more

Get the last active time from users in woocommerce using sql query

To easily get the last active time from users (under Woocommerce extended plugin) we can easily query from database using the meta_key of "wc_last_active" example query: select user_id, meta_value from wp_usermeta where meta_key= "wc_last_active" and user_id in (11111,112222); results: +-------------+------------------+ | user_id    | meta_value | +-------------+-------------------+ |   11111   | 1556755200 | |   112222 | 1566518400 |
1 comment
Read more

AWS Workspace Device is not Authorized Linux Client

Have you guys tried the AWS Workspace? They are offering the service for free from April - June 2020. For a limited time, in response to COVID-19 , starting April 1, 2020 through June 30, 2020, Amazon WorkSpaces Free Tier provides up to 50 WorkSpaces with Windows Standard bundle with 80 GB Root and 50 GB User Volumes, running in AutoStop mode for up to 10,000 hours of combined use per month across all AWS Regions where WorkSpaces Free Tier is currently available. Additionally, the Amazon WorkSpaces Free Tier provides one WorkSpace with Windows Performance bundle with 80 GB Root and 100 GB User Volumes, running in AutoStop mode for up to 200 hours, two WorkSpaces with Linux Standard bundle with 80 GB Root and 50 GB User Volumes, running in AutoStop mode for up to 400 hours, and one WorkSpace with Windows Value bundle with 80 GB Root and 10 GB User Volume, running in AutoStop mode for up to 200 hours. All new customers that start using WorkSpaces for the first time during ...
Post a Comment
Read more