javascript and css not loading properly in WordPress site

Question

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

AryKay · Accepted Answer · 2017-04-06 08:46:21Z

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

Initially it working the fontawesome only, but I cancelled the second function and loaded everything in the first function and it works the same as it does not my codepen now. Appreciate the support

l.varga · Accepted Answer · 2017-04-06 08:48:33Z

1

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

answered Apr 6, 2017 at 8:48

l.varga

8716 silver badges14 bronze badges

2 Comments

Sidney Sousa Over a year ago

It was about that. with @AryKay full answer I runs as I wanted. Thank you

l.varga Over a year ago

No problem. If the answer was useful, please mark it as such.

Majid Nayyeri · Accepted Answer · 2017-04-06 08:46:34Z

0

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' />

answered Apr 6, 2017 at 8:46

Majid Nayyeri

2432 silver badges11 bronze badges

Collectives™ on Stack Overflow

javascript and css not loading properly in WordPress site

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related