Palasthotel GmbH

greatestview

<p><strong>CAUTION</strong>: This plugin is now deprecated! The successor plugin is <a href="https://wordpress.org/plugins/embed-javascript-file-content/" rel="ugc">Embed JavaScript File Content</a>. The new plugin is rebuild from scratch and more rock solid: It respects order and position of scripts and extra scripts added via <code>wp_add_inline_script</code> or <code>wp_localize_script</code> don’t get lost. Give it a try!</p>
<p>In some cases you cannot wait for a JavaScript file to load, even if it is placed early in the <code><head></code> section of your template. You can benefit from better performance, if you place the JavaScript code directly inside a <code><script></code> tag into the header. This is where this plugin comes in: It provides a filter <code>inline_javascript_in_head_handles</code>, which takes JavaScript handles, dequeues those scripts and echos their code content inline into the head section instead of linking them via a script tag.</p>
<p>Please beware that placing lots of JavaScript code inline in the <code><head></code> section can be critical! First you lose caching benefits and second the document size can increase easily. A general rule of thumb is that you should only consider JavaScript files for inline placement, which are critical and which have a file size lower than ~500 Bytes.</p>
<h4>Example</h4>
<pre><code>add_action( 'wp_enqueue_scripts', 'my_scripts' );
function my_scripts() {
    // Some critical script is enqueued
    wp_enqueue_script( 'js-detection', get_template_directory_uri() . '/js/js-detection.js' );
}

/**
 * Define JavaScript handles to be echoed inline in the html head section.
 */
add_filter( 'inline_javascript_in_head_handles', 'my_inline_javascript_in_head_handles', -20 );
function my_inline_javascript_in_head_handles( $handles ) {
    $scripts = [ 'js-detection' ];

    return array_merge( $handles, $scripts );
}
</code></pre>


Inline JavaScript in Head

Boosts performance of critical short JavaScripts by placing their content directly into the HTML head.

MagicStick

<p>Easily enqueue your favourite javascript and CSS libraries from an open-source package library. Designed specifically for WordPress theme developers.</p>
<p><iframe loading="lazy" title="Enqueue Me Walkthrough" src="https://player.vimeo.com/video/215253163?dnt=1&app_id=122963" width="750" height="469" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write"></iframe></p>
<ul>
<li>Enqueue jQuery and CSS packages from a library of popular packages</li>
<li>Save your favourite packages to access easily across all your projects</li>
<li>Drag an drop packages to change package dependancies</li>
<li>Add your own custom packages to our public library or make them visible for your use only</li>
<li>Export and Import your Enqueue configuration across all your projects</li>
<li>Save and edit your favourite lists for use across all your projects</li>
</ul>


Enqueue Me

Takes away the graft of seeking updated plugins/resources, and the pain of manually adding the code to your WordPress script queue.

Definitely a new standard!

Such enqueue, many timesaver, wow!

Easily enqueue your favourite javascript and CSS libraries from an open-source package library. Designed specifically for WordPress theme developers.

Inline JavaScript in Head vs Enqueue Me