How to Include CSS and JS files in WordPress Theme

• November 11, 2015
• Leave a comment

In this article, we’ll figure out how to include our custom Styles and Scripts files to theme. WordPress site not just have your theme active, it additionally be utilizing a wide range of plugins. Its imperative to load styles and scripts by using WordPress standard methods. This will guarantee the site stays proficient and with no compatibility issue.

Including scripts and styles is truly a straightforward process. You have to create a function that will enqueue all of our scripts and styles. The most ideal approach to incorporate scripts and styles is to enqueue theme in functions.php file of theme. Enqueue script or style by utilizing wp_enqueue_script() or wp_enqueue_style().

Stylesheet:

CSS Stylesheet is utilized to customize the presentation of theme. You should load a stylesheet using wp_enqueue_style() rather than loading it in theme’s header.php file. To load a main stylesheet, you can enqueue in functions.php file. To enqueue root (main stylesheet) style.css:

The basic function to enqueue other style files is:

You can incorporate these parameters:

• $handel is basically name of a stylesheet
• $src is the path of stylesheet where it is located
• $deps refers to the stylesheet which is reliant on another stylesheet or not. If this is set, this stylesheet won’t be loaded unless its dependent stylesheet is loaded first
• $ver sets the version number
• $media string determining the media for which this stylesheet has been characterized. Samples: ‘all’, ‘screen’, ‘handheld’, ‘print’

For instance, if you needed to load a stylesheet named widgets.css located in css folder then:

Scripts:

Any additional JavaScript file required by theme ought to be loaded by wp_enqueue_script(). wp_enqueue_script()syntax is similar to wp_enqueue_style() as:

You can include these parameters:

• $handel is basically name of script
• $src is the path of script where it is located
• $deps refers to an array that can deal with any script. Your script can rely upon, for example, jQuery
• $ver sets the version number
• $in_footer is a Boolean parameter that permits to place your script in footer of HTML rather than header

For instance, if you needed to load scripts file name functions.js located in JS folder then:

Combining Enqueue Functions:

It is best to combine all enqueued Scripts and Styles into a function and hook that function into an action called “wp_enqueue_scripts”: