Do I just add the jquery by echoing out the the jquery from within a function?
Do I somehow add the php variable check into the foo.js file?
No, off course no.
Use wp_localize_script. The original aim of this function was to translate the js scripts, but it allows to pass any kind of variables to js.
function register_foo() {
wp_register_script('foo-js', plugins_url('js/foo.js', __FILE__), array('jquery'), null);
$mydata = array(
'foo' => 'bar', 'awesome' => 'yes'
);
wp_localize_script('foo-js', 'mydata', $mydata); // this one do the magic
wp_enqueue_script('foo-js');
}
add_action('admin_enqueue_scripts', 'register_foo');
With this snippet the file ‘foo.js’ is inserted in admin pages, and a variable, that is a json object, is passed to the script and you can use it as you want.
Now, as example, in your ‘foo.js’ you can have;
jQuery(document).ready(function($){
var foo = mydata.foo;
var awesome = mydata.awesome;
if ( foo == 'bar' ) {
$('#someID.some-class > a').append('<div class="caption"></div>');
$(".caption").text("Is this script awesome? " + awesome + '!');
}
});