search

roots / sage

WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and a modern development workflow
https://roots.io/sage/
MIT License
12.74k stars 3.06k forks source link

Duplicate javascript links #272

Closed iagdotme closed 12 years ago

iagdotme commented 12 years ago

I'm uncertain as to whether this is a Roots issue. When I use certain plugins, I notice that the script.js and plugins.js scripts are being loaded twice (once in the header and once in the footer). Header: `

<script defer src="/plugins/wp-jquery-lightbox/jquery.lightbox.min.js"></script>
<script defer src="/js/plugins.js"></script>
<script defer src="/js/script.js"></script>
    <script type='text/javascript' src='/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.8.16'></script>
    <script type='text/javascript' src='/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.8.16'></script>
    <script type='text/javascript' src='/wp-includes/js/jquery/ui/jquery.ui.position.min.js?ver=1.8.16'></script>`

Footer: `

     <script defer src="/js/script.js"></script>`

(sorry, for some reason I can't work out how to properly format multiple lines of code in github) I assume Roots puts the javascript in the header, but some of the plugins are reloading the scripts in the footer.

retlehs commented 12 years ago

ew. i will fix this when i fix #259 (hopefully this weekend) - thanks for the issue, this is definitely a problem!

retlehs commented 12 years ago

49300042c8dc00170b10ccc7b61d9c966f9e41ee fixes some script problems..

i'm able to run that WP jQuery Lightbox plugin now without any issues. i tried to install Events Manager but i can't even activate it without errors

let me know if you still see the problems after updating your roots-scripts.php

benfrain commented 12 years ago

I had the same problem when using 'Wordpress Popular Posts Plugin' - if I deactivate the plugin I just get the plugin and script once again. Presumably it's something to do with the plugin?

I still see the problem using the latest roots-scripts.php

(BTW - Roots is friggin' superb!)

iagdotme commented 12 years ago

Thanks guys. I've updated my WP site with the new file, but I don't think it's fixed the issue. I'll look into it further and get back to you. I've noticed that the duplicate calling of the scripts seems to happen on pages where I'm using a specific plugin- Pronamic Google Maps. I'm unsure if it is that plugin that is causing the issues, or whether there is something happening with Roots. I'll have a further play, make sure I'm doing everything correctly and get back to you. Does anyone have any ideas as to why a plugin would re-call these javascript files?

retlehs commented 12 years ago

@bfuk: i activated that plugin and can't see it happening but there's also not enough data. could you please upload the html output of your site with that plugin so i can see?

@baritoneuk: i'm not sure if i trust that plugin. i tried publishing a post after activating it with a map, with debug turned on, and got this error after submitting the post:

Notice: Undefined property: stdClass::$status in /Users/bword/Sites/roots/wp-content/plugins/pronamic-google-maps/classes/Pronamic_Google_Maps_Admin.php on line 215

Notice: Undefined property: stdClass::$status in /Users/bword/Sites/roots/wp-content/plugins/pronamic-google-maps/classes/Pronamic_Google_Maps_Admin.php on line 215

Warning: Cannot modify header information - headers already sent by (output started at /Users/bword/Sites/roots/wp-content/plugins/pronamic-google-maps/classes/Pronamic_Google_Maps_Admin.php:215) in /Users/bword/Sites/roots/wp-includes/pluggable.php on line 866

..although the post did publish and i'm seeing what you're seeing. i think it has to do with the plugin author's use of wp_print_scripts / not using http://codex.wordpress.org/Function_Reference/wp_enqueue_script properly

iagdotme commented 12 years ago

@retlehs thanks. That's a shame, as the plugin works really well on my site and has a fab geocoder system. I don't know enough about Wordpress coding to understand the issues you think it could be do with, and the plugin author's first language isn't English. It looks, however that the issue may be with the plugin and not Roots. So I'll post a question on the Pronamic Google Maps support forum. I find it frustrating using plugins sometimes as you never know how well they are coded.

benfrain commented 12 years ago

Hi Ben, OK here is the <head> with that plugin disabled

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <title>Hello world! | Ben Frain</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no"/>

    <link rel="stylesheet" href="/notepad/css/style.css">

  <link rel="alternate" type="application/rss+xml" title="Ben Frain Feed" href="http://bfr2.benfrain.com/notepad/feed/">

  <script src="/notepad/js/libs/modernizr-2.5.0.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/notepad/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

    <link rel="stylesheet" href="/notepad/wp-includes/css/admin-bar.css?ver=20111209">
    <script src="/wp-includes/js/admin-bar.js"></script>
    <script src="/notepad/js/plugins.js"></script>
    <script src="/notepad/js/script.js"></script>
<script type='text/javascript' src='/notepad/js/scroll.js?ver=3.3.1'></script>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
</style>

    <link rel="canonical" href="http://bfr2.benfrain.com/notepad/hello-world/">

</head>

And here is the same head section with it enabled:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <title>Hello world! | Ben Frain</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no"/>

    <link rel="stylesheet" href="/notepad/css/style.css">

  <link rel="alternate" type="application/rss+xml" title="Ben Frain Feed" href="http://bfr2.benfrain.com/notepad/feed/">

  <script src="/notepad/js/libs/modernizr-2.5.0.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/notepad/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

    <link rel="stylesheet" href="/notepad/wp-includes/css/admin-bar.css?ver=20111209">
    <script src="/wp-includes/js/admin-bar.js"></script>
    <script src="/notepad/js/plugins.js"></script>
    <script src="/notepad/js/script.js"></script>
<script type='text/javascript' src='/notepad/js/scroll.js?ver=3.3.1'></script>

<!-- Wordpress Popular Posts v2.2.1 -->
<link rel="stylesheet" href="/notepad/plugins/wordpress-popular-posts/style/wpp.css" type="text/css" media="screen" />
<!-- End Wordpress Popular Posts v2.2.1 -->

    <script src="/wp-includes/js/admin-bar.js"></script>
    <script src="/notepad/js/plugins.js"></script>
    <script src="/notepad/js/script.js"></script>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
</style>
    <link rel="canonical" href="http://bfr2.benfrain.com/notepad/hello-world/">

</head>

Is that everything you need?

retlehs commented 12 years ago

where is /notepad/js/scroll.js?ver=3.3.1 coming from?

benfrain commented 12 years ago

Hi Ben,

It's just a custom script I'd added through functions.php.

Cheers - Ben

retlehs commented 12 years ago

please share your functions.php or at least the full code you're using to enqueue the script

benfrain commented 12 years ago

Hi, yes, the script names have changed as I've been working on consolidating my JS files into the plugin and script variants. However, here is the only additions to functions.php I have added:

// run on pages 
function replaceList() {
if ( !is_admin() && is_page() ) { 

    // script
        wp_register_script('replaceList', ( get_bloginfo('template_url') . '/js/replaceList.js'), array('jquery')); //first register the custom script
        wp_enqueue_script('replaceList'); // then let wp insert it 

    }
}
add_action( 'wp_print_scripts', 'replaceList'); // now just run the function

// disable auto p on pages
function get_rid_of_wpautop(){
  if(is_page()){
    remove_filter ('the_content', 'wpautop');
    remove_filter ('the_excerpt', 'wpautop');
  }
}

add_action( 'template_redirect', 'get_rid_of_wpautop' );
retlehs commented 12 years ago

you need to tweak the way your scripts are being enqueued, look at roots-scripts.php for an example (using the wp_enqueue_scripts action hook)

benfrain commented 12 years ago

In case anyone else needs to do the same thing. I amended the roots-scripts.php to load my extra script only on pages by amending the code as follows:

function roots_scripts() {
  $template_uri = get_template_directory_uri();
  wp_register_script('roots_plugins', ''.$template_uri.'/js/plugins.js', false, null, false);
  wp_register_script('roots_script', ''.$template_uri.'/js/script.js', false, null, false);
  wp_enqueue_script('roots_plugins');
  wp_enqueue_script('roots_script');
  // bfuk added to load only on pages
  if ( !is_admin() && is_page() ) {
    wp_register_script('roots_list', ''.$template_uri.'/js/replaceList.js', false, null, false);
    wp_enqueue_script('roots_list');
  } 
  // end bfuk end
}

However, with the 'Wordpress popular posts' plugin enabled, I still get the plugin and script files loading twice.

Thanks again Ben for the sterling work and support!

rustycoat commented 12 years ago

Hi, I'm having a problem with a colorbox plugin (lightbox plus) that I believe fits into this thread. It looked like it should have been fixed already. My output is including an extra leading slash when I look at the HTML.

as follows:

 <script src="//wp-content/plugins/lightbox-plus/js/jquery.colorbox-min.js">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

It looked like there was a fix for this, but I am using the latest roots-scripts.php and still am experiencing a similar problem.