Palasthotel GmbH

greatestview

CAUTION: 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!
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.
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.
<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.

Panagiotis (Panos) Anastasiadis

Enqueueror empowers WordPress developers to manage and develop their CSS & JavaScript files efficiently. It facilitates conditional CSS & JavaScript loading through the use of naming conventions and provides numerous features to enhance the code development workflow.
<h4>Quick Start Examples</h4>
<ul>
<li>
Load a stylesheet globally 
Code a CSS file named global.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the page with id = 1 
Code a CSS file named type-page-id-1.css or type-id-1.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the page with slug = ‘example-page’ 
Code a CSS file named type-page-slug-example-page.css or type-slug-example-page.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the category term with id = 1 
Code a CSS file named tax-category-term-id-1.css or term-id-1.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the category term with slug = ‘category1’ 
Code a CSS file named tax-category-term-slug-category1.css or term-slug-category1.css in the stylesheets directory.
</li>
</ul>
<h4>Guide</h4>
You may read the guide at <a href="https://panastasiadist.github.io/Enqueueror/" rel="nofollow ugc">GitHub</a>.
<h4>Usage</h4>
<ul>
<li>Install Enqueueror.</li>
<li>Create the scripts and stylesheets directories under the active theme’s root directory.</li>
<li>Consult the guide at <a href="https://panastasiadist.github.io/Enqueueror/" rel="nofollow ugc">GitHub</a>.</li>
</ul>

Enqueueror

Supercharged CSS & JS Coding for WordPress

Inline JavaScript in Head vs Enqueueror