Support » Fixing WordPress » Javascript only works without wp_head

  • Resolved cpatience

    (@cpatience)


    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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

    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.

    Thread Starter cpatience

    (@cpatience)

    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.

    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
    Thread Starter cpatience

    (@cpatience)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Javascript only works without wp_head’ is closed to new replies.