How to properly add both styles and scripts in WordPress with functions.php

add both styles and scripts in WordPress

Add both styles and scripts in WordPress give us a chance to change the look and feel as well as the behavior of the website. Moreover can enhance the WordPress functionality as well. We can add these files in two ways. Add to the WordPress header directly, or add files via functions.php file. Adding the files via function file is the correct and recommended way. First way also working fine. But it is not the correct and recommended way to do so. We call the best way as Enqueuing. 

In this article you will learn adding both Styles and Scripts in better way. Furthermore you’ll get answer for the following questions after this lesson.

  • add a style in WordPress?
  • add script to WordPress footer?
  • include JavaScript and CSS files in WordPress?
  • What does that mean to enqueue styles and scripts in WordPress?

What is enqueuing in WordPress?

Enqueue express the way we said WordPress to use these files. We use this function to add both Scripts and Styles to the WordPress. But to show the added files, we use another two functions.

Generally we adding styles to the header and scripts to the footer. To show files added to the header we are using wp_head() function within the header.php file before closing ( </head> ) head tag. As same we use wp_footer() function in the footer.php file before closing body (</body>) tag.

Enqueuing parameters

There are five(05) parameters to follow when adding a style or script to a website.

Parameters applicable when enqueue a CSS Stylesheet.

$handle
(string) (Required) Name of the stylesheet. Should be unique.

$src
(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.

Default value: ”

$deps
(string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on.

Default value: array()

$ver
(string|bool|null) (Optional) String specifying stylesheet 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

$media
(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like ‘all’, ‘print’ and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’.

Default value: ‘all’

Will get to know this in more detail using an example.

wp_enqueue_style( $handle, $source, $dependencies, $version, $media );

Parameters applicable when enqueue a script file.

$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
(string[]) (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

For a script, code is like:

wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );

Hope you’ll clear with the registration difference between both script and style. Let’s go deep together and find out how we can apply this in real world.

Give your attention to below function.

function nero_resources() {
	wp_register_style( 'nero_bootstrap', get_template_directory_uri() . 'path/to/bootstrap.css' );
	wp_enqueue_style( 'nero_bootstrap' );

	wp_register_script( 'nero_bootstrap', get_template_directory_uri() . '/path/to/bootstrap.js' );

	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'nero_bootstrap' );
}
add_action( 'wp_enqueue_scripts', 'nero_resources' );

Will discuss above function in detail for better understanding:
nero_resources() – is the function containing Script and Style codes

wp_register_style() – code/built in function to use for registering a stylesheet

wp_enqueue_style() – added registered CSS Stylesheet to WordPress Theme

wp_register_script() – code/built in function to use for registering a script file

wp_enqueue_script() – use to add registered JS File to WordPress Theme

That is all from this tutorial regarding add both styles and scripts in WordPress. Hope you enjoyed the tutorial. Happy learning ahead. Thanks for reading.

Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch.

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *