jquery - javascript and css not loading properly in WordPress site

I managed to make my code working via codepen as you can see if you visit the link here

Now trying to implement on a WordPress test site it looks like my javascript is not working as well as the fontawesome is not being loaded properly. Here is the link for the test site

Here it is my js:

$(document).ready(function() {
  var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('.submit-here').click(function() {
    // var link = day_1+month_1+year;
    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();

    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 

    var where = $('#selection :selected').text();
    var people = $('#people :selected').text();

    console.log('www.lekkeslaap.co.za/akkommodasie-in/'+where+'?q='+where+'&start='+day_1+'+'+month_1+'+'+year_1+'&end='+day_2+'+'+month_2+'+'+year_2+'&pax='+people);   
  });
});

And here it is for my functions.php:

function testsite_scripts() {
    wp_enqueue_style( 'testsite-style', get_stylesheet_uri() );
    wp_enqueue_style( 'fontawesome', get_template_directory_uri() . '.7.0/css/font-awesome.min.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( 'testsite-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20151215', true );

    wp_enqueue_script( 'testsite-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'testsite_scripts' );

function testsite_load_scripts(){

    wp_enqueue_style( 'font_extra', get_template_directory_uri() . '.8/themes/start/jquery-ui.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( 'plugin_script', get_template_directory_uri() . '.8/jquery-ui.min.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'calendario', get_template_directory_uri() . '.6/jquery.min.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'calendario', get_template_directory_uri() . '/js/calendario.js', array('jquery'), '20151215', true );
}

add_action( 'wp_enqueue_scripts', 'testsite_load_scripts' );

I managed to make my code working via codepen as you can see if you visit the link here

Now trying to implement on a WordPress test site it looks like my javascript is not working as well as the fontawesome is not being loaded properly. Here is the link for the test site

Here it is my js:

$(document).ready(function() {
  var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('.submit-here').click(function() {
    // var link = day_1+month_1+year;
    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();

    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 

    var where = $('#selection :selected').text();
    var people = $('#people :selected').text();

    console.log('www.lekkeslaap.co.za/akkommodasie-in/'+where+'?q='+where+'&start='+day_1+'+'+month_1+'+'+year_1+'&end='+day_2+'+'+month_2+'+'+year_2+'&pax='+people);   
  });
});

And here it is for my functions.php:

function testsite_scripts() {
    wp_enqueue_style( 'testsite-style', get_stylesheet_uri() );
    wp_enqueue_style( 'fontawesome', get_template_directory_uri() . 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( 'testsite-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20151215', true );

    wp_enqueue_script( 'testsite-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'testsite_scripts' );

function testsite_load_scripts(){

    wp_enqueue_style( 'font_extra', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( 'plugin_script', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'calendario', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'calendario', get_template_directory_uri() . '/js/calendario.js', array('jquery'), '20151215', true );
}

add_action( 'wp_enqueue_scripts', 'testsite_load_scripts' );

• jquery
• wp-enqueue-script
• wp-enqueue-style

Share Improve this question edited Apr 6, 2017 at 11:49 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Apr 6, 2017 at 8:46 Sidney SousaSidney Sousa 21344 silver badges1414 bronze badges 1

• try to run this code "$(window).on('load', function () { alert("js works"'); });" if it does not run then replace $ with jQuery and run again. – Faiyaz Alam Commented Apr 6, 2017 at 9:03

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

WordPress uses jQuery in a noConflict mode. Use it like this:

(function($){

    /**
     * Immediate execution
     */
    console.log();

    /**
     * When DOM is ready
     */
    $(document).ready(function(){

    });

    /**
     * When all content is loaded
     */
    $(window).load(function(){

    }); // window.load END

})(jQuery);

Edited my functions.php and it works now

function testsite_scripts() {
    wp_enqueue_style( 'testsite-style', get_stylesheet_uri() );
    wp_enqueue_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0.0', 'all' );
    wp_enqueue_style( 'plugin-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( 'plugin_script', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'testsite-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'calendario', get_template_directory_uri() . '/js/calendario.js', array('jquery'), '20151215', true );
    wp_enqueue_script( 'testsite-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'testsite_scripts' );