Question about JavaScript – Load JavaScript in Footer

[chrishudson]

Hi I am wondering how can I move the java script plugin code to the bottom of my wordpress footer. My site is loading 28java script files and i think 12 css sheets before everything else. I am using Wp eStore, Emember, and the affilate plugin. My site is [http://golflessonacademy.com] if you look at the source code you will be able to see the issues I am having.

Any help here would be greatly appreciated.

Thanks,

Chris

[admin]

Your JavaScripts are coming from all kinds of plugins and themes (not just the 3 plugins you mentioned). We can tell you how to place the JavaScript in the footer for our plugins but that won’t solve your issue since you will still have a lot of files in the header coming from your theme and other plugins.

The best option would be to use a plugin to combine all the JavaScript files (this is really good for performance) and then place them where you want it (in the footer or header). There are plugins that can allow you to do this. I use W3 Total Cache myself for doing this kind of tricks:

https://support.tipsandtricks-hq.com/forums/topic/speed-suggestion

[chrishudson]

You mentioned there is a way where i can move the java script files for my plugins to the footer. Can you tell me how to do this. I have removed a bunch of plugins from my site. The only ones I have there now are WP eStore, Wp Emember, WordPress Importer, Enhanced text widget, Cloud Flare, 404 redirection, and caption pix. It has helped to speed things up a little bit.

I have tried several times over the past week to get everything to work with W3TC but for some reason i am unable to get it to work with the theme I am working. I have followed to the tee, 3 different tutorials over this time and to be honest i am getting exhausted trying to figure the whole thing out.

If You look at the source code now it will show some improvement because of the plugins I removed but if I could just move the eStore and Emember js files to the bottom it will then only have the necessary theme stuff there and should also help. There are a total of 9, so I think it will help.

Please advice.

Thanks for you suggestion with the W3TC but it didn’t work and I just need to find a different solution so I can try to get back to writing on my blog. Thanks again for your time and all your help.

Chris

[chrishudson]

Still just looking around to find out how to move the scripts to the bottom. Thanks.

[admin]

You can manually edit the code but I prefer to use a plugin to combine the files. One of these plugins can be a good alternative to combine the files:

http://www.prelovac.com/vladimir/wordpress-plugins/footer-javascript

http://wordpress.org/extend/plugins/js-css-script-optimizer/

http://wordpress.org/extend/plugins/wp-minify/

Try one at a time and add small number of files otherwise they can get messed up.

[chrishudson]

I have already tried all of these and they are not working. Can you please tell me how to it manually please so I can move forward.

Thanks ahead of time.

[chrishudson]

Just checking to see if anyone has gotten this yet? Just need to find out how to do it manually.

Thanks

[admin]

Before I give you manual tweak for this I should tell you that there are good reasons for us to use the “wp_enqueue_script” function of WordPress to load some JavaScript fields (it is also recommended by WordPress). When you manually add JavaScript in the footer you lose the ability to use this “wp_enqueue_script” function which is why I didn’t want to give you this manual tweak first.

With that said, here is a manual tweak that you can apply to change the code around (A little bit of PHP coding knowledge is required).

Step 1. Open the “wp_eMember1.php” file and find the following block of code (you can find this code inside the “load_library” function of this file):

if(!is_admin()){

//Load on all front pages of the site

wp_enqueue_style('eMember.style',WP_EMEMBER_URL.'/css/eMember_style.css');

wp_enqueue_style('eMember.style.custom',WP_EMEMBER_URL.'/css/eMember_custom_style.css');

wp_enqueue_style('validationEngine.jquery',WP_EMEMBER_URL.'/css/validationEngine.jquery.css');

wp_enqueue_script('jquery.validationEngine',WP_EMEMBER_URL.'/js/jquery.validationEngine.js');

wp_enqueue_script('jquery.hint',WP_EMEMBER_URL.'/js/jquery.hint.js');

wp_enqueue_script('ajaxupload',WP_EMEMBER_URL.'/js/ajaxupload.js');

wp_enqueue_script('jquery.tools',WP_EMEMBER_URL.'/js/jquery.tools.min.js');

wp_enqueue_script('jquery.libs',WP_EMEMBER_URL.'/js/jquery.libs.js');

if(get_bloginfo('version')<'3.0'){

wp_enqueue_script('jquery.pagination',WP_EMEMBER_URL.'/js/jquery.pagination-1.2.js');

wp_enqueue_script('jquery.confirm',WP_EMEMBER_URL.'/js/jquery.confirm-1.2.js');

}

else {

wp_enqueue_script('jquery.pagination',WP_EMEMBER_URL.'/js/jquery.pagination-2.0rc.js');

wp_enqueue_script('jquery.confirm',WP_EMEMBER_URL.'/js/jquery.confirm-1.3.js');

}

}

Once you find it replace it with the following:

if(!is_admin()){

//Load on all front pages of the site

wp_enqueue_style('eMember.style',WP_EMEMBER_URL.'/css/eMember_style.css');

wp_enqueue_style('eMember.style.custom',WP_EMEMBER_URL.'/css/eMember_custom_style.css');

wp_enqueue_style('validationEngine.jquery',WP_EMEMBER_URL.'/css/validationEngine.jquery.css');

}

The above change will remove all the JavaScript file loading from the header.

Step 2. Now, we need to add the code to load the JavaScripts in the footer. Simply add the following code just below or above the “load_library” function in the “wp_eMember1.php” file which will do the job:

function eMember_load_js()

{

if(!is_admin())

{

echo '<script type="text/javascript" src="'.WP_EMEMBER_URL.'/js/jquery.validationEngine.js"></script>';

echo '<script type="text/javascript" src="'.WP_EMEMBER_URL.'/js/jquery.hint.js"></script>';

echo '<script type="text/javascript" src="'.WP_EMEMBER_URL.'/js/ajaxupload.js"></script>';

echo '<script type="text/javascript" src="'.WP_EMEMBER_URL.'/js/jquery.tools.min.js"></script>';

echo '<script type="text/javascript" src="'.WP_EMEMBER_URL.'/js/jquery.libs.js"></script>';

echo '<script type="text/javascript" src="'.WP_EMEMBER_URL.'/js/jquery.pagination-2.0rc.js"></script>';

echo '<script type="text/javascript" src="'.WP_EMEMBER_URL.'/js/jquery.confirm-1.3.js"></script>';

}

}

add_action('wp_footer', 'eMember_load_js');

[chrishudson]

Would part 2 be done like this:

function load_library(){

function eMember_load_js()

{

if(!is_admin())

{

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.validationEngine.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.hint.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/ajaxupload.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.tools.min.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.libs.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.pagination-2.0rc.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.confirm-1.3.js”></script>’;

}

}

add_action(‘wp_footer’, ‘eMember_load_js’);

global $emember_config;

wp_enqueue_script(‘jquery’);

[admin]

Nope, you need to put the “eMember_load_js” function outside the “load_library” function. Put part2 above the following line if that makes it easy for you to understand.

//Part 2 code goes here



function load_library(){

......

.....

[chrishudson]

I followed your directions and it came up with this error. Do you have any idea why or how to fix it?

Parse error: syntax error, unexpected ‘}’ in /home/golfless/public_html/wp-content/plugins/wp-eMember/wp_eMember1.php on line 815

Am i missing a }or{ somewhere?

Thanks

[chrishudson]

Below is what I did. Is there anywhere you can see the error I have made? The top and bottom lines are just what it is placed in between.

Thanks

function eMember_load_js()

{

if(!is_admin())

{

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.validationEngine.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.hint.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/ajaxupload.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.tools.min.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.libs.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.pagination-2.0rc.js”></script>’;

echo ‘<script type=”text/javascript” src=”‘.WP_EMEMBER_URL.’/js/jquery.confirm-1.3.js”></script>’;

}

}

add_action(‘wp_footer’, ‘eMember_load_js’);

function load_library(){

……..

……..

if(!is_admin()){

wp_enqueue_style(‘eMember.style’,WP_EMEMBER_URL.’/css/eMember_style.css’);

wp_enqueue_style(‘eMember.style.custom’,WP_EMEMBER_URL.’/css/eMember_custom_style.css’);

wp_enqueue_style(‘validationEngine.jquery’,WP_EMEMBER_URL.’/css/validationEngine.jquery.css’);

}

}

}

function wp_eMember_widget_init(){

[Peter]

Hi,

I’m not sure if the above code you pasted reflects the entirety of your changes but on the third line you have a ‘}’ which doesn’t appear to have a matching opening ‘{‘.

[chrishudson]

This is the entire change I made. nothing else. So would I remove it, or where would I add the end? All I have tried to do is follow the direction of this post which started on page one. Just copy and paste. Unfortunately I am not a skilled coder but am trying desperately to get this done. Several people are complaining that the video stuff on the site is taking over 10 seconds to load for them. This is not good when it is a video membership site. I have removed several plugins and just need a way to move this info to the footer. It may not solve them problem entirely but I think there are over 9 something calls that would be eliminated once i can get this done.

Then I will be able to move to the next. One step at a time. But this experience has been frustrating because I know i can follow directions, it just has not worked out in my favor yet.

Thanks and i look forward to your response.

[Peter]

Hi,

Try removing the ‘}’ on the second last line in your code which you pasted above.

[Author]

Posts