CODEWITHSUNDEEP
javascriptjquerywordpress
Sidney Sousa
Sidney Sousa

Reputation: 3584

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() . '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' );

Upvotes: 0

Views: 412

Answers (3)

l.varga
l.varga

Reputation: 871

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' );

and similar is the problem.

You are trying to load the assets from 

/wp-content/themes/testsitehttps:/maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0

which is, obviously, wrong.

get_template_directory_uri() gets the relative path to your WP theme.

Instead, try this:

wp_enqueue_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0.0', 'all' );

Upvotes: 1

Majid Nayyeri
Majid Nayyeri

Reputation: 243

It's not related to your js at all

Your link to font-awesome css in wrong. your link is this :

http://wordpressdev.burnnotice.co.za/wp-content/themes/testsitehttps://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0

And it should be this :

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0

checkout your header.php file codes. you should link direct ! like this :

<link rel='stylesheet' id='fontawesome-css'  href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0' type='text/css' media='all' />

Upvotes: 0

AryKay
AryKay

Reputation: 308

Your reference URLs in your html's <head> are incorrect, as they're the following:

If you remove the http://wordpressdev.burnnotice.co.za/wp-content/themes/testsite from the beginning of those two URLs, they should load fine. To do that, you'll have to remove the get_template_directory_uri() . part from your php file for those two references.

Try the following php code:

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_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', '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( 'calendario', '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' );

Upvotes: 1

Related Questions