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');
