Support » How-To and Troubleshooting » Adding Javascript to WP from old site

Adding Javascript to WP from old site

  • Hi – I am a newbie here and have very limited knowledge of Javascript, php etc but do have a programming b/ground. I want to use existing code from a page on our existing site http://www.poncesuites.net/reservation/selectroom.php in a page on the site I am developing using WP 3.7.1 http://www.poncesuiteshotel.com/check-availability.
    Below is an extract of the code (there are 1000+ lines in total).
    I have looked at many posts and sites regarding this but am unsure where to start. Can someone please point me in the right direction!!

    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script src="datetimepicker_css.js"></script>
    <!--sa minus date-->
    <script type="text/javascript">
    	//============ LEAVE PAGE CONFIRMATION ===============
    	var stay_flag = true;
    	window.onbeforeunload = function (e) {
    	  if (stay_flag){
    	  var message = "You are about to reserve room/s.",
    	  e = e || window.event;
    	  // For IE and Firefox
    	  if (e) {
    		e.returnValue = message;
    	  // For Safari
    	  return message;
    <script type="text/javascript">
    	// Error checking kept to a minimum for brevity
    	function setDifference(frm) {
    	var dtElem1 = frm.elements['start'];
    	var dtElem2 = frm.elements['end'];
    	var resultElem = frm.elements['result'];
    // Return if no such element exists
    	if(!dtElem1 || !dtElem2 || !resultElem) {
    	//assuming that the delimiter for dt time picker is a '/'.
    	var x = dtElem1.value;
    	var y = dtElem2.value;
    	var arr1 = x.split('/');
    	var arr2 = y.split('/');
    // If any problem with input exists, return with an error msg
    if(!arr1 || !arr2 || arr1.length != 3 || arr2.length != 3) {
    resultElem.value = "Invalid Input";
    var dt1 = new Date();
    dt1.setFullYear(arr1[2], arr1[1], arr1[0]);
    var dt2 = new Date();
    dt2.setFullYear(arr2[2], arr2[1], arr2[0]);
    resultElem.value = (dt2.getTime() - dt1.getTime()) / (60 * 60 * 24 * 1000);
    <!--sa minus date// <script type="text/javascript"> -->
    <!--sa input that accept number only-->
    <SCRIPT language=Javascript>
          function isNumberKey(evt)
             var charCode = (evt.which) ? evt.which : event.keyCode
             if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
             return true;
    <script type="text/javascript">
    function GetInternetExplorerVersion()
      // Returns the version of Internet Explorer or a -1 for other browsers.
        var rv = -1;
        if(navigator.appName == 'Microsoft Internet Explorer')
          var ua = navigator.userAgent;
          varre  = newRegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
          if(re.exec(ua) != null)
          rv = parseFloat( RegExp.$1 );
        return rv;
      function functiononLoad()
        var version = GetInternetExplorerVersion()
        if (version <= 7 && version > -1)
          // Code to run in Internet Explorer 7 or earlier.
    	  // document.getElementById(para4).innerHTML="";
    	$arival = $_POST['start'];
    	$departure = $_POST['end'];
    	$adults = $_POST['adult'];
    	$child = $_POST['child'];
    	// $date_para_start= str_split($arival,"/");
    	$date_start_day  =substr($arival,0,2);
    	$date_start_year =substr($arival,6,4);
    	$date_end_day  =substr($departure,0,2);
    	$date_end_year =substr($departure,6,4);
    	$_SESSION['date_started'] = $date_start_day."/".$date_start_month."/".$date_start_year;
    	$_SESSION['date_ended'] = $date_end_day."/".$date_end_month."/".$date_end_year;
    	$_SESSION['adultNum'] = "";
    	$_SESSION['childNum'] = "";
    	//Java Variables
    	echo "<script type=\"text/javascript\">";
    	echo "var date_start_day=". $date_start_day .";";
    	echo "var date_start_month=". $date_start_month .";";
    	echo "var date_start_year=". $date_start_year .";";
    	echo "var date_end_day=". $date_end_day .";";
    	echo "var date_end_month=". $date_end_month .";";
    	echo "var date_end_year=". $date_end_year .";";
    	echo "var original_adultNum=". $adults .";";
    	echo "var adultNum=Number(". $adults .");";
    	echo "var childNum=Number(". $child .");";
    	echo "</script>";

Viewing 15 replies - 1 through 15 (of 28 total)
  • WPyogi


    Forum Moderator

    Thanks for the quick reply Wpyogi. I already have this link bookmarked and ‘sort of’ understand some of it. Any chance of an example using the code I attached? —- PLEASE!

    Are you using your own theme?

    I am using Cusomizr theme (sorry, should have said). Any help will be much appreciated. If someone can give me an example of how to ‘convert’ at least one of the javascript references in the existing code, I can probably do the rest (hopefully). Sorry to be asking this but I cannot get anyone local who knows WordPress and as stated, have VERY limited knowledge of web based languages.
    THANKS in advance.

    Have you created a Child Theme?

    Yes I have Andrew. Boy! Quick response – thanks. You can tell I’m a newbie!

    What folders (if any) do you have in your Child Theme?

    OK, I copied some of the folders from the old site ‘reservation’ folder to the child theme folder – namely folders:
    js, libs, scripts, src.

    Also have a css folder containing:

    In the js folder the files are:

    Cool, which JS file do you want to start with?

    Thanks!!! Well I guess the datepicker. Don’t know if you looked at the old site page http://www.poncesuites.net/reservation/selectroom.php but it is driven by the visitor entering a ‘check-in’ date and a check-out date. REALLY appreciate the help Andrew!

    We can help you load the JavaScript into your WordPress theme, if that’s what you’re asking.

    Sure ok – what’s involved?

    You’d need to create a file named “functions.php” into your Child Theme root directory.

    Then in that file you’d enqueue the JavaScript file so that WordPress can load it properly and here is an example of doing that:

    function mainScripts() {
        wp_enqueue_script( 'datepicker', get_stylesheet_directory_uri() . '/js/datepicker.js', '', '1.0', true );
    add_action( 'wp_enqueue_scripts', 'mainScripts' );

    In that example you can also enqueue more scripts by simply adding them within the mainScripts function, e.g;

    function mainScripts() {
        wp_enqueue_script( 'datepicker', get_stylesheet_directory_uri() . '/js/datepicker.js', '', '1.0', true );
        wp_enqueue_script( 'form_validation', get_stylesheet_directory_uri() . '/js/form_validation.js', '', '1.0', true );
    add_action( 'wp_enqueue_scripts', 'mainScripts' );

    You may want to avoid loading “jquery.js” if that file contains the jQuery library. The jQuery library is already loaded in WordPress and you don’t need to load it again.

    Note that you need to add the opening and closing PHP tags when you’ve created functions.php, e.g


    Thank you very much Andrew! I will give this a try maybe later tonight (I am in the Philippines but orig. from Scotland). Is there some way I can get in touch if I run into problems as I am sure you don’t have eyes on this thread forever!

    Moderator Jan Dembowski


    Brute Squad and Volunteer Moderator

    Is there some way I can get in touch if I run into problems

    Just reply on this thread if you have more questions. Andrew’s a regular and I am sure he’ll see your topic. 😉

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Adding Javascript to WP from old site’ is closed to new replies.