How To register & enqueue Stylesheets and Scripts

Keep in mind.
.css file loads using ~~wp_enqueue_style~~ or firstly registered using ~~wp_register_style~~ and then enqueue it.
example:-beautiful.css is a CSS file.
.js file loads using ~~wp_enqueue_script~~ or firstly registered using ~~wp_register_script~~ and then enqueue it.
example:- beautiful.js is a js file.

get_template_directory_uri() = parent theme folder

get_stylesheet_directory_uri() = child theme folder

Difference between wp_enqueue_style and wp_register_style

wp_enqueue_* firsts add the style/scripts to the queue and wp_register_* prepares these scripts or styles to add in file and load it.

You can read more about it here and here.

Enqueuing styles

The basic function to register a style is:

wp_register_style( $handle, $src, $deps, $ver, $media );

The basic function for enqueuing a style is:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

You can customize and include these parameters:

$handle is the name of the stylesheet.
$src is where it is located.

Optional but useful and recommended in most cases.

$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 shows the version of the file.
$media specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’

Example:

Let’s say we have a stylesheet named “~~beautiful.css~~” in a folder named “CSS” in child theme’s directory, what we can use is this (will not work until enqueued)

wp_register_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css',false,'1.0.0','all');

wp_enqueue_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css',false,'1.0.0','all');

But using this, we are not showing it anywhere and couldn’t control the priority of loading the stylesheet. So what we have to do is to 1. Register style using ~~wp_register_style()~~ And then enqueue it using ~~wp_enqueue_style()~~

Here what we should use:

//* Register and Enqueue Stylesheet
add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_style_sheet' );
function enqueue_beautiful_style_sheet() {

	wp_register_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css', false, '1.0.0' );
	wp_enqueue_style( 'beautiful-css' );

}

Enqueuing scripts

Load a script using ~~wp_register_script~~

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Load a script using ~~wp_enqueue_script~~

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

js or jquery files required and should to be loaded using ~~wp_enqueue_script~~. This is the recommended method which ensures that we are loading it properly which increase the server performance and helps to conditionally target the script on single pages.

Available Parameters:

$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 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 than in the header, so that it does not delay the loading of the DOM tree. True= in footer. False=in header.

Example:

Let’s assume, we have a script named beautiful.js in /js/ folder of your child theme. Your enqueue function may look like this: (will not work until enqueued)

wp_register_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array( 'jquery' ), CHILD_THEME_VERSION, false );
wp_enqueue_script( 'beautiful-script' );

or simply

wp_enqueue_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array( 'jquery' ), CHILD_THEME_VERSION, false );

Again,
this works good but we should to first register and then enqueue the script to use full control over the file. It is recommended. So, how we can do it? We will use the same above method. Here how it should be

//* Register and Enqueue Script
add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_script' );
function enqueue_beautiful_script() {

	wp_register_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array ( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'beautiful-script' );

}

Register and Enqueue Both Stylesheet and Script

We can simply use the same function to register and enqueue it.

//* Register and Enqueue Stylesheet and Script Both
add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_style_script' );
function enqueue_beautiful_style_script() {

	wp_register_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css', false, '1.0.0' );
	wp_register_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array ( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'beautiful-css' );
	wp_enqueue_script( 'beautiful-script' );
}

Conditional Tag:-

We can simply be using conditional tags to show it on specific single post or pages. Here is snippet for the single post.

//* Register and Enqueue Stylesheet and Script Both on single 'Post'
add_action( 'wp_enqueue_scripts', 'enqueue_beautiful_style_script' );
function enqueue_beautiful_style_script() {
	
if ( is_singular('post') ) {	
	wp_enqueue_style( 'beautiful-css', get_stylesheet_directory_uri() . '/css/beautiful.css', false, '1.0.0' );
	wp_enqueue_script( 'beautiful-script', get_stylesheet_directory_uri() . '/js/beautiful.js', array ( 'jquery' ) );
}

}

Reference:-

Enqueue Styles

Enqueue Scripts

More