Enqueuing Styles and Scripts in WordPress

No Comments

In this article, We will learn how to add style sheets, JavaScript libraries & custom JavaScripts to a WordPress theme. We’ll focus on the two main functions for enqueuing content wp_enueue_style, and wp_enqueue_script.


You can still put a link to stylesheet in header.php or put your javascript file or code in footer.php and it will work perfectly. But you will have a very limited control over when that style sheet gets called in.

wp_enqueue_script() and wp_enqueue_style() offer various options for developers and its the best way to add style and scripts to WordPress.


wp_enqueue_style

Parameters

$handle is simply the name of the stylesheet.
$src is where it is located. The rest of the parameters are optional.
$deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
$ver sets the version number.
$media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’


So if you wanted to load a stylesheet named “slider.css” in a folder named “CSS” in you theme’s root directory, you would use:



wp_enqueue_script

$handle is the name for the script.
$src defines where the script is located.
$deps is an array that can handle any script that your new script depends on, such as jQuery.
$ver lets you list a version number.
$in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.

So if you wanted to load a script named “script.js” in a folder named “js” in your theme’s root directory, you would use:

 

Combining Enqueue Functions

It is best to combine all enqueued scripts and styles into a single function, and then call them using the wp_enqueue_scripts action.


About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

More from our blog

See all posts

Leave a Reply