In WordPress themes depending on our requirements we can create additional stylesheets and JavaScript files.
Apart from creating them, it is also necessary to load those files using standerd WordPress menthod.
In WordPress we use enqueue function that laod all of our scripts and styles.
This function, just like any other function should be added in our themes functions.php
file.
Enqueuing Stylesheets
style.css
is the hard requirement to any of the WordPress theme, without it you can not even enable theme in dashboard.
Other than that, we also have option to additinal stylesheet files in our theme.
Some feature like navingation menu are required to have Javascript to function propely and for that we need to add Javascript as well.
To load style.css
file we use:
wp_enqueue_style('style', get_stylesheet_uri())
The parameters shown here in wp_enqueue_style()
are $handle
and $src
which is required to load stylesheet file.
Here are the all of the Parameters of wp_enqueue_style
function and why they are used:
$handle
: It is the first parameter in this function. This is simply the name of the CSS file. For exaplple if our file isstyle.css
the$handle
would be ‘style’.$src
: It is the destination where file is located. Instead of linking out whole address we can use funtionget_template_directory_uri()
which point to root directory of theme folder. In case the css file is located in subfolder we need add that as well:get_template_directory_uri() . '/css/slider.css'
$deps
: This paramemeter accept boolean values. This simply definces that if the stylesheet is dependent on another stylesheet.$ver
: Set the version number$media
: Define type of media to laod in the stylesheet like ‘all’, ‘screen’, ‘print’ or ‘handheld.’
Here is the complete example code if we include all of those parameters:
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');
Enqueuing Scripts
CSS are not the only thing we use to style our site.
Sometime we need to use additional javascript file in our themes.
Just like for loading stylesheets we also have function for loading Javascript files.
Simmilar to wp_enqueue_style
we have wp_enqueue_script
function for JS and Jquery.
Here is the function along with all parameters:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
$handle
: Name of the Script that we are adding.$src
: Location of the script.$deps
: This is array where we can add any other script upon which our script is depend.$ver
: You can list the versio number.$in_footer
: It is boolean paramenter. It allows you to place your script in footer instead of header.
Only using all of those parameters our final wp_enqueue_script
would look something like this:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
Comment reply script
Other than user defined script files, WordPress also has lot’s of predefined scripts.
One of them is Comment reply script.
What this do is open the comment reply using the certain conditional tags.
If your theme has comment section it should be added as well.
Here is how to load comment reply script:
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
Using the conditional tag, this script would load the comment reply script on the single post pages.
This is not only predefined script. You can more about other script on official WordPress site: https://developer.wordpress.org/themes/basics/including-css-javascript/.
Combine Enqueue Funtions
If we are loading stylesheets, it makes sense to group together in the same function.
So by using one function we all know where we have to if have to make some changes next time.
Here is combine and call them all using wp_enqueue<_scripts
function:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );