In WordPress, the header.php file is a template file that is included in all other template files. It is the topmost part of every template and contains the hooks to all scripts and styles across the website. The file is used to register and enqueue all styles and scripts that are used throughout the website. You can use wp_register_style and wp_enqueue_style to add stylesheets, and wp_register_script and wp_enqueue_script to add scripts. If you do not call wp_enqueue_script or wp_enqueue_style more than once, you can skip the registration and add the same parameters to the enqueue. The wp_head() function is an important WordPress theme hook that is included in the header.php file and should be included in the <head> tags. It is used to perform most of the functionality that makes WordPress work.
<!DOCTYPE html>
<html class="bg-dark" lang="en">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<?php
function enqueue_all_scripts() {
// Bootstrap CSS
wp_enqueue_style('bootstrap', get_template_directory_uri().'/assets/bootstrap/css/bootstrap.min.css', false, null, 'all');
// Fontawesome
wp_register_style('fontawesome', get_template_directory_uri().'/assets/fonts/fontawesome-all.min.css', false, null, 'all');
wp_script_add_data('fontawesome', 'crossorigin', 'anonymous');
wp_enqueue_style('fontawesome');
// Bootstrap JS
wp_enqueue_script('bootstrap', get_template_directory_uri().'/assets/bootstrap/js/bootstrap.min.js', array(), null, true);
// Theme Styles
wp_enqueue_style('theme', get_template_directory_uri(). '/assets/css/theme.css');
// Theme Scripts
wp_enqueue_script('theme', get_template_directory_uri(). '/assets/js/theme.js', array('jquery'), null, true);
// Custom Styles
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_all_scripts');
?>
<?php wp_head(); ?>
</head>
wp_register_style( 'name of the stylesheet (handle)',
'the script URI',
array('optional stylesheet dependency handle'),
'version number',
'all/print/screen');
wp_enqueue_style( 'name of the stylesheet (handle)');
If you do not call enqueue more than once, you can skip the registration and add the same parameters to the enqueue.
Use get_template_directory_uri() to get a full web address of the theme’s directory location.
| Name | Link |
|---|---|
| wp_register_style() | https://developer.wordpress.org/reference/functions/wp_register_style/ |
| wp_enqueue_style() | https://developer.wordpress.org/reference/functions/wp_enqueue_style/ |
| get_template_directory_uri() | https://developer.wordpress.org/reference/functions/get_template_directory_uri/ |
wp_register_script( 'name of the script (handle)',
'the script URI',
array('optianl script dependency handle'),
'version number',
$in_footer = true/false);
wp_enqueue_script('name of the script (handle)');
Like styles if you do not enqueue the script multiple times, you can just use the enqueue method with the same parameters.
Use get_template_directory_uri() to get a full web address of the theme’s directory location.
If the script uses jQuery, you will need to enqueue a JQuery file or CDN and then list that as a dependency: array('jquery') .
| Name | Link |
|---|---|
| wp_register_script | https://developer.wordpress.org/reference/functions/wp_register_script/ |
| wp_enqueue_script | https://developer.wordpress.org/reference/functions/wp_enqueue_script/ |
| get_template_directory_uri() | https://developer.wordpress.org/reference/functions/get_template_directory_uri/ |
wp_head();
Include this in the <head> tags. It is one of the most important WordPress theme hooks since it is used to perform most of the functionality that makes WordPress work.