how to add custom javascript to wordpress functions.php

Question

I currently need to add some custom jQuery to my wordpress functions, i have added jQuery the following way:

add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}

I need to add the following:

$(document).ready(function () {
$(".infobfn").append('<a href="#" rel="tooltip" title="<?php echo $variable; ?>"><i class="icon-info-sign"></i></a>');});

The problem i have is that i cant add this to an external .js file as it contains php variables.

With it left in my functions i get the following:

Warning: Cannot modify header information - headers already sent by

I have added ob_start(); which was recommended. I though this worked, but then realised only half of my page had loaded.

i am currently not using php header within my functions.php and have also checked for white space.

Any ideas how i can get around this?

Answer 1

Two things you're doing wrong:

1. Dequeuing WP bundled jQuery

   • Don't Dequeue WordPress' jQuery

   • Why Loading Your Own jQuery is Irresponsible

2. Using jQuery without noConflict mode. The following example is the proper way to do it:

jQuery(document).ready(function($) {   
    // Now, $ will refer to jQuery
    // Write all your logic inside this block
});

---

And, to solve the use of PHP variables inside your Javascript file, use wp_localize_script . This function will pass any variables you want to a properly enqueued Javascript file.

Check this Answer for a working example.