Blog

Enqueue Scripts and Styles in Embed Pages

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 and footer.php files in the wp-content/themes folder.
  • Admin theme pages use admin-header.php and admin-footer.php files in the wp-admin folder.
  • Embed theme pages use header-embed.php and footer-embed.php files in the wp-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.

 

Rami Yushuvaev

I'm an entrepreneur, a web developer and a blogger. I’ve contributed code to each and every release since WordPress 2.8. I'm the Hebrew GTE responsible for the translation and the release of WordPress Hebrew version. The founder GenerateWP.com and several other WordPress related projects. I work mainly with Israeli startups, providing plugin development services.

2 Comments:

Leave a Reply