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! While you're at it, check out some resources Treehouse students have shared here.

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

Lucas Santos
Lucas Santos
19,315 Points

Wordpress is not loading script other than in index.php???

Hey guys so iv been trying to figure out why this is happening I have a simple wordpress site that im developing locally and I am using couple of scripts, they all load fine by the looks of things but when I go to any other page other than index.php a certain "Viewport Checker" Script does not work but loads. I use the viewport checker with animate.css so it can tell when an element is viewable on the screen then it give it the effect.

So this is how I load everything in my functions.php

/**
     * Enqueue scripts and styles.
     */
    function loading_scripts() {

        global $wp_scripts;

        wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );

        wp_enqueue_style( 'main-style', get_stylesheet_uri() );

        wp_enqueue_style( 'animate_css', get_template_directory_uri() . '/css/animate.css' );

        wp_enqueue_style( 'owlcarousel_css', get_template_directory_uri() . '/owl-carousel/owl.carousel.css' );

        wp_enqueue_style( 'owltheme_css', get_template_directory_uri() . '/owl-carousel/owl.theme.css' );

        wp_enqueue_style( 'google_fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' );

        wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true );

        wp_enqueue_script( 'owl_js', get_template_directory_uri() . '/owl-carousel/owl.carousel.js', array('jquery'), '', true );

        wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true );

        wp_enqueue_script( 'viewport_js', get_template_directory_uri() . '/js/jquery.viewportchecker.js', array('jquery'), '', true );

        wp_register_script ('html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );

        wp_register_script ('respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

        $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );

        $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

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


    require get_template_directory() . '/inc/wp_bootstrap_navwalker.php';

Now for some reason when I go to any other page other than index.php such as (page.php or page-about.php) my viewportscript does not work. And here is the part thats really crazy the viewport checker is used for a logo in the header.php so it's already included in every page the same as index.php so I know nothing is different in the markup. Also I see that my other js files are loading in other pages just fine like my owl carousel, bootstrap_js, theme_js as well as all my styles.

Here is how the content in my pages are displayed:

<?php get_header(); ?> //my viewport checker that uses animate.css is only used in here

    <p>my about content</p>

    <?php get_footer(); ?>

Here is the viewport checker if needed for some reason:

/*
        Version 1.5.0
        The MIT License (MIT)

        Copyright (c) 2014 Dirk Groenen

        Permission is hereby granted, free of charge, to any person obtaining a copy of
        this software and associated documentation files (the "Software"), to deal in
        the Software without restriction, including without limitation the rights to
        use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
        the Software, and to permit persons to whom the Software is furnished to do so,
        subject to the following conditions:

        The above copyright notice and this permission notice shall be included in all
        copies or substantial portions of the Software.
    */

    (function($){
        $.fn.viewportChecker = function(useroptions){
            // Define options and extend with user
            var options = {
                classToAdd: 'visible',
                offset: 100,
                repeat: false,
                callbackFunction: function(elem, action){},
                scrollHorizontal: false
            };
            $.extend(options, useroptions);

            // Cache the given element and height of the browser
            var $elem = this,
                windowSize = (!options.scrollHorizontal) ? $(window).height() : $(window).width(),
                scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');

            this.checkElements = function(){

                // Set some vars to check with
                if(!options.scrollHorizontal){
                    var viewportTop = $(scrollElem).scrollTop(),
                        viewportBottom = (viewportTop + windowSize);
                }
                else{
                    var viewportTop = $(scrollElem).scrollLeft(),
                        viewportBottom = (viewportTop + windowSize);
                }


                $elem.each(function(){
                    var $obj = $(this),
                        objOptions = {},
                        attrOptions = {};

                    //  Get any individual attribution data
                    if ($obj.data('add'))
                        attrOptions.classToAdd = $obj.data('add');
                    if ($obj.data('offset'))
                        attrOptions.offset = $obj.data('offset');
                    if ($obj.data('repeat'))
                        attrOptions.repeat = $obj.data('repeat');
                    if ($obj.data('scrollHorizontal'))
                        attrOptions.scrollHorizontal = $obj.data('scrollHorizontal');

                    $.extend(objOptions, options);
                    $.extend(objOptions, attrOptions);

                    // If class already exists; quit
                    if ($obj.hasClass(objOptions.classToAdd) && !objOptions.repeat){
                        return;
                    }

                    // define the top position of the element and include the offset which makes is appear earlier or later
                    var elemTop = (!objOptions.scrollHorizontal) ? Math.round( $obj.offset().top ) + objOptions.offset : Math.round( $obj.offset().left ) + objOptions.offset,
                        elemBottom = elemTop + ($obj.height());

                    // Add class if in viewport
                    if ((elemTop < viewportBottom) && (elemBottom > viewportTop)){
                        $obj.addClass(objOptions.classToAdd);

                        // Do the callback function. Callback wil send the jQuery object as parameter
                        objOptions.callbackFunction($obj, "add");

                    // Remove class if not in viewport and repeat is true
                    } else if ($obj.hasClass(objOptions.classToAdd) && (objOptions.repeat)){
                        $obj.removeClass(objOptions.classToAdd);

                        // Do the callback function.
                        objOptions.callbackFunction($obj, "remove");
                    }
                });

            };

            // Run checkelements on load and scroll
            $(window).bind("load scroll touchmove", this.checkElements);

            // On resize change the height var
            $(window).resize(function(e){
                windowSize = (!options.scrollHorizontal) ? e.currentTarget.innerHeight : e.currentTarget.innerWidth;
            });

            // trigger inital check if elements already visible
            this.checkElements();

            return this;
        };
    })(jQuery);

Some more information you should know:

  1. all styles and scripts including viewportchecker display in firebug just fine.

  2. I have tried possibly loading the script in "no conflict mode" to see if that was the problem and nothing.

  3. I have tried changing the order of when it's called in functions.php and no difference

UPDATE

I have also tried writing a simple alert box code in the javascript file that I thought was not working and the alert box popped up in the about page but my viewport checker code above still did not work and only works when I go Home "index.php".

1 Answer

Lucas Santos
Lucas Santos
19,315 Points

Wow never mind guys I found out what the problem is after frying my brain for 2 days. I just had to simply change the order in which my viewport checker was called in my themes_js file. It was called last I put it all the way on top and it worked. Very strange, still dont know why I had to do that for it to work on all other pages other than index but it worked.