Add javascript dynamically via javascript

Insert javascript file into document dynamically via javascript:

(function () {
	var script = document.createElement('script');
	script.type = 'text/javascript';
    script.src = 'https://code.jquery.com/jquery-3.3.1.min.js';
    document.head.appendChild(script);
	// document.body.appendChild(script);
	
	setTimeout(function(){
		$('div').slideUp(5000);
	}, 5000);
}());

Add stylesheet dynamically via javascript

Insert CSS file into document dynamically via javascript:

(function () {
	var styles = document.createElement('link');
	styles.rel = 'stylesheet';
	styles.type = 'text/css';
	styles.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css';
	document.head.appendChild(styles);
	document.body.classList.add('animated', 'infinite', 'shake');
}());

Debugging the issue

Try to isolate the issue. Copy the code that you have issues with and paste it into the clean page template.

Can you still reproduce the issue? If no – than you are missing some code from the main template. If you still can reproduce the issue than continue reading.

Now you need to start removing parts that you think are irrelevant. You should remove parts one by one with fairly small pieces of code. Refresh the page after each code remove and check if you still can reproduce the issue.

Can you still reproduce the issue? If yes – try to remove the next piece of code. If no – bring the last removed piece of code (with Ctrl+Z or what ever hot key is in your laptop). Now you found the piece of code where the issue might be. This should give you a clue to locate the issue and ways to fix it.

image placeholder

placeholder.com

html:

<img src="http://via.placeholder.com/350x150">

result:

Holder.js – works offline, uses svg

html:

<img data-src="holder.js/256x113?bg=#b4e6ca&amp;fg=#90b8a1" alt="256x113" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22256%22%20height%3D%22113%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20113%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1623c2041cb%20text%20%7B%20fill%3A%2390b8a1%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A13pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1623c2041cb%22%3E%3Crect%20width%3D%22256%22%20height%3D%22113%22%20fill%3D%22%23b4e6ca%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2294.25833511352539%22%20y%3D%2262.5%22%3E256x113%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">

Output:

256x113

Changelog

Changelog

Guiding Principles:

  • Changelogs are for humans, not machines.
  • There should be an entry for every single version.
  • The same types of changes should be grouped.
  • Versions and sections should be linkable.
  • The latest version comes first.
  • The release date of each version is displayed.
  • Mention whether you follow Semantic Versioning.

Types of changes:

  • [Added] for new features.
  • [Changed] for changes in existing functionality.
  • [Deprecated] for soon-to-be removed features.
  • [Removed] for now removed features.
  • [Fixed] for any bug fixes.
  • [Security] in case of vulnerabilities.

 

Adding custom attributes to script and stylesheets tags

function custom_attr_style( $html, $handle, $href, $media ) {
    $handles = array('twentyeleven-style'); // stylesheet handle
    if( in_array( $handle, $handles ) ) {
        $html = str_replace(' href=', ' async href=', $html); // added custom attribute
    }
    return $html;
}
add_filter( 'style_loader_tag',  'custom_attr_style', 10, 4 );
 
function custom_attr_script( $html, $handle, $src ) {
	$handles = array('twentyeleven-script'); // script handle
    if( in_array( $handle, $handles ) ) {
        $html = str_replace(' src=', ' async src=', $html); // added custom attribute
    }
    return $html;
}
add_filter( 'script_loader_tag', 'custom_attr_script', 10, 3 );

Optimizing Contact Form 7

Loading Contact Form 7 CSS and JavaScript files on pages with specific slugs only:

// Deregistering Contact Form 7 CSS files on all pages without a Contact form
add_action( 'wp_print_styles', 'universio_cf7_deregister_styles', 100 );
function universio_cf7_deregister_styles() {
    if ( ! is_page( array( 'contact', 'contact-us', 'feedback' ) ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

// Deregistering Contact Form 7 JavaScript files on all pages without a Contact form
add_action( 'wp_print_scripts', 'universio_cf7_deregister_javascript', 100 );
function universio_cf7_deregister_javascript() {
    if ( ! is_page( array( 'contact', 'contact-us', 'feedback' ) ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

Code Coverage

You can check the CSS and JS code coverage with Chrome Dev Tools:

You can show the Coverage tab from Dev Tools menu by choosing “More tools” => “Coverage”.

Alternatively, to open Dev Tools press Cmd+Opt+I (Mac) or Control+Shift+I (Windows, Linux). After this, you can access the Coverage from the Command Menu: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux) and then typing “Show Coverage”.