Who is this talk for?
You should have a basic understanding of PHP and WordPress
hooks.
$you = has_understanding( 'PHP' ) && has_understanding( 'WordPress' );
Slide 3
Slide 3 text
What are we talking about?
(Almost) everything that I have learned through mistakes and
code review on including assets in WordPress.
Slide 4
Slide 4 text
What are we talking about?
● Asset: In our case, a CSS or JavaScript meant to be delivered
to a web browser
● To enqueue: adding to a queue
Slide 5
Slide 5 text
What are we talking about?
● Telling WordPress to add our asset to its list
● WordPress will use best practices to include our asset
● WordPress will use the information that we pass into
functions to include assets
function my_scripts() {
wp_enqueue_style(
'my-stylesheet',
get_stylesheet_directory_uri() . '/my.css'
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Create a prefixed
function
Slide 9
Slide 9 text
function my_scripts() {
wp_enqueue_style(
'my-stylesheet',
get_stylesheet_directory_uri() . '/my.css'
);
}
add_action( 'wp_enqueue_script', 'my_scripts' );
hook function in wp_enqueue_scripts
Slide 10
Slide 10 text
function my_scripts() {
wp_enqueue_style(
'my-stylesheet',
get_stylesheet_directory_uri() . '/my.css'
);
}
add_action( 'wp_enqueue_script', 'my_scripts' );
call a WordPress function called
wp_enqueue_style
$handle
● Unique identifier for your style or script
● Convention is to slugify it and prefix it
'my_prefixedScript'
'script'
'my-good-script'
Slide 17
Slide 17 text
$src
● The URL to your asset
● More to come on this in a few more slides!
Slide 18
Slide 18 text
$deps
● An array of dependencies, using the $handle
● You can cause fatal errors if a handle isn’t already
registered or enqueued
Slide 19
Slide 19 text
$deps
● Can also be used for assets registered in Core
array( 'jquery', 'my-other-script' )
● List of included scripts:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
● Don’t enqueue your own jQuery!
Slide 20
Slide 20 text
$ver
● Do not use filemtime! It is unreliable across environments
● Instead, use static versioning (Ex: 20181103.1100)
● Static versioning is more explicit
● WordPress will do this to break browser caching:
Slide 21
Slide 21 text
$media (for styles)
● The media that this stylesheet should apply to.
● Usually ‘all’
● You can also use a media query
● Potentially useful for ‘print’ stylesheet
Slide 22
Slide 22 text
$footer (for scripts)
true - Place JavaScript file call in the footer in the markup
false - Place JavaScript file call in the head in the markup
● Always true, unless any of these conditions are met:
○ Is there a script placed in the header that relies on this
script?
○ Is this mission-critical and should it be placed before the
body renders.
Slide 23
Slide 23 text
$footer (for scripts)
● Remember, JavaScript usually impacts the performance of
your site the most.
● Bytes of JavaScript and bytes of Images, CSS, etc are not
created equally.
Two Rules
#1: Never hardcode asset URLS
#2: Only include assets where they are needed
Slide 36
Slide 36 text
Rule #1: Never hardcode
● URLs can change
● People can use custom file directory structures
● WordPress has functions to help you!
Slide 37
Slide 37 text
get_stylesheet_directory_uri()
● Use this function inside of a child theme.
● If you use this in a parent theme, it will reference a child
theme if active
● Does not include a trailing slash
https://test.com/wp-content/themes/child-theme
Slide 38
Slide 38 text
get_template_directory_uri()
● Use this function if you are authoring a parent theme.
● If you use this function within a child theme, this will reference
the root of its parent theme
● Does not include a trailing slash
https://test.com/wp-content/themes/parent-theme
Slide 39
Slide 39 text
plugin_dir_url()
● Use this function inside of a plugin (or a must-use plugin)
● You can pass it the magic constant __FILE__ (two
underscores) to get the directory of the current file
plugin_dir_url( __FILE__ );
Never hardcode Bonus!
content_url();
wp-content folder without trailing slash
wp_upload_dir();
array of information about the uploads folder
Even more: https://codex.wordpress.org/Determining_Plugin_and_Content_Directories
Slide 46
Slide 46 text
Rule #2: Only where needed
● Send only assets that are needed to the frontend
● Reduce bloat
● Help the reputation of WordPress!
Slide 47
Slide 47 text
Rule #2: Only where needed
Conditional tags (https://codex.wordpress.org/Conditional_Tags)
Slide 48
Slide 48 text
function my_scripts() {
if ( ! is_home() ) {
return;
}
wp_enqueue_style( 'my-stylesheet' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Slide 49
Slide 49 text
Rule #2: Only where needed
global post object (https://codex.wordpress.org/Function_Reference/$post)
This should only be used where there is no conditional tag for
what you are checking for
Slide 50
Slide 50 text
function my_scripts() {
global $post;
if ( 1 !== $post->author ) {
return;
}
wp_enqueue_style( 'my-stylesheet' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Slide 51
Slide 51 text
Rule #2: Only where needed
get_current_screen
https://codex.wordpress.org/Function_Reference/get_current_screen
● For use on admin screens
● Always check to make sure this function exists (not all admin
pages have this function available)
Bonus tips!
● Use wp_localize_script to pass data to a JavaScript file
● WordPress will handle converting your data to a JavaScript
object and printing it to the screen
Slide 54
Slide 54 text
wp_localize_script(
'my-handle',
'MY_OBJECT',
array(
'hello' => esc_js( __( 'hello', 'my-domain' ) ),
'meta' => get_post_meta( get_the_ID(), 'meta', true ),
)
);
The handle for your script
Slide 55
Slide 55 text
wp_localize_script(
'my-handle',
'MY_OBJECT',
array(
'hello' => esc_js( __( 'hello', 'my-domain' ) ),
'meta' => get_post_meta( get_the_ID(), 'meta', true ),
)
);
The name of your object
Bonus tips!
When defining constants, use trailingslashit()
https://codex.wordpress.org/Function_Reference/trailingslashit
Appends a trailing slash without double slashes
define( 'MY_ASSETS_URL', trailingslashit( get_stylesheet_directory_uri() ) );
Slide 62
Slide 62 text
Bonus tips!
Need a list of available scripts or styles?
Use the global objects $wp_scripts or $wp_styles
Slide 63
Slide 63 text
Bonus tips!
wp_add_inline_script();
https://developer.wordpress.org/reference/functions/wp_add_inline_script/
Used for executing a script inside of a registered script
Slide 64
Slide 64 text
Resources
Theme Handbook (Including CSS & JavaScript) -
https://developer.wordpress.org/themes/basics/including-css-javascript/
Plugin Handbook (Server Side PHP and Enqueueing) -
https://developer.wordpress.org/plugins/javascript/enqueuing/