Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Tevin Cooks
Tevin Cooks
730 Points
Posted by Tevin Cooks
Tevin Cooks
730 Points

I am not sure how to link my js files to functions.php from the template I bought.

the error code i receive is "Unable to load the webpage because the server sent no data. Error code: ERR_EMPTY_RESPONSE"

This is the html template with JS in the Header and Footer

Header:

<!-- favicon and apple touch icon, remove if you put this page in the root directory --> <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> <link rel="icon" type="image/png" href="apple-touch-icon-precomposed.png">

    <!-- Google Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/owl.carousel.css">

    <!-- Fullscreen Image Background Stylesheet -->
    <link rel="stylesheet" href="css/supersized.css">

    <!-- Main Style -->
    <link rel="stylesheet" href="css/style.css">

    <!-- Google Maps -->
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <!-- Modernizr -->
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

    <!--[if lt IE 9]>
        <script src="js/respond.js"></script>
        <script src="js/excanvas.compiled.js"></script>
    <![endif]-->
</head>

Footer:

    </footer>
    <!-- End Footer -->

    <!-- Retinajs -->
    <script src="js/retina-1.1.0.min.js"></script>

    <!-- jQuery -->
    <script src="js/vendor/jquery-1.10.2.min.js"></script>

    <!-- jQuery Plugins -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.easypiechart.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.mixitup.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/jquery.simple-text-rotator.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script src="js/detectmobilebrowser.js"></script>

    <!-- Fullscreen Image Background Script-->
    <script src="js/supersized.3.2.7.min.js"></script>
    <script src="js/background-image.js"></script>

    <!-- Main Script -->
    <script src="js/script.js"></script>

</body>

</html>

Tevin Cooks
Tevin Cooks
730 Points
Tevin Cooks
Tevin Cooks
730 Points

This is my current functions.php file and i comment out what I was trying to load was jQuery but was stumped on how to make it work. PLEASE HELP!

<?php 

function wpf_theme_styles(){
    // Stylesheets
    wp_enqueue_style('font_awesome_css', get_template_directory_uri() . '/css/font-awesome.css');
    wp_enqueue_style('normalize_css', get_template_directory_uri() . '/css/normalize.css');
    wp_enqueue_style('owl_carousel_css', get_template_directory_uri() . '/css/owl_carousel.css');
    wp_enqueue_style('magnific_popup.css', get_template_directory_uri() . '/css/magnific-popup.css');
    //Fulscreen background.css
    wp_enqueue_style('supersized_css', get_template_directory_uri() . '/css/supersized.css');
    wp_enqueue_style('ytplayer_css', get_template_directory_uri() . '/css/ytplayer.css');
    wp_enqueue_style('main_css', get_template_directory_uri() . '/style.css');
    //Google Fonts
    wp_enqueue_style('g_font', 'http://fonts.googleapis.com/css?family=Montserrat:700');
    wp_enqueue_style('g_font2', 'http://fonts.googleapis.com/css?family=Montserrat:700');
}
add_action( 'wp_enqueue_scripts', 'wpf_theme_styles' );


function wpf_theme_js() {

        //google maps
    wp_enqueue_scripts('g_map_js', "http://maps.googleapis.com/maps/api/js?sensor=false", '
        ', '', false);
    // modernizer js
    wp_enqueue_scripts('modernizer_js', get_template_directory_uri() . '/js/modernizer.js', '
        ', '', false);
    // retina js
    wp_enqueue_scripts('retina_js', get_template_directory_uri() . 'js/retina-1.10.2.min.js','
        ', '', true);
    // load jQuery
/*  wp_enqueue_scripts('retina_js', get_template_directory_uri() . 'js/retina-1.10.2.min.js','
        ', '', true); 
*/
    // fullscreen image background script
    wp_enqueue_scripts('supersized_min_js', get_template_directory_uri() . 'js/supersized.3.2.7.min.js','
        ', '', true);
    wp_enqueue_scripts('bg_img_js', get_template_directory_uri() . 'js/background-image.js', '
        ', array( 'jquery' ), true);
    // main java script
    wp_enqueue_scripts('main_js', get_template_directory_uri() . 'js/script.js','
        ', '', true);

}
add_action( 'wp_enqueue_scripts', 'wpf_theme_js' );

1 Answer

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Try taking a look at this video and see if it helps: http://teamtreehouse.com/library/wordpress-theme-development/working-with-css-and-js-in-wordpress-themes/how-to-link-to-js-from-functionsphp-file

There are a number of things to check for:

  • That you have the files in the right place
  • That you have wp_footer and wp_head in the header and footer templates
  • That the links are showing up in the source code
  • If you're using a child theme or not