Wordpress theme add css js files right method

Hello

Today I am going to explain how to add css and js files in functions.php in wordpress theme. I was face so much issues when add css and js files. Theme is not display properly as in html view. I saw that I made mistake in include js files. My way is not right. So here I saw you the correct way.

All files are in "assets" folder.

functions.php

function load_stylesheets(){

$theme_version = wp_get_theme()->get( 'Version' );

wp_enqueue_style('bootstrap', get_template_directory_uri().'/assets/vendors/bootstrap/css/bootstrap.min.css', array(), $theme_version, false);

wp_enqueue_style('fontawesome', get_template_directory_uri().'/assets/vendors/fontawesome/css/all.min.css', array(), $theme_version, false);

wp_enqueue_style('tinyslider', get_template_directory_uri().'/assets/vendors/tiny-slider/dist/tiny-slider.css', array(), $theme_version, false);

wp_enqueue_style('owlcarousel1', get_template_directory_uri().'/assets/vendors/owl-carousel/owl.carousel.min.css', array(), $theme_version, false);

wp_enqueue_style('owlcarousel2', get_template_directory_uri().'/assets/vendors/owl-carousel/owl.theme.default.min.css', array(), $theme_version, false);

wp_enqueue_style('animate', get_template_directory_uri().'/assets/vendors/animate/animate.min.css', array(), $theme_version, false);

wp_enqueue_style('iconstyle', get_template_directory_uri().'/assets/vendors/paroti-icons/style.css', array(), $theme_version, false);

wp_enqueue_style('magnific', get_template_directory_uri().'/assets/vendors/jquery-magnific-popup/jquery.magnific-popup.css', array(), $theme_version, false);

wp_enqueue_style('youtube', get_template_directory_uri().'/assets/vendors/youtube-popup/youtube-popup.css', array(), $theme_version, false);

wp_enqueue_style('pstyle', get_template_directory_uri().'/assets/css/paroti.css', array(), $theme_version, false);

wp_enqueue_style('customcss', get_template_directory_uri().'/assets/css/custom.css', array(), $theme_version, false);

//js files

wp_register_script('jquery',get_template_directory_uri().'/assets/vendors/jquery/jquery-3.6.1.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('jquery');

wp_register_script('bootstrap',get_template_directory_uri().'/assets/vendors/bootstrap/js/bootstrap.bundle.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('bootstrap');

wp_register_script('tinislider',get_template_directory_uri().'/assets/vendors/tiny-slider/dist/min/tiny-slider.js',array('jquery'), $theme_version, true);

wp_enqueue_script('tinislider');

wp_register_script('validatefile',get_template_directory_uri().'/assets/vendors/jquery-validation/jquery.validate.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('validatefile');

wp_register_script('wowjs',get_template_directory_uri().'/assets/vendors/wow/wow.js',array('jquery'), $theme_version, true);

wp_enqueue_script('wowjs');

wp_register_script('ajaxchimp',get_template_directory_uri().'/assets/vendors/jquery-ajaxchimp/jquery.ajaxchimp.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('ajaxchimp');

wp_register_script('jqueryappear',get_template_directory_uri().'/assets/vendors/jquery-appear/jquery.appear.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('jqueryappear');

wp_register_script('carrousalmin',get_template_directory_uri().'/assets/vendors/owl-carousel/owl.carousel.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('carrousalmin');

wp_register_script('magnificpopup',get_template_directory_uri().'/assets/vendors/jquery-magnific-popup/jquery.magnific-popup.min.js',array('jquery'), $theme_version, true);

wp_enqueue_script('magnificpopup');

wp_register_script('youtubejquery',get_template_directory_uri().'/assets/vendors/youtube-popup/youtube-popup.jquery.js',array('jquery'), $theme_version, true);

wp_enqueue_script('youtubejquery');

wp_register_script('mainjsfile',get_template_directory_uri().'/assets/js/paroti.js',array('jquery'), $theme_version, true);

wp_enqueue_script('mainjsfile');

wp_register_script('customjs',get_template_directory_uri().'/assets/js/customjs.js',array('jquery'), $theme_version, true);

wp_enqueue_script('customjs');

}

add_action('wp_enqueue_scripts','load_stylesheets');