Including assets

[cynthianorman]

Details

• Content type: Lesson
• Content title: Custom functionality
• Topic description: A guide on including CSS, JavaScript, and images in your themes.
• Audience: Developer
• Experience Level: Intermediate

Learning Objectives

The learning objectives are to:

• Familiarize yourself with utility functions to include assets in your theme.
• Include CSS in your theme either using stylesheets or inline styles.
• Include JavaScript in your theme by either using an external file or inline JavaScript.
• Include images in your theme.
• Include fonts in your theme.

Relevant Links

https://developer.wordpress.org/themes/core-concepts/including-assets/

[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
• [x] Lesson reviewed
• [x] Lesson video submitted and published to WPTV
• [x] Lesson created on Learn.WordPress.org
• [x] Lesson video published to YouTube
• [x] Lesson on Learn.WordPress.org updated with YouTube video
• [x] Lesson published to Learn.WordPress.org

[cynthianorman]

This Intermediate Theme Developer Learning Pathway Lesson is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

https://youtu.be/mxEe9HquA4s

[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).

Great lesson, @cynthianorman.

Watching this, I thought it might be nice to add an explanation on how to include fonts. What do you think?

[cynthianorman]

@ironnysh I was originally going to then opted out when I learned of the font library BUT of course there are many themes out there including fonts via functions.php so I'll add it in

Thank you!

[ironnysh]

The Font Library is a real finallly for non-coders :-) But yeah, including fonts in the theme is very common. Check this out, as well: https://make.wordpress.org/core/2024/03/14/new-feature-font-library/.

[digitalchild]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• [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).

A nice overview for including assets @cynthianorman

2:20 - You mention that they are located within the assets, JS folder. It might be a good visual to collapse the assets folder on the left to show where it is located, so there is no confusion.

[cynthianorman]

Thank you for your feedback @digitalchild.

[jonathanbossenger]

https://youtu.be/5Q9vRmDgKJ4

[cynthianorman]

@jonathanbossenger

YouTube chapters

(0:07) Learning objectives (0:30) Describe how to enqueue styles and scripts (1:09) Include CSS in your theme either using stylesheets or inline styles (1:59) Include JavaScript in your theme by either using an external file or inline JavaScript (2:33) Include images in your theme (3:01) Include fonts in your theme. (4:14) Next steps

[cynthianorman]

//publish