WordPress makes it easy to enqueue custom JS and CSS. But since WordPress 4.4, a new page-type was introduced that most developers don’t know about – the “Embed Template”.
Embedding Content in External Sites
WordPress 4.4 has introduced the builtin embeds feature which made your site an “oEmbed Provider” with it’s own discovery links. Making it easy to use the page URL to present visual presentation of the page in external sites.
WordPress 4.5 improved this awesome feature making it easy to control the view of the embed content using a template page in your theme. Now you can edit the view of the embedded item using the embed-{post-type}-{post_format}.php
template. Supper simple!
WordPress Template Types
Until 4.4, WordPress had three types of templates: Front-End template, Login template and Admin template (back-end dashboard). As of 4.4, it has a fourth template type – the Embed template. This is important. Because you need to understand that those are entirely different types of pages. Each has it’s own file structure, functions and hooks.
Just to demonstrate the difference between those four types I was talking above, lets see which files control the header and footer:
- Front-End theme pages use
header.php
andfooter.php
files in thewp-content/themes
folder. - Admin theme pages use
admin-header.php
andadmin-footer.php
files in thewp-admin
folder. - Embed theme pages use
header-embed.php
andfooter-embed.php
files in thewp-content/themes
folder. - Login pages are the only exception, they don’t have separate template files, everything is in one file –
wp-login.php
– in the root folder.
Style and Script Hooks
Where to enqueue scripts and styles:
- Enqueueing Front-End scripts and styles is done using
wp_enqueue_scripts
action hook which is available since WordPress 2.8. - Enqueueing Admin scripts and styles is done using
admin_enqueue_scripts
action hook which is available since WordPress 2.8. - Enqueueing Login scripts and styles is done using
login_enqueue_scripts
action hook which is available since WordPress 3.1. - Enqueueing Embed scripts and styles is done using
enqueue_embed_scripts
action hook which is available since WordPress 4.4.
As a WordPress developer you should get to know the embed enqueue action hook. It’s a handy hook. And as the web becoming more collaborative, your site embedded view will become more important in the coming years.
Code Example
Adding custom CSS style to WordPress embed view is supper simple:
We already updated our Register Scripts Generator and the Register Styles Generator. You can use our tools to create code that enqueues CSS and JavaScript files to your embed-templates.
2 Comments:
leoNaN
I didn’t know that existed. It can help a lot with granular customization.
mac2net
Cheers. I missed this.