There may be times when you want to load JavaScript or CSS files in WordPress.
In such cases, it’s convenient to use get_stylesheet_directory_uri as follows.
【JavaScript】※For parent theme
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/filename-to-load"></script>※For child theme
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/filename-to-load"></script>【CSS】
※For parent theme
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/filename-to-load"> ※For child theme <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/filename-to-load">
Let’s say you want to load three files from the js folder in a child theme.
<!-- particles.js -->
<div id="particles-js"></div>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/app.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/particles.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/lib/stats.js"></script>
In practice, this becomes:
<div id="particles-js"></div>
<script type="text/javascript" src="https://fuumin.net/wp-content/themes/hamingbird-child/js/app.js"></script>
<script type="text/javascript" src="https://fuumin.net/wp-content/themes/hamingbird-child/js/particles.js"></script>
<script type="text/javascript" src="https://fuumin.net/wp-content/themes/hamingbird-child/js/lib/stats.js"></script>
Whether you want to load this in the head or body, you write it in header.php. Copy the parent theme’s header.php to the child theme and edit it.
The method is almost the same if you want to load CSS.