Enqueuing CSS and JavaScript

[jonathanbossenger]

Details

• Content type (Online Workshop, Lesson, Course, Tutorial, or Lesson Plan): Lesson
• Content title: Enqueuing CSS and JavaScript
• Topic description: Introduce the hooks and functions to enqueue CSS or JavaScript in a plugin.
• Audience (User, Developer, Designer, Contributor, etc.): Developer
• Experience Level (Beginner, Intermediate, Advanced, Any): Beginner

Learning Objectives

• Explain why plugins can't just include their CSS or JavaScript in the usual way
• Demonstrate how to enqueue custom CSS or JavaScript
• Describe a method to selectively enqueue CSS or JavaScript on a per post type basis.

Related Resources and Other Notes

• https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
• https://developer.wordpress.org/reference/functions/wp_enqueue_style/
• https://developer.wordpress.org/reference/functions/wp_enqueue_script/
• https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/

Automation Code

//lesson

[github-actions[bot]]

Lesson Development Checklist

• [x] Gather any relevant links to Support, Docs, or related material
• [x] Description and Objectives finalized
• [x] Lesson created and announced to the team for review
• [ ] Lesson reviewed
• [ ] Lesson video submitted and published to WPTV
• [ ] Lesson created on Learn.WordPress.org
• [ ] Lesson video published to YouTube
• [ ] Lesson on Learn.WordPress.org updated with YouTube video
• [ ] Lesson published to Learn.WordPress.org

[jonathanbossenger]

Script: https://github.com/jonathanbossenger/wp-content/blob/main/developer-learning-pathway/06-introduction-to-wordpress-plugins/06-enqueing-css-or-javascript.md

[jonathanbossenger]

Video for review: https://youtu.be/7bUHPRbcDTk

(I've been experiencing GitHub issues due to a local undersea cable outage, so I've uploaded this to YouTube as a private video)

[devmuhib009]

Private video no one can see without access. I think making the video privacy to unlisted can be a good option for reviewers.

[jonathanbossenger]

Thanks @devmuhib009. I'm not used to sharing via YouTube.

I think the GitHub issues have been resolved, so here's the video via GitHub.

https://github.com/WordPress/Learn/assets/180629/821555d8-2677-4de2-870a-938da7248f9f

[ironnysh]

Tutorial/Lessons Review Checklist

• [x] Learning outcomes/objectives are clear.
• [x] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [ ] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [ ] Media assets are all in the public domain (CC0).

[jonathanbossenger]

Thanks @ironnysh

[jonathanbossenger]

https://wordpress.tv/2024/04/03/enqueuing-css-and-javascript/

[jonathanbossenger]

https://learn.wordpress.org/lesson/enqueuing-css-or-javascript/