Ryan C Ryan C - 1 year ago 66
PHP Question

I am converting a Bootstrap theme into Wordpress but I cannot get my scripts to load in and run

Here is my repos on GitHub for the theme: https://github.com/RyanChrist4/ryanstrap

What I have done is removed the script tags from the head and put them into the functions.php file using the wp_register_script function and the wp_enqueue_script function. I have looked at the answers for other peoples similair questions and tried formatting it like them but I still cant get the scripts to run. I am new to web development and new to Wordpress. Also, in the header, there is a script tag that is calling multiple function but I get an error in the console that says "Uncaught Reference error.

Here is my the code in my functions.php file:

//jQuery Insert From Google
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue");
function my_jquery_enqueue() {
wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
//Launches all of the scripts below
add_action("wp_enqueue_scripts", "launch_scripts");
function launch_scripts() {
wp_enqueue_script('the-flexslider', get_template_directory_uri() . '/assets/js/jquery.flexslider-min.js');
wp_enqueue_script('the-fitvids', get_template_directory_uri() . '/assets/js/jquery.fitvids.js');
wp_enqueue_script('the-smoothscroll', get_template_directory_uri() . '/assets/js/jquery.smooth-scroll.min.js');
wp_enqueue_script('the-backstretch', get_template_directory_uri() . '/assets/js/jquery.backstretch.min.js');
wp_enqueue_script('the-bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.js');
wp_enqueue_script('the-bootstrapmin', get_template_directory_uri() . '/assets/js/bootstrap.min.js');
wp_enqueue_script( 'the-gmaps', get_template_directory_uri() . '/http://maps.google.com/maps/api/js', array(), '20120206', true );
wp_enqueue_script('the-mgmaps', get_template_directory_uri() . '/assets/js/gmaps.js');
wp_enqueue_script('the-script', get_template_directory_uri() . '/assets/js/script.js');

Here is the content of my header.php file:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- Its not valid html but it works -->
<title><?php bloginfo( 'title' ); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A very good admin theme" />
<meta name="author" content="AHthemes" />
<!--<script>menu(); backstretch(); slider(); contentslider(); map(); panels(); blogposts();</script>-->
<!-- Le styles -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>"media="screen" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<!--[if gte IE 9]>
<style type="text/css">
.gradient { filter: none; }
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<div class="nav-section">
<ul class="nav">
<li><a href="#home" class="scroll home">Home</a></li>
<li><a href="#about" class="scroll about">About</a></li>
<li><a href="#work" class="scroll work">Work</a></li>
<li><a href="#contact" class="scroll contact">Contact</a></li>

Answer Source

This sounds like a JavaScript issue, compounded by WordPress.

Generally, when someone mentions "Uncaught reference error" it has to do with your scripts depending on something, and that thing not being loaded yet.

That's my hunch. To do that, your code should be changed to the following -- I cleaned up your code :-)

Also fixed some code errors, you have one of your external scripts being loaded in badly (the gmap thing).


    // Replace Core jQuery version with 1.7.1 (Bootstrap Theme Requirement)
    // WordPress 4.5 includes 1.12.3
    // Only do this when we are not within the Administration area of WordPress.
    if (!is_admin()) {
        add_action("wp_enqueue_scripts", "replace_jquery");

    function replace_jquery() {
        wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, '1.7.1', false);

    // Load all of the scripts below, on every single page. :-\
    add_action("wp_enqueue_scripts", "launch_scripts");
    function launch_scripts() {
        $internal_path = get_template_directory_uri() . '/assets/js/';
        wp_enqueue_script('the-flexslider', $internal_path . 'jquery.flexslider-min.js', array('jquery'));
        wp_enqueue_script('the-fitvids', $internal_path . 'jquery.fitvids.js', array('jquery'));
        wp_enqueue_script('the-smoothscroll', $internal_path . 'jquery.smooth-scroll.min.js', array('jquery'));
        wp_enqueue_script('the-backstretch', $internal_path . 'jquery.backstretch.min.js', array('jquery'));
        wp_enqueue_script('the-bootstrap', $internal_path . 'bootstrap.js', array('jquery'));
        wp_enqueue_script('the-bootstrapmin', $internal_path . 'bootstrap.min.js', array('jquery'));
        wp_enqueue_script('the-gmaps', '//maps.google.com/maps/api/js', array('jquery'), '20120206', true);
        wp_enqueue_script('the-mgmaps', $internal_path . 'gmaps.js', array('jquery'));
        wp_enqueue_script('the-script', $internal_path . 'script.js', array('jquery'));
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download