The Loop
Action Hooks
- Actions Run During a Typical Request (codex.wordpress.org)
- How WordPress Actually Works (wpbeginner.com)
Enqueue Files
- JS and CSS files should be loaded using the
wp_enqueue_script()
andwp_enqueue_style()
functions from the themesfunctions.php
file. - Do not write link tags in the
header.php
template file. Enqueued files are pull-in with thewp_head()
template function. - Enqueuing ensures proper loading and caching, and allows the use of conditional tags to target specific pages.
- Including CSS and Javascript (developer.wordpress.org)
- wp_enqueue_style() (developer.wordpress.org)
- wp_enqueue_script() (developer.wordpress.org)
// wp-content/themes/{my_theme}/functions.php
function add_theme_scripts() {
wp_enqueue_style('slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', array('jquery'), 1.1, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
Enqueue CSS Files
wp_enqueue_style($handle, $src, $deps, $ver, $media);
Parameter | Required | Description |
---|---|---|
handle |
Yes | The name of the stylesheet. Should be unique. |
src |
Yes | The URL for the file. |
deps |
No | Refers to whether or not this stylesheet is dependent on another stylesheet. If this param is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first. |
ver |
No | An arbitrary version number. |
media |
No | Specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’ |
Enqueue JS Files
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);
Parameter | Required | Description |
---|---|---|
handle |
Yes | The name of the script. Should be unique. |
src |
Yes | Full URL of the script, or path of the script relative to the WordPress root directory. |
deps |
No | An array of registered script handles this script depends on. |
ver |
No | String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. |
in_footer |
No | Whether to enqueue the script before |