Forums

WordPress › Support » How-To and Troubleshooting

[resolved] Javascript only works without wp_head (6 posts)

  1. cpatience
    Member
    Posted 1 year ago #

    I'm working on some click to copy coding and came across an issue. The code and scripts do not work when I call <?php wp_head(); ?>, but if I delete that code from my header, then the scripts work properly. Has anyone else had problems like this? I'm calling the scripts like:

    <head>
.
.
.
<script type="text/javascript" src="http://www.creativepatience.com/sample_blog/zeroclipboard/ZeroClipboard.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
	<script type="text/javascript" src="http://www.creativepatience.com/sample_blog/js/clipboard.js"></script>
	<?php wp_head(); ?>
</head>

    Any assistance would be much appreciated

  2. charlesolaes
    Member
    Posted 1 year ago #

    try using wp_enqueue_scripts instead. http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Just make sure you add the correct dependencies when registering your clipboard scripts

  3. lgkevincc
    Member
    Posted 1 year ago #

    there are conflicts when you called wp_head(). So if you removed wp_head, some codes didn't run and the conflicts solved. But it's not a real solution. Try wp_enqueue_script as charlesolaes said.

  4. cpatience
    Member
    Posted 1 year ago #

    Thanks for the tips. I was playing around with the wp_enqueue_script before...this is what I've inserted into my functions.php after deleting the three <script> lines. It still isn't working - does this functions.php code look correct?

    function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
        wp_enqueue_script( 'jquery' );
    }
}    

add_action('init', 'my_init_method');

if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('clipboard',
       'http://www.creativepatience.com/sample_blog/js/clipboard.js',
       array('jquery'),
       '1.0' );
   // enqueue the script
   wp_enqueue_script('clipboard');

   wp_register_script('zeroclipboard',
       'http://www.creativepatience.com/sample_blog/zeroclipboard/ZeroClipboard.js',
       array('jquery'),
       '1.0' );
   // enqueue the script
   wp_enqueue_script('zeroclipboard');
}

    Thanks much.

  5. charlesolaes
    Member
    Posted 1 year ago #

    try putting second block of code in a function and adding a hook to it

    function my_function(){
if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('clipboard',
       'http://www.creativepatience.com/sample_blog/js/clipboard.js',
       array('jquery'),
       '1.0' );
   // enqueue the script
   wp_enqueue_script('clipboard');

   wp_register_script('zeroclipboard',
       'http://www.creativepatience.com/sample_blog/zeroclipboard/ZeroClipboard.js',
       array('jquery'),
       '1.0' );
   // enqueue the script
   wp_enqueue_script('zeroclipboard');
}
}
//add_action('init', 'my_function');
//I THINK you can use wp_head and wp_enqueue_script as hooks as well

  6. cpatience
    Member
    Posted 1 year ago #

    I wrapped that second code in a function and added it. Still no change. When I view the page source, I could clearly see that the scripts were being called.

    Then I tried literally copying the code from the page that rendered using wp_head and pasting it directly into header.php (without the wp_head.) Everything was working until I pasted this code which wp_head outputs:

    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css">
	html { margin-top: 28px !important; }
	* html body { margin-top: 28px !important; }
</style>

    I have no idea why these styles would cause the error, but I was able to remove the code by deactivating the admin bar using 

    wp_deregister_script('admin-bar');
wp_deregister_style('admin-bar');
remove_action('wp_footer','wp_admin_bar_render',1000);

    and now it appears that everything is working!

    There is no admin bar, but it's worth the loss.

    Thanks for the help.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags