wp_get_inline_script_tag( string $data, array $attributes = array() ): string

Constructs an inline script tag.

Description

It is possible to inject attributes in the <script> tag via the ‘wp_script_attributes’ filter.
Automatically injects type attribute if needed.

Parameters

$datastringrequired
Data for script tag: JavaScript, importmap, speculationrules, etc.
$attributesarrayoptional
Key-value pairs representing <script> tag attributes.

Default:array()

Return

string String containing inline JavaScript code wrapped around <script> tag.

Source

function wp_get_inline_script_tag( $data, $attributes = array() ) {
	$is_html5 = current_theme_supports( 'html5', 'script' ) || is_admin();
	if ( ! isset( $attributes['type'] ) && ! $is_html5 ) {
		// Keep the type attribute as the first for legacy reasons (it has always been this way in core).
		$attributes = array_merge(
			array( 'type' => 'text/javascript' ),
			$attributes
		);
	}

	/*
	 * XHTML extracts the contents of the SCRIPT element and then the XML parser
	 * decodes character references and other syntax elements. This can lead to
	 * misinterpretation of the script contents or invalid XHTML documents.
	 *
	 * Wrapping the contents in a CDATA section instructs the XML parser not to
	 * transform the contents of the SCRIPT element before passing them to the
	 * JavaScript engine.
	 *
	 * Example:
	 *
	 *     <script>console.log('&hellip;');</script>
	 *
	 *     In an HTML document this would print "&hellip;" to the console,
	 *     but in an XHTML document it would print "…" to the console.
	 *
	 *     <script>console.log('An image is <img> in HTML');</script>
	 *
	 *     In an HTML document this would print "An image is <img> in HTML",
	 *     but it's an invalid XHTML document because it interprets the `<img>`
	 *     as an empty tag missing its closing `/`.
	 *
	 * @see https://www.w3.org/TR/xhtml1/#h-4.8
	 */
	if (
		! $is_html5 &&
		(
			! isset( $attributes['type'] ) ||
			'module' === $attributes['type'] ||
			str_contains( $attributes['type'], 'javascript' ) ||
			str_contains( $attributes['type'], 'ecmascript' ) ||
			str_contains( $attributes['type'], 'jscript' ) ||
			str_contains( $attributes['type'], 'livescript' )
		)
	) {
		/*
		 * If the string `]]>` exists within the JavaScript it would break
		 * out of any wrapping CDATA section added here, so to start, it's
		 * necessary to escape that sequence which requires splitting the
		 * content into two CDATA sections wherever it's found.
		 *
		 * Note: it's only necessary to escape the closing `]]>` because
		 * an additional `<![CDATA[` leaves the contents unchanged.
		 */
		$data = str_replace( ']]>', ']]]]><![CDATA[>', $data );

		// Wrap the entire escaped script inside a CDATA section.
		$data = sprintf( "/* <![CDATA[ */\n%s\n/* ]]> */", $data );
	}

	$data = "\n" . trim( $data, "\n\r " ) . "\n";

	/**
	 * Filters attributes to be added to a script tag.
	 *
	 * @since 5.7.0
	 *
	 * @param array  $attributes Key-value pairs representing `<script>` tag attributes.
	 *                           Only the attribute name is added to the `<script>` tag for
	 *                           entries with a boolean value, and that are true.
	 * @param string $data       Inline data.
	 */
	$attributes = apply_filters( 'wp_inline_script_attributes', $attributes, $data );

	return sprintf( "<script%s>%s</script>\n", wp_sanitize_script_attributes( $attributes ), $data );
}

Hooks

apply_filters( ‘wp_inline_script_attributes’, array $attributes, string $data )

Filters attributes to be added to a script tag.

Changelog

VersionDescription
5.7.0Introduced.

User Contributed Notes

  1. Skip to note 3 content

    A nice way to include Google Analytics and other scripts in the <head> of the document:

    function wpdocs_add_scripts_head() {
    		// Google Analytics
    		$ga_script = "window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga('create', 'UA-XXXXX-Y', 'auto');ga('send', 'pageview');";
    		echo wp_get_inline_script_tag( $ga_script );
    		echo wp_get_script_tag( array(
    			'async' => true,
    			'src' => 'https://www.google-analytics.com/analytics.js'
    		) );
    	}
    	add_action( 'wp_head', 'wpdocs_add_scripts_head', 1 );

    Will output:

    <script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga(‘create’, ‘UA-XXXXX-Y’, ‘auto’);ga(‘send’, ‘pageview’);
    </script>
    <script async src="https://www.google-analytics.com/analytics.js"></script>%5B/php%5D

    This article has good examples https://make.wordpress.org/core/2021/02/23/introducing-script-attributes-related-functions-in-wordpress-5-7/

  2. Skip to note 4 content

    This has to be used to make WP a CSP compliant system (at least, in the front end. Remains to be tested in the admin area)

    function wpdocs_add_nonce_to_scripts( $attr ) {
    	if ( 'text/javascript' !== $attr['type'] ) {
    		return $attr;
    	}
    
    	return array(
    		'type' => 'text/javascript',
    		'nonce' => '123',// Your Nonce. Obviously more featured than this example.
    	);
    }
    add_filter( 'wp_inline_script_attributes', 'wpdocs_add_nonce_to_scripts' );

    Then, you can use 'nonce-123' in your CSP Policy, example:
    "script-src 'self' 'noncoe-123';"

You must log in before being able to contribute a note or feedback.