Home » Wordpress » Add javascript and CSS to footer

Add javascript and CSS to footer

Posted by: admin November 30, 2017 Leave a comment

Questions:

Im looking to improve my page load time/ranking and according to PageSpeed Insights.. the problem is a lot of my scripts/css are render blocking. How can i successfully use wp_enqueue_script() to help me get the bulk of my scripts into my footer instead of my header (wordpress).

subject site

CSS examples

<!-- CSS -->
<link rel="stylesheet" href="<?php  echo get_option('siteurl'); ?>/wp-content/themes/<?php  echo get_current_theme()  ?>/style-jquery-ui-1.8.6.custom.css" type="text/css" />
<link rel="stylesheet" href="<?php  echo get_option('siteurl'); ?>/wp-content/themes/<?php  echo get_current_theme()  ?>/style-prettyPhotoCSS.php" type="text/css" />

Script Example

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.7.1'></script>
Answers:

Using wp_enqueue_script() would be something like this;

add_action('wp_enqueue_scripts','load_scripts');
function load_scripts() {
  wp_enqueue_script( 'modernizr', get_template_directory_uri() .'/js/modernizr.custom-2.6.2.min.js', array('jquery'), '0.1', true );
}

The last true of the function place the script call in the footer

Questions:
Answers:

http://www.wpbeginner.com/wp-tutorials/how-to-move-javascripts-to-the-bottom-or-footer-in-wordpress/

https://developers.google.com/speed/docs/insights/BlockingJS

http://unserkaiser.com/blog/2013/10/08/how-to-move-wordpress-core-javascript-to-the-footer/

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Use the wp_enqueue_script.

“Once you have found the plugin or theme that is adding JavaScript in the header section, the next step is to find out where the plugin has a call for the file. In one of your theme or plugin’s PHP files you will see a call to that particular .js file.

If the plugin or theme is already using enqueuing to add JavaScript file, then all you need to do is change wp_register_script function in your plugin or theme and add true for the $in_footer parameter. “