This simple technique is how you include javascript, stylesheets or both in your header. We accomplish this by use of WordPress hooks.
My favorite hook is 'wp_head'
since they can be used to run code at the beginning of page loads.
To add javascript or stylesheets to your wordpress/ woocommerce store dynamically, you could use the following code.
add_action('wp_head', 'wpb_hook_javascript');
function wpb_hook_javascript() {
?>
// Javascript/css here
<?php
}
As you can see from my code, I first close the PHP using ?>
. This allows us to write regular HTML and will output to the wp_head, between the header tags.
These are the javascript and stylesheets this website supports to create various effects. Prism provides the syntax markup and particles is what handles the cool header effect I have in place.
To run code in the footer, we essentially mimic what we did in the wp_head hook.
add_action('wp_footer', 'wpb_hook_javascript_foot');
function wpb_hook_javascript_foot() {
?>
// your css/javascript here
<?php
}
It’s important to note, since we closed the php tags, we can write css/javascript regular wrapped in their respective tags. (style for css & script for javascript).