Inline style/script

The JS & CSS code is inserted directly into the page through tags <style <script (not src attr) called inline.

You can modify it's content before it executes on the browser. Use the hook hpp_inline_script hpp_inline_style as bellow:

/**
 * Edit script tag in head,footer,footer-data,get_option..
 *@param $js
 */
add_filter('hpp_inline_script', function($js) {
	//in footer
	if(strpos($js, '_HWIO.extra_assets=')!==false) {
		$js = str_replace('})(jQuery);;','})(null);;', $js);
		$js = str_replace('_HWIO.readyjs(function()','_HWIO.readyjs(function($)', $js);
		
	}
	
	//remove `_HWIO.readyjs`
	if(strpos($js, 'function tdBlock')!==false) {
		$js = str_replace('_HWIO.readyjs(function(){','', substr($js,0, strlen($js)-2));
	}
	//other
	if(strpos($js,'_HWIO.readyjs')===false) $js = str_replace('timer_metaslider_12()', '_HWIO.readyjs(timer_metaslider_12)', $js);
	
	//facebook
	if(strpos($js, 'fbq(')!==false && strpos($js, '},"fbq")')===false) {
		$js = (substr($js,-3)=='});'? substr($js,0,-3): substr($js,0,-2)). '},"fbq")';
	}
	
	return $js;
});

/**
 *@param $css
*/
add_filter('hpp_inline_style', function($css){
	return $css;
});

Each JS file allows you to add inline JS by the function wp_add_inline_script , these inline code from all JS files will group into a single <script tag & placed at the bottom of the page. You can also modify each inline code like this:

//script data
add_filter('hpp_inline_script_part', function($js, $handle){
	if($handle=='wp-util') $js = str_replace('find', 'replace', $js);
	return $js;
}, 10, 2);

Lazy script

Almost Inline scripts depend on other library such as jquery so to work without issue these inline code will be fired only after all JS files have complete execution. Hence they need to delay a few milliseconds, and you can see it nested in the event _HWIO.readyjs

However, if your website has some variables that need to be shared for other scripts to use, So you will have to open global for that variable. There are 2 ways to do this: create global variables with window. using the filter hpp_inline_script OR remove the event _HWIO.readyjs

Method 1: using the filter to replace string from var something= towindow.something=

Method 2: removing the wrap event 'readyjs' , by adding blacklist text that found in <script tag you want to remove this event.

add_filter('hpp_allow_readyjs', function($ok, $js){
	if(hpp_in_str($js, ['new PerformanceObserver',]) ) return false;
	return $ok;
}, 10, 2);

By default, entire inline scripts are run after the document ready, if you want to specific which inline code should run only after the user interacts on the web (ex: scroll, mouse move, click..) so see the below example.

add_filter('hpp_delay_it_script', function($v, $js){
	$find = [
		'www.googletagmanager.com','connect.facebook.net','www.google-analytics.com','bing.com','new Ya.Metrika',
		'googlesyndication','adsbygoogle',"fbq('set'",'fbq("set"',"fbq('init'","fbq('track'",'gtag(',
	];
	if(hpp_in_str($js, $find)) return true;
	return $v;
},10, 2);

With the above snippet, help you create the readyjs event has form of: _HWIO.readyjs(null,function(){});

Last updated