Plugin Development 101 – Intro to Loading Scripts and Styles

In this part of Plugin Development 101 you will be introduced to how to load scripts and styles in your WordPress plugins. This is a fundamental element of WordPress plugin development and is used in the vast majority of all plugins. There are many ways that asset loading can be done wrong, so I want to ensure that you learn early how to do it correctly.

The code written in the video is shown below:

1
2
3
4
5

function pd101_load_styles() {
	wp_enqueue_style( 'pd101-styles', plugins_url( 'pd101-styles.css', __FILE__ ) );
	wp_enqueue_script( 'pd101-scripts', plugins_url( 'pd101-scripts.js', __FILE__ ), array( 'jquery' ), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'pd101_load_styles' );

Codex reference for the functions used:

• wp_enqueue_script()
• wp_enqueue_style()
• plugins_url()
• wp_enqueue_scripts (action)