0

I'm trying to migrate a theme to Wordpress. As usual, I imported all CSS, and now I'm moving on to the JS portion.

This is how my function.php looks:

    <?php

function greennectar_files() {
  
// enqueue CSS

  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_stylesheet_uri());
  wp_enqueue_style('bootstrapcss',   get_theme_file_uri('/css/bootstrap.css'), null, array(), );
  wp_enqueue_style('bootstrap8',  get_theme_file_uri('/vendors/linericon/style.css'), null, array(), );
  wp_enqueue_style('bootstrap4',  get_theme_file_uri('/css/font-awesome.min.css'), null, array(), );
  wp_enqueue_style('bootstrap2',  get_theme_file_uri('/vendors/nice-select/css/nice-select.css'), null, array(), );
  wp_enqueue_style('bootstrap3',  get_theme_file_uri('/vendors/animate-css/animate.css'), null, array(), );
  wp_enqueue_style('bootstrap5',  get_theme_file_uri('/css/animate.min.css'), null, array(), );
  wp_enqueue_style('bootstrap6',  get_theme_file_uri('/vendors/flaticon/flaticon.css'), null, array(), );


// enqueue JAVASCRIPT



    wp_enqueue_script('popper',             get_theme_file_uri('/js/popper.js'), array('jquery') , array(), true);
  wp_enqueue_script('bootstrap', get_theme_file_uri('/js/bootstrap.min.js'), array('popper'), array(), true);
  wp_enqueue_script('main-university-js4', get_theme_file_uri('/js/stellar.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js5', get_theme_file_uri('/js/jquery.magnific-popup.min.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js6', get_theme_file_uri('/vendors/nice-select/js/jquery.nice-select.min.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js7', get_theme_file_uri('/vendors/isotope/imagesloaded.pkgd.min.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js8', get_theme_file_uri('/vendors/isotope/isotope-min.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js9', get_theme_file_uri('/vendors/owl-carousel/owl.carousel.min.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js10', get_theme_file_uri('/js/jquery.ajaxchimp.min.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js11', get_theme_file_uri('/js/mail-script.js'), array('bootstrap'), array(), true);
  wp_enqueue_script('main-university-js12', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE', NULL, false, true);
  wp_enqueue_script('main-university-js13', get_theme_file_uri('/js/gmaps.min.js'), NULL, array(), true);
  wp_enqueue_script('main-university-js14', get_theme_file_uri('/js/theme.js'), NULL, array(), true);
  
}

// THEME FUNCTIONS

add_action('wp_enqueue_scripts', 'greennectar_files');

function greennectar_features() {
  add_theme_support('title-tag');
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}

add_action('after_setup_theme', 'greennectar_features');

And this is how the original HTML theme does it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link rel="icon" href="img/favicon.png" type="image/png" />
    <title>Steve Portfolio</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="vendors/linericon/style.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css" />
    <link rel="stylesheet" href="css/magnific-popup.css" />
    <link rel="stylesheet" href="vendors/nice-select/css/nice-select.css" />
    <link rel="stylesheet" href="vendors/animate-css/animate.css" />
    <link rel="stylesheet" href="vendors/flaticon/flaticon.css" />
    <!-- main css -->
    <link rel="stylesheet" href="css/style.css" />
  </head>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/stellar.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
    <script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
    <script src="vendors/isotope/isotope-min.js"></script>
    <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
    <script src="js/jquery.ajaxchimp.min.js"></script>
    <script src="js/mail-script.js"></script>
    <!--gmaps Js-->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE"></script>
    <script src="js/gmaps.min.js"></script>
    <script src="js/theme.js"></script>
  </body>
</html>

The original version (second one) works fine with the HTML. Mine is very very twitchy. Half the scripts seem not to load.

What I tried:

  1. I tried making sure I load the scripts based on what is recommended in the second one:

  2. Tried deregistering WordPress jQuery and adding the new 3.2.1 version, did not help.

  3. Tried moving the scripts proposed in step 1 to the top of the page.

  4. Tried adding jquery as a dependency to all of the scripts.

Neither of these helped. Any help is appreciated!

0

wp_enqueue_script() expects an array of strings, not a string, for the $deps parameter.

So, for example, your code should read:

wp_enqueue_script( 'popper', get_theme_file_uri('/js/popper.js'), array( 'jquery' ), array(), true );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.