Docs

[BodhiJames]

Hi there,

I have a child theme set up and would like to add the following Javascript to the head of the page so that I can add a calendar date-picker to a form that I’ve created. Here’s the script:

<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”></script&gt;

<script>
$(document).ready(function() {
$(“#datepicker”).datepicker();
});
</script>

It looks like I need to add this to the function.php of the child theme I’m using but not sure exactly how. Could you please give me the exact code to add to the above so I can paste it in that file?

Thx!

[Christian]

Hey there,

Please see this tutorial http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/. That applies for all WordPress themes.

Thanks.

[BodhiJames]

It looks like in that tutorial it is saying the code that I would need to add to the child theme’s function.php is:

<?php
function wpb_adding_scripts() {
wp_register_script(‘my_amazing_script’, plugins_url(‘amazing_script.js’, __FILE__), array(‘jquery’),’1.1′, true);
wp_enqueue_script(‘my_amazing_script’);
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );
?>

How would I incorporate the following into the above code that they recommend so that it is ready to add to that file?

<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”></script>

<script>
$(document).ready(function() {
$(“#datepicker”).datepicker();
});
</script>

[Nabeel A]

Hi again,

Please add the following code in your Child Theme’s functions.php file:

add_action('wp_footer','calendar_script');
function calendar_script() { 
?>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

	<script>
	jQuery(document).ready(function($) {
		$("#datepicker").datepicker();
	});
	</script>
<?php 
}

Let us know how this goes!

[BodhiJames]

This worked perfectly! Thanks so much for the prompt and helpful support.

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts